<template>
  <a-table :columns="columns" :data-source="data" bordered>
    <template
      v-for="col in ['name', 'time', 'workOrNo']"
      :slot="col"
      slot-scope="text, record, index"
    >
      <div :key="col">
        <a-input
          placeholder="请输入名称"
          v-if="col == 'name'"
          style="margin: -5px 0"
          v-model="record.name"
          :value="text"
        />
        <a-date-picker
          placeholder="请选择时间"
          v-model="record.time"
          :format="YYYY - MM - DD"
          v-if="col == 'time'"
        />
        <a-select
          placeholder="请选择"
          v-if="col == 'workOrNo'"
          v-model="record.workOrNo"
          style="width: 120px"
        >
          <a-select-option value="Yes"> Yes </a-select-option>
          <a-select-option value="No"> No </a-select-option>
        </a-select>
        <!-- <template v-else>
          {{ text }}
        </template> -->
      </div>
    </template>
    <template slot="operation" slot-scope="text, record, index">
      <div class="editable-row-operations">
        <span>
          <a-button
            type="primary"
            shape="circle"
            icon="plus"
            @click="() => addItem(record.key)"
          />
          <a-button
            type="primary"
            shape="circle"
            icon="minus"
            @click="() => deleteItem(record.key)"
          />
        </span>
      </div>
    </template>
  </a-table>
</template>
<script>
const columns = [
  {
    title: 'name',
    dataIndex: 'name',
    width: '25%',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'time',
    dataIndex: 'time',
    width: '15%',
    scopedSlots: { customRender: 'time' },
  },
  {
    title: 'workOrNo',
    dataIndex: 'workOrNo',
    width: '40%',
    scopedSlots: { customRender: 'workOrNo' },
  },
  {
    title: 'operation',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
]

const data = []
data.push({
  key: data.length,
  name: '',
  time: '',
  workOrNo: 'No',
})
export default {
  data () {
    this.cacheData = data.map(item => ({ ...item }))
    return {
      key: 0,
      data,
      columns,
      editingKey: ''
    }
  },
  methods: {
    addItem (key) {
      console.log(key)
      this.data.splice(key + 1, 0, {
        key: '',
        name: '',
        time: '',
        workOrNo: 'No',
      })
      this.data.forEach((item, index) => {
        item.key = index
      })
      alert('所有的数据直接收集到data里面了，查看vue工具可以看收集的数据，给后台传参数的时候把这个数据处理一下，转换为后台需要的格式')
    },
    deleteItem (key) {
      console.log(key)
      if (this.data.length === 1) {
        return
      }
      this.data.splice(key, 1)
      this.data.forEach((item, index) => {
        item.key = index
      })
    }
  },
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}
</style>