<template>
  <div
    class="PubTagGroupWrapper"
    @click="closeNameLis(1)"
  >
    <el-form
      class="groups"
      :rules="rules"
      ref="groups"
      :model="form"
      label-width="150px"
    >
      <el-form-item
        label="选择归属："
        prop="region1"
      >
        <span class="changeTips">改变归属后，标签明细将会恢复到默认状态</span>
        <el-select
          :disabled="isEditOrCopy"
          v-model="form.region1"
          placeholder="请选择归属"
          @change="(e)=>readyChangeSelect(e,1)"
        >
          <el-option
            v-for="item in Adscriptions"
            :label="item.name"
            :value="item.val"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="选择填写单类型："
        prop="region2"
      >
        <span class="changeTips">改变类型后，标签明细将会恢复到默认状态</span>
        <el-select
          :disabled="isEditOrCopy || !form.region1"
          v-model="form.region2"
          placeholder="请选择填写单类型"
          @change="(e)=>readyChangeSelect(e,2)"
        >
          <el-option
            v-for="item in labelTypes"
            :label="item.name"
            :value="item.val"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        v-show="(form.region1 == 1 && form.region2 ==4) || (form.region1 == 4) || (form.region1 == 5) || (form.region1 == 3)"
        :label="(form.region1 == 5)?'是否当化验推送项':(form.region1 == 4)?'当为查体推送项时，需要检索标准术语':(form.region1 == 3)?'是否当其他史推送项':'是否为症状'"
        prop="region12"
      >
        <span
          v-if="form.region1 == 3"
          class="changeTips changeTipsName"
        >当为其他史推送项时，标签系统名称需要检索医学标准术语内容并与之相对应，才可保证系统正常使用，如果未对应上可能造成系统显示异常！如果在搜索中没有可以先在医学标准术语中建立相关信息！</span>
        <span
          v-else-if="form.region1 == 4"
          class="changeTips changeTipsName"
        >当为查体推送项时，标签系统名称需要检索医学标准术语内容并与之相对应，才可保证系统正常使用，如果未对应上可能造成系统显示异常！如果在搜索中没有可以先在医学标准术语中建立相关信息！</span>
        <span
          v-else-if="form.region1 == 5"
          class="changeTips changeTipsName"
        >当为化验推送项时，标签系统名称需要检索医学标准术语内容并与之相对应，才可保证系统正常使用，如果未对应上可能造成系统显示异常！如果在搜索中没有可以先在医学标准术语中建立相关信息！</span>
        <span
          v-else
          class="changeTips changeTipsName"
        >当为症状时，标签系统名称需要与医学标准术语内容相对应；不为症状时可以不用相互对应；</span>
        <el-select
          v-model="form.region12"
          @change="sendData"
        >
          <el-option
            label="是"
            value="0"
          ></el-option>
          <el-option
            label="不是"
            value="1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="标签系统名称："
        prop="region3"
      >
        <div @click.stop style="display:inline-block;">
          <el-input
            v-model="form.region3"
            :disabled="!form.region1"
            maxLength="30"
            placeholder="请输入标签系统名称"
            @change="sendData"
            @focus="focusSystemName"
          ></el-input>
          <ul
            class="systemNames"
            v-if="systemNameShow"
          >
            <li
              v-for="item in systemNameLis"
              class="ellipsis"
              :key="item.conceptId"
              @click="pushSystemName(item.name)"
            >{{item.name}}</li>
          </ul>
        </div>
        <!-- <el-autocomplete
          v-model="form.region3"
          maxLength="30"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入标签系统名称"
          @select="handleSelect"
        ></el-autocomplete> -->
        <span
          v-if="form.region1 == 5 || form.region1 == 4 || form.region1 == 3"
          class="changeTips changeTipsName"
        >标签系统名称需要与医学标准术语内容相对应，如果没有可以先在医学标准术语中建立相关信息！未建立相关信息可能会影响系统使用！</span>
        <span
          v-if="form.region1 == 1 && form.region2 == 4"
          class="changeTips changeTipsName"
        >当为症状时，标签系统名称需要与医学标准术语内容相对应，如果没有可以先在医学标准术语中建立相关信息！未建立相关信息可能会影响系统使用！</span>
      </el-form-item>
      <el-form-item
        label="标签界面名称："
        prop="region4"
      >
        <span
          v-if="form.region1 == 5 || form.region2 == 4 || form.region1 == 4|| form.region1 == 3"
          class="changeTips changeTipsName"
        >为在界面上检索不受影响，标签界面名称应与标签系统名称和医学标准术语内容相对应，未建立相关信息可能会影响系统使用！</span>
        <el-input
          v-model="form.region4"
          :disabled="!form.region1 || form.region1 ==5"
          maxLength="30"
          placeholder="请输入标签界面名称"
          @change="sendData"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="性别："
        prop="region7"
      >
        <span class="changeTips" v-if="!isEditOrCopy">改变性别后，标签明细将会恢复到默认状态</span>
          <!-- :disabled="isEditOrCopy || !form.region1 || form.region2 == 11 || form.region1 == 6||form.region1 == 7||form.region1 == 8||form.region1 == 9||form.region1 == 10" -->
        <el-select
          v-model="form.region7"
          @change="(e)=>readyChangeSelect(e,3)"
        >
          <el-option
            label="通用"
            value="3"
          ></el-option>
          <el-option
            label="男"
            value="1"
          ></el-option>
          <el-option
            label="女"
            value="2"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- <el-form-item
        label="选择项之间链接："
        prop="region5"
      >
        <el-input
          v-model="form.region5"
          maxLength="30"
          placeholder="请输入选择项之间链接"
          @change="sendData"
        ></el-input>
      </el-form-item> -->
      <!-- <el-form-item
        label="能否当项目检索："
        prop="region6"
      >
        <el-select
          v-model="form.region6"
          :disabled="!form.region1 || form.region2 == 11"
          @change="sendData"
        >
          <el-option
            label="不可以"
            value="1"
          ></el-option>
          <el-option
            label="可以"
            value="0"
          ></el-option>
        </el-select>
      </el-form-item> -->
      <el-form-item
        label="年龄："
        prop="region8"
        class="ages"
      >
        <el-input
          v-model.number="form.region8"
          :disabled="!form.region1 || form.region2 == 11 || form.region1 == 6||form.region1 == 7||form.region1 == 8||form.region1 == 9||form.region1 == 10"
          ref="valage1"
          type="number"
          @input="sendData"
        ></el-input>
      </el-form-item> ~
      <el-form-item
        prop="region9"
        class="ages maxAges"
      >
        <el-input
          v-model.number="form.region9"
          :disabled="!form.region1 || form.region2 == 11 || form.region1 == 6||form.region1 == 7||form.region1 == 8||form.region1 == 9||form.region1 == 10"
          type="number"
          ref="valage2"
          @input="sendData"
        ></el-input>
      </el-form-item>
      <el-form-item
        class="verticalMiddle"
        label="选择子项时是否复制主项标签："
        prop="region10"
        v-if="form.region2 == 6"
      >
        <el-select
          v-model="form.region10"
          :disabled="!form.region1 || form.region2 == 11"
        >
          <el-option
            label="不可以"
            value="0"
          ></el-option>
          <el-option
            label="可以"
            value="1"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="是否显示加号："
        prop="region11"
        v-if="form.region2 == 2 || form.region2 == 3"
      >
        <el-select
          v-model="form.region11"
          :disabled="!form.region1 || form.region2 == 11"
        >
          <el-option
            label="显示"
            value="1"
          ></el-option>
          <el-option
            label="不显示"
            value="0"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="form.region1 == 4">
          <span>
              <el-checkbox v-model="form.specFlag"  label="是否为生命体征" true-label="4" false-label="0"  @change="sendData"></el-checkbox>
          </span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import api from '@api/icss.js';
import utils from '@api/utils.js';
/**
 * titlePar 顶部显示左（有默认值可不填）
 * titleSub  顶部显示右（有默认值可不填）
 * form 当前页面传到父组件的数据（region10，region11暂时不用）
 * submitForm 基本信息验证必填项
 * validatePass 基本信息必填项验证成功回调
 * 父组件根据form.region2改变底部组件操作项
 * searchTagList 函数的参数根据type变化
 */

/**
 * 归属和填写单类型限制
 * 诊断（val:7）：诊断/药品/辅检标签（val:9）、
 * 主诉/现病史（val:1）：症状详情（症状尾巴）（val:4）、症状推送类型（添加症状）（val:11）、多项统一横铺标签（血压）（val:3）、多列多选标签（杂音/初为）（val:2）
 * 其他史（val:3）：组合项标签（既往史）（val:6）、症状组合（症状尾巴）（val:4）
 * 查体（val:4）：多列多选标签（杂音/初为）（val:2）、多项统一横铺标签（血压）（val:3）
 * 化验（val:5）：化验组合（val:7）
 * 辅检（val:6）：诊断/药品/辅检标签（val:9）
 * 药品分类/药品（val:8）：诊断/药品/辅检标签（val:9）
 */


export default {
  props: ['editData','isEditOrCopy'],
  data() {
    var validatePass1 = (rule, value, callback) => {
      this.validateSystomName(value, callback, 1)
    };
    var validatePass2 = (rule, value, callback) => {
      const editData = this.$props.editData;
      if (editData.id && value == editData.tagName) { //修改系统名称没变就不再校验
        callback();
      } else {
        this.validateSystomName(value, callback, 2)
      }
    };
    return {
      form: {
        region1: '',    //归属
        region2: '',     //填写单类型
        region3: '',      //系统名称
        region4: '',      //界面名称
        region5: '',      //选项之间的链接
        // region6: '0',      //是否可以检索
        region7: '3',       //性别
        region8: '0',          //最小年龄
        region9: '200',         //最大年龄
        region10: '1',        //是否复制主标签
        region11: '0',       //是否复制当前模块
        region12: '0',        //是否为症状//是否为化验推送//是否为查体推送    
        tagPool: [],          //标签池数据
        order: [],            //排序方式
        tipLis: [],           //提示列表
        specFlag: '0'       //生命体征
      },
      labelTypesMaps: {       //// 归属和填写单类型限制
        '1': ['2', '3', '4'],  //推送类型暂时不用
        '3': ['2', '3','4', '6'],
        '4': ['2', '3'],
        '5': ['7'],
        '6': ['9'],
        // '7':['9'],
        '8': ['9'],
        '9': ['9'],
        '21': ['9'],
        '22': ['9'],
        '10': ['9']
      },
      rules: {
        region1: [
          { required: true, message: '请选择归属', trigger: 'change' }
        ],
        region2: [
          { required: true, message: '请选择填写单类型', trigger: 'change' }
        ],
        region3: [
          { required: true, message: '请输入标签系统名称', trigger: 'change' },
          { validator: validatePass2, trigger: 'blur' },
        ],
        region4: [
          { required: true, message: '请输入标签界面名称', trigger: 'change' },
          { validator: validatePass1, trigger: 'blur' },
        ],
        region6: [
          { required: true, message: '请输入能否当项目检索', trigger: 'change' }
        ],
        region7: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        region8: [
          { required: true, message: '请输入最小年龄', trigger: 'change' }
        ],
        region9: [
          { required: true, message: '请输入最大年龄', trigger: 'change' }
        ],
        region10: [
          { required: true, message: '选择子项时是否复制主项标签', trigger: 'change' }
        ],
        region11: [
          { required: true, message: '是否复制当前模块', trigger: 'change' }
        ],
        region12: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
      },
      tmpSex: '通用',
      tmpOwn: '',
      tmpType: '',
      Adscriptions: [],
      labelTypes: [],
      labelTypesList: [],
      tagTypes: [],        //标签池数据
      type: '',
      systom: null,      //标签系统名称存在与否
      systemNameShow: false,//系统名称列表显示
      systemNameLis: [],//系统名称列表
      isNeedSearch:false
    }
  },
  computed: {
    newSex() {
      return this.form.region7;
    },
    newType() {
      return this.form.region1;
    },
    newSign() {
      return this.form.region2;
    },
    newName() {
      return this.form.region3;
    }
  },
  mounted() {
    const editData = this.$props.editData;
    const isEditOrCopy = this.$props.isEditOrCopy;
    if (isEditOrCopy) {
      const trans = utils.transformKeys(editData, 2); //(2是标签组类型)
      // console.log('editData1', editData)
      this.form = Object.assign({}, this.form, trans);
    }
    this.$emit('submitForm', 'groups', false);
    this.getDropList();
    this.$emit('changeVal', this.form, false)
  },
  watch: {
    newSex(nextVal, prevVal) {
      this.tmpSex = prevVal;
      if (nextVal != prevVal && (this.form.region2 == 2 || this.form.region2 == 6 || this.form.region2 == 7 || this.form.region2 == 4 || this.form.region2 == 11)) {
        this.searchTagList()
      }
    },
    newType(nextVal, prevVal) {
      this.tmpOwn = prevVal;
      if(!this.isEditOrCopy) {
        this.initForm()
      }
     
    },
    newSign(nextVal, prevVal) {
      this.tmpType = prevVal;
     if(!this.isEditOrCopy) {
        this.initForm()
      }
      if (nextVal != prevVal && (this.form.region2 == 2 || this.form.region2 == 6 || this.form.region2 == 7 || this.form.region2 == 4 || this.form.region2 == 11)) {
        this.searchTagList()
      }
    },
    newName(nextVal, prevVal) {
      if (this.isNeedSearch && nextVal != prevVal && (this.form.region12 == 0)) {
        this.focusSystemName()
      }
      if (nextVal != prevVal && (this.form.region1 == 5)) {
        this.form.region4 = this.form.region3
      }
    },
  },
  methods: {
    sendData() {
      this.$emit('changeVal', this.form, false)
    },
    closeNameLis(flg) {
      if (flg == 1) {
        this.systemNameShow = false
      } else if (flg == 2) {
        if (this.systemNameLis.length > 0) {
          this.systemNameShow = true
        } else {
          this.systemNameShow = false
        }
      }
    },
    focusSystemName() {
      this.isNeedSearch = true
      if (this.form.region3.trim() == '') {
        this.systemNameShow = false
        this.systemNameLis = []
        return
      }
      if (this.form.region12 == 0 &&((this.form.region1 == 1 && this.form.region2 == 4) || (this.form.region1 == 4) || (this.form.region1 == 5) || (this.form.region1 == 3))) {
        let tmpArr = [];
        if (this.form.region1 == 1 && this.form.region2 == 4) {//症状
          tmpArr = [1]
        } else if (this.form.region1 == 4) {//查体
          tmpArr = [33]
        } else if (this.form.region1 == 5) {//化验
          tmpArr = [12]
        }else if(this.form.region1 == 3){//其他史
          tmpArr = [21,22,23,24,25,38,39,55,56,57,58,59,60,61,62,63,64,65,66,67]
        }
        let params = {
          "libType": tmpArr,
          "name": this.form.region3,
          "type":this.form.region1
        }
        api.indexByLexicon(params).then((res) => {
          if (res.data.code === '0') {
            this.systemNameLis = res.data.data
            if (res.data.data.length > 0) {
              this.systemNameShow = true
            } else {
              this.systemNameShow = false
            }
          }
        })
      }
    },
    pushSystemName(val) {
      this.isNeedSearch = false
      this.form.region3 = val
      this.systemNameShow = false
    },
    getDropList() {
      return api.getDropList().then((res) => {
        if (res.data.code === '0') {
          this.AdscriptionsList = res.data.data[1];
          this.labelTypesList = res.data.data[2];
          this.form.order = res.data.data[5];
          this.form.tipLis = res.data.data[6];
          this.labelTypes = this.labelTypesList;
          // console.log('labelTypes', this.labelTypes)
          this.Adscriptions = this.AdscriptionsList.filter(item => Object.keys(this.labelTypesMaps).indexOf(item.val) > -1);
        }
      })
    },
    searchTagList() {
      const editData = this.$props.editData;
      if (editData.id) {
        return;
      }
      let region1 = this.form.region1, region2 = this.form.region2;
      let paramFst = !!region2 ? api.getGroupParams(region2) : {};
      let paramSec = {
        "type": region1,
        "sexType": this.form.region7,
        "tagName": '',
        "notIds": [],
      }
      // console.log(paramFst,paramSec,7787)
      let params = Object.assign({}, paramFst, paramSec)
      api.searchTagList(params).then((res) => {
        if (res.data.code === '0') {
          this.form.tagPool = res.data.data
        }
      })
    },
    validateSystomName(name, callback, flg) {
      if (flg == 1) {
        let tmpVal = this.form.region4
        if (tmpVal.trim() == '') {
          callback(new Error('标签界面名称不能为空'));
        } else {
          this.form.region4 = tmpVal.trim()
          callback();
        }
      } else if (flg == 2) {
        let tmpVal = this.form.region3
        if (tmpVal.trim() == '') {
          callback(new Error('标签系统名称不能为空'));
        } else {
          this.form.region3 = tmpVal.trim()
          callback();
        }
      }
    },
    changeType(type) {
      this.$emit('changeVal', this.form, false)
      this.$emit('changeType', type, false)
    },
    changeSex(data) {   //改变性别清空数据
      this.$emit('changeVal', this.form, false)
      this.$emit('changeSex', data, false)
    },
    readyChangeSelect(tmpData, type) {
      if (type === 1) {
        this.form.region2 = '';
        this.labelTypes = this.labelTypesList.filter(item => this.labelTypesMaps[tmpData].indexOf(item.val) > -1)
      }
      if (type === 2) {
        this.initForm()
      }
      this.changeSex(tmpData);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$emit('validatePass', this.form, false)
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    warning(msg, type) {
      this.$message({
        showClose: true,
        message: msg,
        type: type || 'warning'
      })
    },
    initForm() {
      this.form.region12 = '0'
      this.form.region10 = '1'
      this.form.region11 = '0'
      this.systemNameShow = false
    }
  }
}
</script>
<style lang="less">
.PubTagGroupWrapper {
  margin-top: 60px;
  .groups {
    background-color: #fff;
    padding: 20px;
    margin: 20px 20px -20px 20px;
    .el-form-item__content,
    .el-input__inner {
      height: 30px;
      line-height: 30px;
      width: 200px;
    }
    .el-form-item {
      margin-bottom: 20px;
    }
    .el-form-item__error {
      top: 28px;
    }
    .el-form-item__label {
      line-height: 24px !important;
      text-align: left;
    }
    .el-input__icon {
      line-height: 30px;
    }
    .verticalMiddle .el-form-item__content {
      position: relative;
      top: 16px;
    }
    .maxAges {
      margin-left: -125px;
    }
    .ages {
      display: inline-block;
      .el-form-item__content {
        width: auto;
      }
      .el-input {
        display: inline-block;
        width: auto;
        .el-input__inner {
          width: 60px;
          padding: 0 5px;
          margin-right: 25px;
          text-align: center;
        }

        .el-input__inner::-webkit-outer-spin-button,
        .el-input__inner::-webkit-inner-spin-button {
          -webkit-appearance: none;
        }

        .el-input__inner[type="number"] {
          -moz-appearance: textfield;
        }
      }
    }
    .el-message-box__btns .el-button--default {
      color: #606266 !important;
    }
    .changeTips {
      position: absolute;
      left: 220px;
      // min-width: 300px;
      color: #48C5D7;
      font-size: 12px;
    }
    .changeTipsName {
      line-height: 15px;
    }
  }
  .systemNames {
    background-color: #fff;
    position: absolute;
    z-index: 999;
    width: 100%;
    border: 1px solid #c0c4cc;
    box-sizing: border-box;
    max-height: 185px;
    overflow: auto;
    li {
      padding: 0 15px;
    }
    li:hover {
      background-color: #f5f7fa;
    }
  }
}
</style>

