<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
          :disabled="!!editData.id"
          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="!!editData.id || !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
        label="性别："
        prop="region7"
      >
        <span class="changeTips">改变性别后，标签明细将会恢复到默认状态</span>
        <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="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"
          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="1"></el-option>
          <el-option label="可以" value="0"></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';
/**
 * 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'],
  data() {
    var validatePass2 = (rule, value, callback) => {
        const editData = this.$props.editData;
        if(editData.id && value == editData.tagName){ //修改系统名称没变就不再校验
          callback();    
        }else{
          this.validateSystomName(value,callback)
        }
    };
    return {
      form: {
        region1: '',    //归属
        region2: '',     //填写单类型
        region3: '',      //系统名称
        region4: '',      //界面名称
        region5: '',      //选项之间的链接
        region6: '0',      //是否可以检索
        region7: '3',       //性别
        region8: '0',          //最小年龄
        region9: '200',         //最大年龄
        region10: '0',        //是否复制主标签
        region11: '0',       //是否复制当前模块
        tagPool:[],          //标签池数据
        order:[],            //排序方式
        tipLis:[],           //提示列表
      },
      labelTypesMaps: {       //// 归属和填写单类型限制
        '1':['2','3','4','11'],
        '3':['4','6'],
        '4':['2','3'],
        '5':['7'],
        '6':['9'],
        '7':['9'],
        '8':['9'],
        '9':['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' }
        ],
        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' }
        ],
      },
      tmpSex: '通用',
      tmpOwn: '',
      tmpType: '',
      Adscriptions: [],
      labelTypes: [],
      labelTypesList: [],
      tagTypes: [],        //标签池数据
      type:'',
      systom:null,      //标签系统名称存在与否
    }
  },
  computed: {
    newSex() {
      return this.form.region7;
    },
    newType() {
      return this.form.region1;
    },
    newSign() {
      return this.form.region2;
    },
  },
  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: {
    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;
    },
    newSign(nextVal, prevVal) {
      this.tmpType = 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()
      }
    },
  },
  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;
          // console.log('labelTypes', this.labelTypes)
          this.Adscriptions = this.AdscriptionsList.filter(item => Object.keys(this.labelTypesMaps).indexOf(item.val) > -1);
        }
      })
    },
    searchTagList() {
      let region1 = this.form.region1, region2 = this.form.region2;
      let param1 = !!region2 ? api.getGroupParams(region2): {};
      let param2 = {
        "type": region1,
        "sexType": this.form.region7,
      }
      let param = Object.assign(param1,param2)

      api.searchTagList(param).then((res) => {
        if (res.data.code === '0') {
          this.form.tagPool = res.data.data
        }
      })
    },
    validateSystomName(name,callback) {
      if(this.form.region3.trim() == ''){ return }
      let param = {
        "existName": this.form.region3,     
        "type": this.form.region1,
        "notTagType":[8],        //去掉文字标签查重
      }
      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)
      }
      this.changeSex(tmpData);
      // if(type == 3){
      //   this.form.region7 = this.tmpSex;
      //   this.$alert('改变性别后，标签明细将会恢复到默认状态?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonClass: 'cancelColor',
      //     type: 'warning'
      //   }).then(() => {
      //     this.form.region7 = tmpData
      //     this.changeSex(tmpData);
      //   }).catch(() => {
      //     // this.form.region7 = this.tmpSex;
      //   });
      // }else if(type == 2){
      //   this.form.region2 = this.tmpType
      //   this.$alert('改变类型后，标签明细将会恢复到默认状态?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonClass: 'cancelColor',
      //     type: 'warning'
      //   }).then(() => {
      //     this.form.region2 = tmpData;
      //     this.changeSex(tmpData);
      //   }).catch(() => {
      //     // this.form.region2 = this.tmpType;
      //   });
      // }else if(type == 1){
      //   this.form.region1 = this.tmpOwn;
      //   this.$alert('改变归属后，标签明细将会恢复到默认状态?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonClass: 'cancelColor',
      //     type: 'warning'
      //   }).then(() => {
      //     this.form.region1 = tmpData;
      //     this.changeSex(tmpData);
      //   }).catch(() => {
      //     // this.form.region1 = this.tmpOwn;
      //   });
      // }
    },
    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">
.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;
  }
  .cancelColor {
    color: #22ccc8 !important;
  }
  .changeTips {
    position: absolute;
    left: 220px;
    min-width: 300px;
    color: #22ccc8;
    font-size: 12px;
  }
}
}
</style>

