<template>
    <div class="PubTagGroupWrapper">
        <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="!!editData.id"
                        @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="!!editData.id  || !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
                    label="性别："
                    prop="region7"
            >
                <span class="changeTips">改变性别后，标签明细将会恢复到默认状态</span>
                <el-select
                        v-model="form.region7"
                        :disabled="!!editData.id || !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="region3"
            >
                <el-input
                        :disabled="!form.region1"
                        v-model="form.region3"
                        maxLength="30"
                        placeholder="请输入标签系统名称"
                        @change="sendData"
                ></el-input>
            </el-form-item>
            <el-form-item
                    label="标签界面名称："
                    prop="region4"
            >
                <el-input
                        :disabled="!form.region1"
                        v-model="form.region4"
                        maxLength="30"
                        placeholder="请输入标签界面名称"
                        @change="sendData"
                ></el-input>
            </el-form-item>
            <el-form-item
                    label="标签前后缀："
                    class="fix-inp"
                    prop="region12"
                    v-if="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
                    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="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>
            <el-form-item
                    label="正常值范围："
                    class="fix-inp"
                    prop="region13"
                    v-if="form.region1==5 && form.region2==6"
            >
                <el-col :span="7">
                <el-input v-model="form.minNormalVal"
                        :disabled="!form.region1"
                        maxLength="30"
                        @change="sendData"
                ></el-input></el-col>
                <el-col :span="8"> ~</el-col>
                <el-col :span="7">
                <el-input
                    v-model="form.maxNormalVal"
                    :disabled="!form.region1"
                    maxLength="30"
                    @change="sendData"
                ></el-input></el-col>
            </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:6）、化验单选（val:1）

  export default {
    props:['editData'],
    data() {
      var validatePass2 = (rule, value, callback) => {
        this.validateSystomName(value,callback)
      };
      return {
        form: {
          region1: '',    //归属
          region2: '',     //填写单类型
          region3: '',      //系统名称
          region4: '',      //界面名称
          region5: '',      //选项之间的链接
          region6: '1',      //是否可以检索
          region7: '3',       //性别
          region8: '0',          //最小年龄
          region9: '200',         //最大年龄
          minNormalVal: '',       //化验正常值最小值
          maxNormalVal: '',       //化验正常值最大值
          region12:'',
          region13:'',
          prefix:'',            //前缀
          suffix:'',            //后缀
          tipLis:[],           //提示列表
        },
        labelTypesMaps: {       //// 归属和填写单类型限制
          '1':['1','2','5','6','7','99'],
          '3':['1','2','5','6','7'],
          '4':['1','2','6','7'],
          '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' }
          ],
          region6: [
            { required: true, message: '请输入能否当项目检索', trigger: 'change' }
          ],
          region7: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ],
          region8: [
            { required: true, message: '请输入最小年龄', trigger: 'change' }
          ],
          region9: [
            { required: true, message: '请输入最大年龄', trigger: 'change' }
          ]
        },
        tmpSex: '通用',
        tmpOwn: '',
        tmpType: '',
        Adscriptions: [],
        AdscriptionsList:[],
        labelTypes: [],
        labelTypesList: [],
        type:'',
        systom:null,      //标签系统名称存在与否
      }
    },
    computed: {
      newSex() {
        return this.form.region7;
      },
      newType() {
        return this.form.region1;
      },
      newSign() {
        return this.form.region2;
      },
    },
    mounted() {
      
      this.getDropList();
      //编辑时赋值
      const editData = this.$props.editData;
      if(editData.id){
        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;
      }
    },
    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];
            this.labelTypes = this.labelTypesList;
            this.Adscriptions = this.AdscriptionsList.filter(item => Object.keys(this.labelTypesMaps).indexOf(item.val) > -1)
          }
        })
      },
      validateSystomName(name,callback) {
        if(this.form.region3.trim() == ''){ return }
        let param = {
          "existName": this.form.region3,
          "type": this.form.region1,
          "notIds":[this.$props.editData.id]
        };
        api.validateSystomName(param).then((res) => {
          if (res.data.code === '0') {
            if(res.data.data && res.data.data.length != 0){
              callback(new Error('该系统名称已存在'));
            }else{
              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)
          
        }
        //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;
          }
        });
      },
      warning(msg, type) {
        this.$message({
          showClose: true,
          message: msg,
          type: type || 'warning'
        })
      },
    }
  }
</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 {
        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;
    }
    .cancelColor {
        color: #22ccc8 !important;
    }
    .changeTips {
        position: absolute;
        left: 220px;
        min-width: 300px;
        color: #ea7777;
        font-size: 12px;
    }
    }
</style>

