<template>
  <div class="groups-cont">
    <el-form
      ref="groupData"
      label-width="150px"
      class="sub-condition-form"
      :model="groupData"
      :rules="rules"
    >
      <span v-if="!disabled && !isLast" class="del-btn" @click="delRule"
        >删除</span
      ><!--:class="isLast?'disable del-btn':'del-btn'"-->
      <el-form-item label="基础规则名称：" prop="subDescription">
        <el-input
          v-model.trim="groupData.subDescription"
          :disabled="disabled"
        ></el-input>
      </el-form-item>
      <el-form-item label="基础规则类型：" prop="subType">
        <el-select
          v-model="groupData.subType"
          :disabled="disabled"
          placeholder="请选择"
          size="small"
          @change="subTypeChange"
        >
          <el-option
            v-for="item in baseTypes"
            :key="item.id"
            :label="item.name"
            :value="item.type"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="基础规则术语类型：" prop="subLenCode">
        <el-select
          v-model="groupData.subLenCode"
          :disabled="disabled"
          placeholder="请选择"
          size="small"
          @change="subCodeChange"
        >
          <el-option
            v-for="item in baseTermTypeList"
            :key="item.id"
            :label="item.name"
            :value="item.code"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        class="addDepartFormItem"
        label="医学标准术语："
        prop="subConceptId"
      >
        <el-select
          clearable
          remote
          filterable
          :disabled="disabled"
          :remote-method="searchConcept"
          v-model.trim="groupData.subConceptId"
        >
          <el-option
            v-for="item in conceptList"
            :key="item.conceptId"
            :label="item.conceptName"
            :value="item.conceptId"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-if="groupData.subType === 2 && showDataType"
        label="选择类型："
        prop="dataType"
      >
        <el-select
          v-model="groupData.dataType"
          placeholder="请选择"
          size="small"
          @change="dataTypeChange"
        >
          <el-option
            v-for="item in dataTypes"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        class="min-margin"
        v-if="groupData.dataType === '1'"
        label="最大值："
      >
        <div class="select-item clearfix">
          <el-col :span="3">
            <el-form-item prop="subMaxOperator">
              <el-select
                v-model="groupData.subMaxOperator"
                placeholder="请选择"
                size="small"
                clearable
              >
                <el-option
                  v-for="item in operMaxList"
                  :key="item.key"
                  :label="item.name"
                  :value="item.key"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="subMaxValue">
              <el-input
                type="text"
                v-model="groupData.subMaxValue"
                placeholder="填写数值"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="subMaxUnit">
              <el-input
                type="text"
                v-model.trim="groupData.subMaxUnit"
                placeholder="填写单位"
              />
            </el-form-item>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item
        class="min-margin"
        v-if="groupData.dataType === '1'"
        label="最小值："
      >
        <div class="select-item clearfix">
          <el-col :span="3">
            <el-form-item prop="subMinOperator">
              <el-select
                v-model="groupData.subMinOperator"
                placeholder="请选择"
                size="small"
                clearable
              >
                <el-option
                  v-for="item in operMinList"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="subMinValue">
              <el-input
                type="text"
                v-model="groupData.subMinValue"
                placeholder="填写数值"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item prop="subMinUnit">
              <el-input
                type="text"
                v-model.trim="groupData.subMinUnit"
                placeholder="填写单位"
              />
            </el-form-item>
          </el-col>
        </div>
      </el-form-item>
      <el-form-item
        v-if="groupData.subType !== 6 && groupData.dataType === '2'"
        label="医学内容："
        prop="subEqValue"
        class="discDesc is-required"
      >
        <el-input
          type="textarea"
          rows="3"
          placeholder="请输入医学内容"
          v-model.trim="groupData.subEqValue"
        ></el-input>
      </el-form-item>
      <el-form-item
        v-if="groupData.subType === 6"
        label="正则表达式："
        prop="subEqValue"
        class="discDesc is-required"
      >
        <el-input
          type="textarea"
          rows="3"
          placeholder="请输入正则表达式"
          v-model.trim="groupData.subEqValue"
        ></el-input>
      </el-form-item>
    </el-form>
    <div class="inner-oper" v-if="showAdd">
      <span>新增规则：</span>
      <span class="add-btn" @click="addRule"
        ><img src="../../images/add.png" alt="新增规则"
      /></span>
    </div>
  </div>
</template>
<script>
import api from "@api/knowledgeLib.js";
export default {
  name: "subCondititons",
  props: [
    "groupData",
    "ind",
    "isLast",
    "baseTypes",
    "firstPlace",
    "disabled",
    "showAdd"
  ],
  data() {
    return {
      //baseTermTypeList:[],
      typeList: [],
      numTypes: "", //只有数值类型的类型id
      operMaxList: [
        { name: "<=", key: "<=" },
        { name: "<", key: "<" }
      ],
      operMinList: [
        { name: ">", key: ">" },
        { name: ">=", key: ">=" }
      ],
      dataTypes: [
        { id: "1", name: "数值类型" },
        { id: "2", name: "文本类型" }
      ],
      conceptList: [],
      rules: {
        subDescription: [
          { required: true, message: "请输入基础规则名称", trigger: ["blur"] },
          {
            validator: (rule, value, callback) => {
              if (value && value.length > 100) {
                callback(new Error("规则名称不能超过100字"));
              } else {
                callback();
              }
            },
            trigger: "change"
          }
        ],
        subType: [
          { required: true, message: "请选择基础规则类型", trigger: ["change"] }
        ],
        subLenCode: [
          {
            required: true,
            message: "请选择基础规则术语类型",
            trigger: ["change"]
          }
        ],
        subConceptId: [
          { required: true, message: "请输入医学标准术语", trigger: ["blur"] }
        ],
        dataType: [
          { required: true, message: "请选择类型", trigger: ["change"] }
        ],
        subMaxOperator: [
          {
            validator: (rule, value, callback) => {
              const {
                subMaxValue,
                subMinOperator,
                subMinValue
              } = this.groupData;
              const val = value + subMinOperator + subMinValue + subMaxValue;
              if (!val || (!value && subMaxValue !== "")) {
                callback(
                  new Error("最大值和最小值至少完整填写一个，单位不必填")
                );
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        subMinOperator: [
          {
            validator: (rule, value, callback) => {
              const {
                subMaxValue,
                subMaxOperator,
                subMinValue
              } = this.groupData;
              const val = value + subMaxOperator + subMinValue + subMaxValue;
              if (!val || (!value && subMinValue !== "")) {
                callback(
                  new Error("最大值和最小值至少完整填写一个，单位不必填")
                );
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        subMaxValue: [
          {
            validator: (rule, value, callback) => {
              const {
                subMaxOperator,
                subMinOperator,
                subMinValue
              } = this.groupData;
              const val = value + subMaxOperator + subMinValue + subMinOperator;
              const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
              if (!val || (value == "" && subMaxOperator)) {
                callback(
                  new Error("最大值和最小值至少完整填写一个，单位不必填")
                );
              } else if (value !== "" && !isNum) {
                callback(new Error("只能输入数字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        subMinValue: [
          {
            validator: (rule, value, callback) => {
              const {
                subMaxValue,
                subMinOperator,
                subMaxOperator
              } = this.groupData;
              const val = value + subMaxOperator + subMaxValue + subMinOperator;
              const isNum = /^(\-|\+)?\d+(\.\d+)?$/.test(value);
              if (!val || (value == "" && subMinOperator)) {
                callback(
                  new Error("最大值和最小值至少完整填写一个，单位不必填")
                );
              } else if (value !== "" && !isNum) {
                callback(new Error("只能输入数字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],
        subEqValue: [
          {
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请输入" + this.textName));
              } else if (value.length > 200) {
                callback(new Error(this.textName + "不能超过200字"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  watch: {
    groupData: {
      handler: function (val) {
        this.$emit("changeVal", val, this.ind);
      },
      deep: true
    },
    /*'baseTypes':{
                handler:function(val){
                    if(!this.groupData.subType){
                        this.baseTermTypeList =[];
                        return;
                    }
                    const obj = val.find((it)=>it.type===this.groupData.subType);
                    this.baseTermTypeList = obj.subMenuList;
                },
                deep:true
            },*/
    firstPlace: {
      handler: function (val) {
        if (this.ind !== 0 || !val) return;
        const dict =
          localStorage
            .getItem("zskDicts")
            .match(new RegExp(val.checkedType + "-\\d+", "g")) || [];
        const types = dict[0].split("-");
        this.groupData.subType = +types[2];
        this.groupData.subLenCode = types[1];
        this.conceptList = [val];
        this.groupData.subDescription = val.conceptName;
        this.groupData.subConceptId = val.conceptId;
        this.groupData.subConceptName = val.conceptName;
      },
      deep: true
    }
  },
  created() {
    this.numTypes = localStorage.getItem("zskNumDict");
    this.conceptList = [
      {
        conceptName: this.groupData.subLibName || this.groupData.subConceptName,
        conceptId: this.groupData.subConceptId
      }
    ];
  },
  computed: {
    baseTermTypeList: function () {
      if (!this.baseTypes.length) {
        return [];
      }
      const sub =
        this.baseTypes.find((it) => it.type === this.groupData.subType) || {};
      return sub.subMenuList;
    },
    showDataType: function () {
      return (
        (this.numTypes + ",").indexOf(this.groupData.subLenCode + ",") === -1
      );
    },
    textName: function () {
      return this.groupData.subType !== 6 && this.groupData.dataType === "2"
        ? "医学内容"
        : "正则表达式";
    }
  },
  methods: {
    dataTypeChange(val) {
      this.groupData.subEqOperator = val === "2" ? "=" : "";
      this.clearNumText();
      delete this.groupData.dataType; //触发更新
      this.$set(this.groupData, "dataType", val);
    },
    subTypeChange(val) {
      //基础规则类型修改
      this.groupData.subLenCode = "";
      this.groupData.dataType = "";
      this.clearConcept();
      this.clearNumText();
    },
    subCodeChange(val) {
      //基础规则术语类型修改
      this.groupData.subLenCode = val;
      if ((this.numTypes + ",").indexOf(val + ",") > -1) {
        this.groupData.dataType = "1";
      } else {
        this.groupData.dataType = "";
      }
      this.clearConcept();
      this.clearNumText();
    },
    clearConcept() {
      this.groupData.subConceptId = "";
      this.conceptList = [];
    },
    clearNumText() {
      this.groupData.subMaxOperator = "";
      this.groupData.subMaxValue = "";
      this.groupData.subMaxUnit = "";
      this.groupData.subMinOperator = "";
      this.groupData.subMinValue = "";
      this.groupData.subMinUnit = "";
      this.groupData.subEqValue = "";
      this.groupData.subEqOperator = "";
    },
    searchConcept(val) {
      const param = {
        excludedConceptIds: [this.groupData.subType],
        libType: this.groupData.subLenCode,
        name: val
      };
      api
        .searchConcept(param)
        .then((res) => {
          if (res.data.code == "0") {
            const data = res.data.data;
            this.conceptList = data;
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    addRule() {
      this.$emit("addRule");
    },
    delRule() {
      if (this.isLast) {
        this.warning("初始状态规则不能删除~");
        return;
      }
      //this.showConfirmDialog("是否删除该条规则，可能对现有系统会造成影响",()=>{
      this.$emit("delRule", this.ind);
      //});
    },
    warning(msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || "warning"
      });
    },
    showConfirmDialog(msg, resolve) {
      this.$alert(msg, "提示", {
        confirmButtonText: "确定",
        type: "warning"
      })
        .then(() => {
          resolve();
        })
        .catch(() => {});
    }
  }
};
</script>
<style lang="less">
.groups-cont {
  background: #fff;
  .conceptItem {
    padding: 0 10px;
    cursor: pointer;
    height: 32px;
    line-height: 32px;
    &:hover {
      background: #ebedf1;
    }
  }
  .inner-oper {
    padding: 15px 0 15px 21px;
    .add-btn {
      cursor: pointer;
      img {
        vertical-align: middle;
      }
    }
  }
  .sub-condition-form {
    padding: 20px;
    position: relative;
    border-bottom: 2px solid #f5f5f5;
    .del-btn {
      color: #ff5b5b;
      cursor: pointer;
      position: absolute;
      right: 20px;
      top: 20px;
      z-index: 1;
      &.disable {
        color: #b8b8b8;
      }
    }
  }
  .el-input__icon {
    line-height: 32px;
  }
  .select-item {
    & > div {
      float: left;
      margin-right: 10px;
    }
    .el-input {
      width: auto;
    }
    input {
      width: 95px;
      line-height: 32px;
      height: 32px;
    }
  }
  .el-input,
  .el-input__inner {
    width: 190px;
    line-height: 32px;
    height: 32px;
  }
  .el-button--danger.is-plain {
    background: none;
  }
  .itemList {
    position: absolute;
    // display: none;
    background: #fff;
    width: 188px;
    max-height: 160px;
    border: 1px solid #dcdfe6;
    left: 0;
    top: 37px;
    z-index: 2;
    overflow-y: auto;
  }
  .el-form-item {
    margin-bottom: 22px;
    &.min-margin {
      margin-bottom: 0;
    }
  }
  .el-form-item__error {
    top: auto;
    white-space: nowrap;
    background: #fff;
  }
  .el-input-number {
    width: 95px;
  }
  .el-input-number.is-controls-right .el-input-number__decrease,
  .el-input-number.is-controls-right .el-input-number__increase {
    width: 25px;
    height: 15px;
    line-height: 16px;
  }
  .el-col-3 {
    width: 94px;
  }
}
</style>