<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 ['sampleName', 'sampleModelSpecification', 'sampleQuantities','sampleManufacturer']"
        :slot="col" slot-scope="text, record">
        <a-input
          :disabled="formDisabled"
          :key="col"
          style="margin: -5px 0"
          :value="text"
          :placeholder="columns[i].title"
          @change="e => handleChange(e.target.value, record.key, col)"
        />
      </template>

      <template slot="operation" slot-scope="text, record">
          <span>
              <a-popconfirm title="是否要删除此行？" :disabled="formDisabled"  @confirm="remove(record.key)">
                <a>删除</a>
              </a-popconfirm>
            </span>
      </template>
    </a-table>
    <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" :disabled="formDisabled" icon="plus" @click="newMember">
      新增样品
    </a-button>


    <a-form-item class="buttonAll">
      <div class="all">
        <a-button @click="prevStep" class="next">上一步</a-button>
        <a-button type="primary" @click="nextStep" class="next">下一步</a-button>
      </div>

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


</template>

<script>


export default {
  name: 'step2',
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false
    }
  },
  data() {
    return {
      count: 1,
      validatorRules: {
        sampleName: [
          { required: true, message: '请输入样品名称!' }
        ],
        sampleModelSpecification: [
          { required: true, message: '请输入样品规格/型号!' }
        ],
        sampleQuantities: [
          { required: true, message: '请输入样品数量!' }
        ],
        sampleManufacturer: [
          { required: true, message: '请输入生产厂家!' }
        ]
      },
      model: {},
      description: '高级表单常见于一次性输入和提交大批量数据的场景。',
      loading: false,

      // table
      columns: [
        {
          title: '样品名称',
          dataIndex: 'sampleName',
          key: 'sampleName',
          align:"center",
          scopedSlots: { customRender: 'sampleName' }
        },
        {
          title: '样品规格/型号',
          dataIndex: 'sampleModelSpecification',
          key: 'sampleModelSpecification',
          align:"center",
          scopedSlots: { customRender: 'sampleModelSpecification' }
        },
        {
          title: '样品数量',
          dataIndex: 'sampleQuantities',
          key: 'sampleQuantities',
          align:"center",
          scopedSlots: { customRender: 'sampleQuantities' }
        },
        {
          title: '生产厂家',
          dataIndex: 'sampleManufacturer',
          key: 'sampleManufacturer',
          align:"center",
          scopedSlots: { customRender: 'sampleManufacturer' }
        },
        {
          title: '操作',
          key: 'action',
          align:"center",
          scopedSlots: { customRender: 'operation' }
        }
      ],
      data: []
    }
  },
  computed: {
    formDisabled(){
      return this.disabled
    },
  },
  created() {
    const data = JSON.parse(sessionStorage.getItem('yangpin'))
    if (data != null) {
        for (let  xx of data) {
          this.data.push({
            key: xx.key,
            sampleName: xx.sampleName,
            sampleModelSpecification: xx.sampleModelSpecification,
            sampleQuantities: xx.sampleQuantities,
            sampleManufacturer: xx.sampleManufacturer,
            editable: true,
            isNew: true
          })
        }


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

  },
  methods: {

    newMember() {
      this.data.push({
        key: this.count + '',
        sampleQuantities: 0,
        sampleModelSpecification: '',
        sampleName: '',
        sampleManufacturer: sessionStorage.getItem('data') ? JSON.parse(sessionStorage.getItem('data')).weituoClient : '',
        editable: true,
        isNew: true
      })
      this.count++
      sessionStorage.setItem('count', 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
      }
    },
    nextStep() {
      sessionStorage.setItem('yangpin', JSON.stringify(this.data))


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

    },
    prevStep() {
      sessionStorage.setItem('yangpin', 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>