<template>
  <!--<el-form ref="form" class="add-new-form" label-width="130px" :model="data">-->
  <div class="add-new-form">
    <el-form-item
      label="诊断依据类型："
      :prop="'klDiagnoseTypeVO.'+inx+'.conditionType'"
      class="diag-type"
    >
      <el-select v-model="data.conditionType" placeholder="请选择" size="small">
        <el-option
          v-for="item in typeList"
          :key="item.ruleType"
          :label="item.name"
          :value="item.ruleType"
        ></el-option>
      </el-select>
      <span class="tip-text">注：选择诊断依据类型后才能展示基础依据类型~</span>
    </el-form-item>
    <DiagBaseGroup
      v-for="(group,i) in data.groupVO"
      ref="groups"
      :data="group"
      :diagTypeList="baseTypeList"
      :inx="i"
      :parInx="inx"
      :isLast="isLast&&data.groupVO.length===1"
      @setRules="setRules"
      @addGroup="addGroup"
      @delGroup="delGroup"
    ></DiagBaseGroup>
    <div class="group-oper">
      <el-button size="small" @click="addDiag">+新增依据</el-button>
      <el-button size="small" class="copy-btn" @click="copyDiag">
        <img src="../../images/copy.png" alt />复制依据
      </el-button>
      <el-button :disabled="isLast" size="small" type="danger" plain @click="delDiag">-删除依据</el-button>
    </div>
  </div>
  <!-- </el-form>-->
</template>
      <script>
import DiagBaseGroup from './DiagBaseGroup';
import util from '../../api/utils.js';
export default {
  name: 'DiagBaseType',
  props: ['data', 'isLast', 'inx'],
  data() {
    return {
      form: {},
      conditionType: '',
      typeObj: {},
      typeList: []
      /*rules:{
                          conditionType:[]
                      }*/
    };
  },
  computed: {
    baseTypeList: function() {
      return this.typeObj[this.data.conditionType];
    }
  },
  created() {
    console.log(this.data)
    this.getTypeList();
  },
  methods: {
    setRules() {
      this.$emit('setRules');
    },
    getTypeList() {
      const typeListData = JSON.parse(localStorage.getItem('zskDiagList'));
      this.typeObj = util.formatObj(typeListData, 'ruleType');
      this.typeList = typeListData;
    },
    addDiag() {
      this.$emit('addDiag', this.inx);
    },
    delDiag() {
      this.$emit('delDiag', this.inx);
    },
    copyDiag() {
      this.$emit('copyDiag', this.inx);
    },
    addGroup(i) {
      const temp = {
        baseGroup: '',
        conditionGroup: '',
        fitNo: '',
        klDiagnoseDetail: [
          {
            basConceptId: '',
            basDescription: '',
            basLename: '',
            basLibName: '',
            basLibType: null,
            basType: '',
            eqOperator: '',
            eqUnit: '',
            eqValue: '',
            maxOperator: '',
            maxUnit: '',
            maxVal: '',
            minOperator: '',
            minUnit: '',
            minVal: ''
          }
        ]
      };
      this.data.groupVO.splice(i + 1, 0, temp);
      this.$emit('setRules');
    },
    delGroup(i) {
      if (i === 0 && this.data.groupVO.length === 1) {
        this.$emit('delDiag', this.inx);
        return;
      }
      this.data.groupVO.splice(i, 1);
    }
  },
  components: {
    DiagBaseGroup
  }
};
</script>
      <style lang="less" scoped>
.add-new-form {
  background: #e3eaf4;
  padding: 20px 0;
}
/deep/ .diag-type .el-form-item__error {
  top: 35px !important;
  left: 0 !important;
  background: none !important;
}
.diag-type {
  background: #fff;
  margin: 0 20px;
  padding: 8px 0 15px;
}
.group-oper {
  margin: 20px 20px 0 20px;
  background: #fff;
  padding: 8px 0 8px 205px;
  /*text-align: center;*/
  .el-button {
    margin-right: 60px;
  }
  .copy-btn {
    border-color: #666;
    color: #666;
    img {
      margin-right: 5px;
    }
  }
}
</style>