<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
                        v-model="form.region1"
                        placeholder="请选择归属"
                        :disabled="isEditOrCopy"
                        @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
                        v-model="form.region2"
                        placeholder="请选择填写单类型"
                        :disabled="isEditOrCopy&&(form.region2!= '1'&&form.region2!= '2' ) || !form.region1"
                        @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 == 4 || form.region1 == 5"
              :label="(form.region1 == 4)?'当为查体推送项时，需要检索标准术语':(form.region1 == 5)?'是否当化验推送项':''"
              prop="region12"
            >
              <span
                v-if="form.region1 == 4"
                class="changeTips changeTipsName"
              >当为查体推送项时，标签系统名称需要检索医学标准术语内容并与之相对应，才可保证系统正常使用，如果未对应上可能造成系统显示异常！如果在搜索中没有可以先在医学标准术语中建立相关信息！</span>
              <span
                v-if="form.region1 == 5"
                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-input
                        :disabled="!form.region1"
                        v-model="form.region3"
                        maxLength="30"
                        placeholder="请输入标签系统名称"
                        @change="sendData"
                ></el-input> -->
                 <span
                  v-if="form.region1 == 4"
                  class="changeTips changeTipsName"
                >标签系统名称需要与医学标准术语内容相对应，如果没有可以先在医学标准术语中建立相关信息！未建立相关信息可能会影响系统使用！当为查体推送项时标签系统名称应当检索医学术语库内容；</span>
                <span
                  v-if="form.region1 == 5"
                  class="changeTips changeTipsName"
                >标签系统名称为该标签在本系统的中识别表示，不可重复。该系统名称不需要检索标准术语库内容；</span>
            </el-form-item>
            <el-form-item
                    label="标签界面名称："
                    prop="region4"
            >
                <el-input
                        :disabled="!form.region1"
                        v-model="form.region4"
                        maxLength="30"
                        placeholder="请输入标签界面名称"
                        @focus="focusInterfaceName"
                        @change="sendData"
                ></el-input>
                <ul
                  class="systemNames"
                  v-if="interfaceNameShow"
                >
                  <li
                    v-for="item in interfacemNameLis"
                    class="ellipsis"
                    :key="item.conceptId"
                    @click="pushInterfaceName(item.name)"
                  >{{item.name}}</li>
                </ul>
                <span
                  v-if="form.region1 == 4"
                  class="changeTips changeTipsName"
                >为在界面上检索不受影响，标签界面名称应与标签系统名称和医学标准术语内容相对应， 未建立相关信息可能会影响系统使用！</span>
                <span
                  v-if="form.region1 == 5"
                  class="changeTips changeTipsName"
                >标签界面名称需要与医学标准术语内容相对应，如果没有可以先在医学标准术语中建立相关信息！未建立相关信息可能会影响系统使用！当为化验推送项时标签界面名称应当检索医学术语库内容；</span>
                <!-- 诱因记录暂时不做 -->
                <!-- <span
                  v-if="form.region1 == '1'&&form.region2 == '1'"
                  class="changeTips changeTipsName checkSpecFlag"
                >
                   <el-checkbox v-model="form.specFlag"  label="诱因记录" true-label="2" false-label="0"  @change="sendData"></el-checkbox>
                </span> -->
                <span
                  v-if="form.region1=='1'&&form.region2=='5'"
                  class="changeTips changeTipsName checkSpecFlag"
                >
                   <el-checkbox v-model="form.specFlag" label="是否高亮" true-label="1" false-label="0"  @change="sendData"></el-checkbox>
                </span>
            </el-form-item>
            <el-form-item
                    label="标签前后缀："
                    class="fix-inp"
                    prop="region12"
                    v-if="form.region2==5 ||form.region2==6 || form.region2==7 "
            >
                <el-col :span="10">
                <el-input v-model="form.prefix"
                        :disabled="!form.region1 || form.region2 == '99'"
                        maxLength="30"
                        placeholder="前缀"
                        @change="sendData"
                ></el-input></el-col>
                <el-col :span="4">标签</el-col>
                <el-col :span="10">
                <el-input
                    v-model="form.suffix"
                    :disabled="!form.region1 || form.region2 == '99'"
                    maxLength="30"
                    placeholder="后缀"
                    @change="sendData"
                ></el-input></el-col>
            </el-form-item>
            <el-form-item
                    v-if="form.region1 != 5"
                    label="选择项之间链接："
                    prop="region5"
            >
                <el-input
                        v-model="form.region5"
                        :disabled="!form.region1 || form.region2 == '99'"
                        maxLength="30"
                        placeholder="请输入选择项之间链接"
                        @change="sendData"
                ></el-input>
            </el-form-item>
            <!-- <el-form-item 
                    label="能否当项目检索："
                    prop="region6"
            >
                <el-select
                        :disabled="!form.region1 || form.region2 == '99'"
                        v-model="form.region6"
                        @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="region7"
            >
                <!-- <span class="changeTips">改变性别后，标签明细将会恢复到默认状态</span> -->
                <el-select
                        v-model="form.region7"
                        :disabled="!form.region1 || form.region2 == '99'"
                        @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="region8"
                    class="ages"
            >
                <el-input
                        v-model.number="form.region8"
                        :disabled="!form.region1 || form.region2 == '99'"
                         type="number"
                        ref="valage1"
                        @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 == '99'"
                type="number"
                ref="valage2"
                @input="sendData"
              ></el-input>
            </el-form-item>

          <div>
            <el-form-item
                    label="正常值范围："
                    prop="minNormalVal"
                    class="ages"
                    v-if="form.region1==5 && form.region2==6 || form.region2==7"
            >
                <el-input
                        v-model.number="form.minNormalVal"
                        :disabled="!form.region1"
                         type="number"
                         maxLength="4"
                        ref="valage1"
                        @input="sendData"
                ></el-input>
            </el-form-item>
            <span
              v-if="form.region1==5 && form.region2==6 || form.region2==7"
            > ~ 
            </span>
            <el-form-item
              prop="maxNormalVal"
              class="ages maxAges"
              v-if="form.region1==5 && form.region2==6 || form.region2==7"
            > 
              <el-input
                v-model.number="form.maxNormalVal"
               :disabled="!form.region1"
                type="number"
                ref="valage2"
                maxLength="4"
                @input="sendData"
              ></el-input>
            </el-form-item>
          </div>
           <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:1）：输入框（val:6）、数字键盘（val:7）、时间控件（val:5）、单选（val:1）、多选（val:2）、联合推送（val:99）

// 其他史（val:3）：单选（val:1）、多选（val:2）、输入框（val:6）、数字键盘（val:7）、时间控件（val:5）、

// 查体（val:4）：输入框（val:6）、数字键盘（val:7）、单选（val:1）、多选（val:2）、

// 化验（val:5）：化验数字键盘（val:7）、化验单选（val:1）

  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',         //最大年龄
          minNormalVal: '',       //化验正常值最小值
          maxNormalVal: '',       //化验正常值最大值
          region12: '0',        //是否为查体推送   
          region13:'',
          specFlag :'0',        //标记状态（0：没有标记，1：主诉高亮，2：诱因记录）
          prefix:'',            //前缀
          suffix:'',            //后缀
          tipLis:[],           //提示列表
        },
        labelTypesMaps: {       //// 归属和填写单类型限制
          '1':['1','2','5','6','7','11'], //联合推送暂时不用
          '3':['1','2','5','6','7', '11',],
          '4':['1','2','6','7', '11',],
          '5':['1','6']
        },
        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' }
          ],
          region12: [
            { required: true, message: '请选择是否为查体', trigger: 'change' }
          ],
          // minNormalVal: [
          //   { required: true, message: '请输入正常值范围', trigger: 'change' }
          // ],
          // maxNormalVal: [
          //   { required: true, message: '请输入正常值范围', trigger: 'change' }
          // ]
          
        },
        tmpSex: '通用',
        tmpOwn: '',
        tmpType: '',
        Adscriptions: [],
        AdscriptionsList:[],
        labelTypes: [],
        labelTypesList: [],
        isNeedSearchSys: false, //是否需要查询（系统名称）
        isNeedSearchInterface: false, //是否需要查询（界面名称）
        systemNameShow: false,//系统名称显示
        systemNameLis: [], //系统名称列表
        interfacemNameLis: [],  //界面名称列表
        interfaceNameShow: false, //界面名称显示
        type:'',
        systom:null,      //标签系统名称存在与否
      }
    },
    computed: {
      newSex() {
        return this.form.region7;
      },
      newType() {
        return this.form.region1;
      },
      newSign() {
        return this.form.region2;
      },
      newName() {
        return this.form.region3;
      },
      newInterfaceName() {
        return this.form.region4;
      }
    },
    mounted() {
      
      this.getDropList();
      //编辑时赋值
      const editData = this.$props.editData;
       const isEditOrCopy = this.$props.isEditOrCopy;
      if(isEditOrCopy){
        const trans = utils.transformKeys(editData);
        this.form = Object.assign({},this.form,trans);
      }

      this.$emit('submitForm', 'groups', false);
      
      this.$emit('changeVal', this.form, false);

    },
    watch: {
      newSex(nextVal, prevVal) {
        this.tmpSex = prevVal;
      },
      newType(nextVal, prevVal) {
        const editData = this.$props.editData;
        if(!this.isEditOrCopy) {
          this.initForm()
        }
      },
      newSign(nextVal, prevVal) {
        const editData = this.$props.editData;
        if(!this.isEditOrCopy) {
          this.initForm()
        }
      },
      newName(nextVal, prevVal) {
        if (this.isNeedSearchSys && nextVal != prevVal && (this.form.region12 == 0)) {
          this.focusSystemName()
        }
      },
      newInterfaceName(nextVal, prevVal) {
        if (this.isNeedSearchInterface && nextVal != prevVal && (this.form.region12 == 0)) {
          this.focusInterfaceName()
        }
      }
    },
    methods: {
      getDropList() {
        return api.getDropList().then((res) => {
          if (res.data.code === '0') {
            this.AdscriptionsList = res.data.data[1]
            this.labelTypesList = res.data.data[6];
            this.form.tipLis = res.data.data[6];
            if(this.isEditOrCopy && (this.form.region2=='1'||this.form.region2=='2')) {
              this.labelTypes = this.labelTypesList.filter(item => this.labelTypesMaps[this.form.region1].indexOf(item.val) > -1).filter(item => (item.val=='1'||item.val=='2'));
            } else {
              this.labelTypes = this.labelTypesList;
            }
            this.Adscriptions = this.AdscriptionsList.filter(item => Object.keys(this.labelTypesMaps).indexOf(item.val) > -1)
          }
        })
      },
      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();
          }
        }
      },
      sendData() {
        this.$emit('changeVal', this.form, false)
      },
      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)
          this.initForm()
        }
        if(type === 2) {
          this.initForm()
          this.$emit('changeType', type, false)
        }
        //console.log(tmpData)
        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;
          }
        });
      },
      focusSystemName() {
        if(this.form.region1 == 4) {
          this.isNeedSearchSys = true
          if (this.form.region3.trim() == '') {
            this.systemNameShow = false
            this.systemNameLis = []
            return
          }
        
        if (this.form.region12 == 0) {
          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
              }
            }
          })
        }
        } 
      },
      focusInterfaceName() {
        if(this.form.region1 == 5) {
          this.isNeedSearchInterface = true
          if (this.form.region4.trim() == '') {
            this.interfaceNameShow = false
            this.interfacemNameLis = []
            return
          }
          if (this.form.region12 == 0) {
            let params = {
              "libType": [13],
              "name": this.form.region4,
            }
            api.indexByLexiconStandWord(params).then((res) => {
              if (res.data.code === '0') {
                this.interfacemNameLis = res.data.data
                if (res.data.data.length > 0) {
                  this.interfaceNameShow = true
                } else {
                  this.interfaceNameShow = false
                }
              }
            })
          }

        }
        
      },
      pushSystemName(val) {
        this.form.region3 = val
        this.systemNameShow = false
        this.isNeedSearchSys = false
      },
      pushInterfaceName(val) {
        this.form.region4 = val
        this.interfaceNameShow = false
        this.isNeedSearchInterface = 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
          }
        }
      },
      warning(msg, type) {
        this.$message({
          showClose: true,
          message: msg,
          type: type || 'warning'
        })
      },
      initForm() {
        this.form.prefix = ''
        this.form.suffix = ''
        this.form.minNormalVal = ''
        this.form.maxNormalVal = ''
        this.form.region5 = ''
        this.form.region12 = '0'
        this.form.specFlag = '0'
        this.systemNameShow = false
        this.interfaceNameShow = false
      },
    }
  }
</script>
<style lang="less">
    .normalVal .el-input{
        width: auto;
        display: inline-block;
        .el-input__inner {
            width: 40px;
            padding: 0 5px;
        }
    }
    .PubTagGroupWrapper .fix-inp .el-col .el-input__inner{
        width: 100%;
        display: inline-block;
    }
    .PubTagGroupWrapper .fix-inp .el-col-4{
        text-align: center;
    }
    .PubTagGroupWrapper .fix-inp .el-col-8{
        text-align: center;
    }
    
    .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 {
        width: 200px;
        top: 28px;
    }
    .el-form-item__label {
        line-height: 30px;
        text-align: left;
    }
    .el-input__icon {
        line-height: 30px;
    }
    .ages .el-input {
        display: inline-block;
        width: auto;
    .el-input__inner {
        width: 40px;
        padding: 0 5px;
    }

    .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 {
        width: 200%;
    }
    .checkSpecFlag {
      top: 5px;
    }
    }
</style>

