<template>
  <div class="PubTagGroupWrapper">
    <el-form
      class="groups"
      :rules="rules"
      ref="groups"
      :model="form"
      label-width="150px"
    >
      <el-form-item
        label="选择归属："
        prop="region1"
      >
        <el-select
          :disabled="true"
          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"
      >
        <el-select
          :disabled="true"
          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
        label="性别："
        prop="region7"
      >
        <el-select
          v-model="form.region7"
          :disabled="!!editData.id || !form.region1 || form.region2 == 11"
          @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
          v-model="form.region3"
          :disabled="!form.region1"
          maxLength="30"
          placeholder="请输入标签系统名称"
          @change="sendData"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="标签界面名称："
        prop="region4"
      >
        <el-input
          v-model="form.region4"
          :disabled="!form.region1"
          maxLength="30"
          placeholder="请输入标签界面名称"
          @change="sendData"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="诊断归属："
        prop="region2"
      >
        <el-select
          :disabled="!!editData.id"
          v-model="form.region13"
          placeholder="请选择诊断归属"
          @change="(e)=>readyChangeSelect(e,2)"
        >
          <el-option
            v-for="item in DiagnosislabelTypes"
            :label="item.name"
            :value="item.val"
            :key="item.id"
          ></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
        v-if="form.region1 == 1 && form.region2 ==4"
        label="是否为症状"
        prop="region12"
      >
        <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="region8"
        class="ages"
      >
        <el-input
          v-model.number="form.region8"
          :disabled="!form.region1 || form.region2 == 11"
          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"
          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>
  </div>
</template>
<script>
import api from '@api/icss.js';
import utils from '@api/utils.js';

export default {
  props:['editData'],
  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: '7',    //归属
        region2: '9',     //填写单类型
        region3: '',      //系统名称
        region4: '',      //界面名称
        region5: '',      //选项之间的链接
        // region6: '0',      //是否可以检索
        region7: '3',       //性别
        region8: '0',          //最小年龄
        region9: '200',         //最大年龄
        region10: '1',        //是否复制主标签
        region11: '0',       //是否复制当前模块
        region12:'1',        //是否为症状
        region13:'0',        //诊断归属
        tagPool:[],          //标签池数据
        order:[],            //排序方式
        tipLis:[],           //提示列表
      },
      labelTypesMaps: {       //// 归属和填写单类型限制
        '7':['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' }
        ],
        region13: [
          { required: true, message: '请选择诊断归属', trigger: 'change' }
        ],
      },
      tmpSex: '通用',
      tmpOwn: '',
      tmpType: '',
      Adscriptions: [
        {
          id:6,
          name:"诊断",
          remark:"标签归属",
          val:"7",
        }
      ],
      labelTypes: [],
      DiagnosislabelTypes: [],
      labelTypesList: [],
      tagTypes: [],        //标签池数据
      type:'',
      systom:null,      //标签系统名称存在与否
    }
  },
  computed: {
    newType() {
      return this.form.region1;
    },
  },
  mounted() {
    const editData = this.$props.editData;
    if(editData.id){
      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: {
    newType(nextVal, prevVal) {
      this.tmpOwn = prevVal;
    },
  },
  methods: {
    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;
          this.DiagnosislabelTypes = res.data.data[7];
          // 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();
        }
      }
    },
    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)
      }
      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 = '1'
      this.form.region10 = '1'
      this.form.region11 = '0'
    }
  }
}
</script>
<style lang="less">
.PubTagGroupWrapper {
  .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;
  }
  .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;
  }
}
}
</style>

