<template>
    <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="false"
      >


        <template v-for="(col, i) in ['yangpinKeyId', 'testItems', 'standardRequirement','judgementBasis','beizhu']"
                  :slot="col" slot-scope="text, record">


          <a-select
            :disabled="formDisabled"
            :key="col"
            v-if="record.editable && col==='yangpinKeyId'"
            style="margin: -5px 0"
            :value="text"
            :placeholder="columns[i].title"

            @change="e => handleChange(e, record.key, col)">

            <a-select-option v-for="d in yangpins" :key="d.key">
              {{ d.sampleName }}
            </a-select-option>
          </a-select>


          <a-input
            :disabled="formDisabled"
            :key="col"
            v-if="record.editable && col==='testItems'"
            style="margin: -5px 0"
            :value="text"
            :placeholder="columns[i].title"
            @change="e => handleChange(e.target.value, record.key, col)"></a-input>


          <j-search-select-tag
            :disabled="formDisabled"
            :key="col"
            v-if="record.editable && col==='standardRequirement'"
            style="margin: -5px 0"
            :value="text"
            :placeholder="columns[i].title" @change="e=>handleChange(e, record.key, col)"
            dict="itdm_weituo_yiju,name,name" />

          <a-input
            :disabled="formDisabled"
            :key="col"
            v-if="record.editable && col==='judgementBasis'"
            style="margin: -5px 0"
            :value="text"
            :placeholder="columns[i].title"
            @change="e => handleChange(e.target.value, record.key, col)"></a-input>


          <a-input
            :disabled="formDisabled"
            :key="col"
            v-if="record.editable && col==='beizhu'"
            style="margin: -5px 0"
            :value="text"
            :placeholder="columns[i].title"
            @change="e => handleChange(e.target.value, record.key, col)"></a-input>


        </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>


export default {
  name: 'step3',

  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      yangpins: {},
      count: 1,
      model: {},
      description: '高级表单常见于一次性输入和提交大批量数据的场景。',
      loading: false,
      validatorRules: {},
      // table
      columns: [
        {
          title: '样品名称',
          dataIndex: 'yangpinKeyId',
          key: 'yangpinKeyId',
          align:"center",
          width: '15%',
          scopedSlots: { customRender: 'yangpinKeyId' }
        },
        {
          title: '检测项目',
          dataIndex: 'testItems',
          key: 'testItems',
          align:"center",
          width: '15%',
          scopedSlots: { customRender: 'testItems' }
        },
        {
          title: '检测依据',
          dataIndex: 'standardRequirement',
          key: 'standardRequirement',
          align:"center",
          width: '20%',
          scopedSlots: { customRender: 'standardRequirement' }
        },
        {
          title: '判定依据',
          dataIndex: 'judgementBasis',
          key: 'judgementBasis',
          align:"center",
          width: '25%',
          scopedSlots: { customRender: 'judgementBasis' }
        },
        {
          title: '备注',
          dataIndex: 'beizhu',
          key: 'beizhu',
          width: '15%',
          align:"center",
          scopedSlots: { customRender: 'beizhu' }
        },
        {
          title: '操作',
          key: 'action',
          align:"center",
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: []
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    }
  },
  created() {
    const data = JSON.parse(sessionStorage.getItem('yangpinkz'))

    if (data != null) {
      for (let xx of data) {
        this.data.push({
          key: xx.key,
          yangpinKeyId: xx.yangpinKeyId,
          testItems: xx.testItems,
          standardRequirement: xx.standardRequirement,
          judgementBasis: xx.judgementBasis,
          beizhu: xx.beizhu,
          editable: true,
          isNew: true
        })
      }

    }

    const yangpins = JSON.parse(sessionStorage.getItem('yangpin'))

    if (yangpins != null) {
      this.yangpins = yangpins
    }

    this.count = sessionStorage.getItem('count1') != null ? Number(sessionStorage.getItem('count1')) : 1

  },
  methods: {

    newMember() {
      this.data.push({
        key: this.count + '',
        yangpinKeyId: '',
        testItems: '',
        standardRequirement: '',
        judgementBasis: '',
        beizhu: '',
        editable: true,
        isNew: true
      })

      this.count++
      sessionStorage.setItem('count1', this.count)

    },
    remove(key) {
      const newData = this.data.filter(item => item.key !== key)
      this.data = newData
    },
    saveRow(key) {
      let target = this.data.filter(item => item.key === key)[0]
      target.editable = false
      target.isNew = false

    },

    handleChange(value, key, column) {
      const newData = [...this.data]
      const target = newData.filter(item => key === item.key)[0]
      if (target) {
        target[column] = value
        this.data = newData
      }
    },
    submitForm() {
      sessionStorage.setItem('yangpinkz', JSON.stringify(this.data))

      // this.$refs.form.validate(valid => {
      //   if (valid) {
      this.$emit('submitForm')
      //   }
      // })

    },
    prevStep() {
      sessionStorage.setItem('yangpinkz', JSON.stringify(this.data))

      this.$emit('prevStep')
    }

  }
}
</script>

<style lang="less" scoped>
  .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>