<template>
  <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
    <a-table
      :columns="columns"
      :dataSource="model.list"
      :pagination="false"
      :customRow="clickThenCheck"
      ref="table"
      bordered
      class="u-edit-table"
    >


      <template slot="yangpinKeyId" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.yangpinKeyId'" :rules="validatorRules.yangpinKeyId">
          <a-select :disabled="formDisabled" v-model="record.yangpinKeyId" allowClear :dropdownMatchSelectWidth="false" option-label-prop="label" @change="handleChange">
            <!-- 针对样品名称有相同的情况，做以下更改 -->
            <!-- <a-select-option v-for="d in yangpins" :key="d.sampleName"> -->
            <a-select-option v-for="d in yangpins" :key="d.key" :label="d.sampleName" :channel="d">
              <!-- <el-row>
                <el-col :span="12">{{ d.sampleName }}</el-col>
                <el-col :span="12">{{ d.sampleModelSpecification }}</el-col>
              </el-row> -->
              {{ d.sampleName +'——'+ d.sampleModelSpecification}}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </template>

      <template slot="sampleModelSpecification" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.sampleModelSpecification'">
          <a-input disabled v-model="record.sampleModelSpecification" />
        </a-form-model-item>
      </template>

      <template slot="testItems" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.testItems'" :rules="validatorRules.testItems">
          <a-input :disabled="formDisabled" v-model="record.testItems" />
        </a-form-model-item>
      </template>


      <template slot="standardRequirementQ" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.standardRequirementQ'" :rules="validatorRules.standardRequirementQ">
          <!-- <j-multi-select-tag :disabled="formDisabled" v-model="record.standardRequirement" :dropdownMatchSelectWidth="false" dictCode="itdm_weituo_yiju,name,name" /> -->
          <!-- 为了解决下拉框显示不全的问题，原来的没有对应参数配置 -->
          <a-select
            :disabled="formDisabled"
            v-model="record.standardRequirementQ"
            allowClear
            optionFilterProp="label"
            :dropdownMatchSelectWidth="false"
            @change="handleDescCate"
            mode="multiple"
          >
            <a-select-option v-for="yj in yijuLists" :key="yj.name" :label="yj.name">
              {{ yj.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
      </template>


      <template slot="judgementBasis" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.judgementBasis'" :rules="validatorRules.judgementBasis">
          <a-input :disabled="formDisabled" v-model="record.judgementBasis" />
        </a-form-model-item>
      </template>

      <template slot="yijufile" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.yijufile'" :rules="validatorRules.yijufile">
          <a-input :disabled="formDisabled" v-model="record.yijufile" />
        </a-form-model-item>
      </template>


      <template slot="beizhu" slot-scope="text, record,index">
        <a-form-model-item :prop="'list.'+index+'.beizhu'">
          <a-input :disabled="formDisabled" v-model="record.beizhu" />
        </a-form-model-item>
      </template>


      <template slot="operation" slot-scope="text, record">
          <span>
              <a-popconfirm :disabled="formDisabled" title="是否要删除此行？" @confirm="remove(record.key)">
                <a>删除</a>
              </a-popconfirm>
            </span>
      </template>


    </a-table>
    <a-button :disabled="formDisabled" style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed"
              icon="plus"
              @click="newMember">
      新增试验信息
    </a-button>


    <a-form-item class="buttonAll">
      <div class="all">
        <a-button style="margin-left: 8px" @click="prevStep" class="next">上一步</a-button>
        <a-button v-if="!disabled" type="primary" style="margin-left: 8px" @click="submitForm" class="next">提交
        </a-button>
      </div>


    </a-form-item>
  </a-form-model>


</template>

<script>

import {getAction} from '@/api/manage'
export default {
  name: 'step3',

  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      yangpins: {},
      count: 1,
      // 当前点击的是第几行
      clickIndex: -1,
      model: {
        list: []
      },
      description: '高级表单常见于一次性输入和提交大批量数据的场景。',
      loading: false,
      validatorRules: {
        yangpinKeyId: [
          { required: true, message: '请选择样品!' }
        ],
        testItems: [
          { required: true, message: '请输入检测标准!' }
        ]

      },
      yijuLists: [],
      // table
      columns: [
        {
          title: '样品名称',
          dataIndex: 'yangpinKeyId',
          key: 'yangpinKeyId',
          align: 'center',
          width: '12%',
          scopedSlots: { customRender: 'yangpinKeyId' }
        },
        {
          title: '规格型号',
          dataIndex: 'sampleModelSpecification',
          key: 'sampleModelSpecification',
          align: 'center',
          width: '12%',
          scopedSlots: { customRender: 'sampleModelSpecification' }
        },
        {
          title: '检测项目',
          dataIndex: 'testItems',
          key: 'testItems',
          align: 'center',
          width: '12%',
          scopedSlots: { customRender: 'testItems' }
        },
        {
          title: '检测依据',
          dataIndex: 'standardRequirementQ',
          key: 'standardRequirementQ',
          align: 'center',
          width: '15%',
          scopedSlots: { customRender: 'standardRequirementQ' }
        },
        {
          title: '判定依据',
          dataIndex: 'judgementBasis',
          key: 'judgementBasis',
          align: 'center',
          width: '15%',
          scopedSlots: { customRender: 'judgementBasis' }
        },
        {
          title: '检测依据文件',
          dataIndex: 'yijufile',
          key: 'yijufile',
          width: '12%',
          align: 'center',
          scopedSlots: { customRender: 'yijufile' }
        },

        {
          title: '备注',
          dataIndex: 'beizhu',
          key: 'beizhu',
          width: '7%',
          align: 'center',
          scopedSlots: { customRender: 'beizhu' }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          width: '5%',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: []
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
    yangpinInfos() {
      return this.$store.getters.yangpinInfos
    },
    shiyanInfos() {
      return this.$store.getters.shiyanInfos
    },
  },
  created() {
    this.getYijuLists()
    this.setInitData()
  },
  methods: {
    // 获取所有依据列表
    getYijuLists(){
      getAction('/weituoyiju/itdmWeituoYiju/getAllList').then((res) => {
        // console.log(res)
        this.yijuLists = res.result
      })
    },
    // 设置初始数据-主要是依据
    setInitData(){
      if (this.shiyanInfos.length > 0) {
        this.model.list = this.shiyanInfos.map((item, index) => {
          if(!item.standardRequirement){
            item.standardRequirementQ = []
          } else {
            item.standardRequirementQ = item.standardRequirement.split(',')
          }
          item.key = (index+1) + ''
          item.editable = true
          return item
        })
        this.count = this.shiyanInfos.length + 1
        // console.log(this.model.list)
      }else{
        this.newMember()
      }
      this.yangpins = this.yangpinInfos
    },
    // 获取当前点击行是哪儿一行
    clickThenCheck(record, index){
      return {
        on: {
          click: () => {
            // console.log(record, index)
            this.clickIndex = index
          }
        }
      }
    },
    // 选中样品改变时输入规格型号
    handleChange(value,optipn) {
      console.log(777,value,optipn);
      if(value){
        const a = optipn.data.attrs.channel
        // console.log(a)
        // 解决下拉选择后多个输入框显示-用$set,估计设置中间变量也能解决
        this.$set(this.model.list[this.clickIndex], 'sampleModelSpecification', a.sampleModelSpecification )
        this.$set(this.model.list[this.clickIndex], 'yangpinKeyId', a.sampleName )
      }
    },
    // 多选检测依据
    handleDescCate(value,optipn) {
      // console.log(value, optipn)
      // 这里用$set不好使
      // this.$set(this.model.list[this.clickIndex], 'standardRequirementQ', value)
      // 解决多选数据选择不回显--设置中间变量
      const newData = [...this.model.list];
      const target = newData[this.clickIndex];
      target.standardRequirementQ = value;
      this.model.list = newData;
    },
    // 创建一条新数据
    newMember() {
      this.model.list.push({
        key: this.count + '',
        yangpinKeyId: '',
        testItems: '',
        standardRequirementQ: [], // 前端用来下拉选择的，直接standardRequirement赋值standardRequirement会有问题
        standardRequirement: '',
        judgementBasis: '',
        yijufile: '',
        beizhu: '',
        editable: true,
        isNew: true
      })
      this.count++
    },
    // 删除
    remove(key) {
      const newData = this.model.list.filter(item => item.key !== key)
      this.model.list = newData
    },
    // 提交
    submitForm() {
      
      this.$store.commit('SET_SHIYANINFO', this.changeJcyj());
      this.$refs.form.validate(valid => {
        if (valid) {  
          this.$emit('submitForm')
        }
      })
    },
    // 上一步
    prevStep() {
      this.$store.commit('SET_SHIYANINFO', this.changeJcyj());
      this.$emit('prevStep')
    },
    // 修改数据格式
    changeJcyj(){
      var saveData = this.model.list.map(item => {
        item.standardRequirement = item.standardRequirementQ.join(',')
        return item
      })
      return saveData
    }
  }
}
</script>

<style lang="less" scoped>
.u-edit-table{
  margin-top: 12px;
  .ant-form-item{
    margin-bottom: 0;
  }
  /deep/.ant-table-tbody .ant-table-row td {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
  }
  .ant-input{
    // padding: 0;
    border: none;
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) .ant-input{
    background: #e6f7ff;
  }
  // .ant-input:hover{
  //   background: #e6f7ff;
  // }
  .ant-input:focus{
    box-shadow: none;
  }
  /deep/.ant-select-selection{
    border: none;
  }
  /deep/.ant-select-selection:focus{
    box-shadow: none;
  }
  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row):not(.ant-table-row-selected) .ant-select-selection{
    background: #e6f7ff;
  }
}
.card {
  margin-bottom: 24px;
}

.next {
  width: 35%;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 20px;
}

.buttonAll {
  width: 100%;
  align-items: center;
  justify-content: center;
}

.all {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>