<template>
  <div>
    <div class="from-btn">
      <a-button @click="handleAdd">新增</a-button>
      <a-button @click="delectDataSource(dataSource)">删除</a-button>
    </div>
    <a-table
      bordered
      :data-source="dataSource"
      :columns="columns"
      @change="onPageChange">
      <template slot="distributionField" slot-scope="text,record">
        <a-select :default-value="text" placeholder="请选择属性" @change="change">
          <a-select-option v-for="(item, index) in modelList" :key="index" :value="item" @click="selects(0,item,record)">
            {{ item }}
          </a-select-option>
        </a-select>
      </template>
      <template slot="mappingField" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'mappingField', $event)" />
      </template>

      <template slot="key" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'key', $event)" />
      </template>
      <template slot="value" slot-scope="text, record">
        <editable-cell :text="text" @change="onCellChange(record.key, 'value', $event)" />
      </template>
    </a-table>
  </div>
</template>
<script>
import EditableCell from './EditableCell'

export default {
  components: {
    EditableCell
  },

  props: {
    columns: {
      type: Array,
      default: () => []
    },
    dataSource: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      required: true
    },
    modelList: {
      type: Array,
      default: () => []
    },
    logotype: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      count: 10
    }
  },

  methods: {
    change(e) {
      this.$emit('changeDataSource', e)
    },
    onCellChange(key, dataIndex, value) {
      this.$emit('changeDataSource', key, dataIndex, value)
    },

    handleAdd() {
      // this.count = this.dataSource.length
      const { count } = this
      const i = this.dataSource.length
      var newData = {}
      if (this.logotype === 0) {
        newData = {
          key: i,
          distributionField: '',
          mappingField: '',
          status: '1'
        }
      } else if (this.logotype === 1) {
        newData = {
          key: '',
          value: ''
          // status: '1'
        }
      }
      this.dataSource.push(newData)
      this.count = count + 1
      this.$emit('addDataSource')
    },
    onPageChange(e) {
      console.log(`e`, e, this.dataSource)

      // this.$emit('changeParams', 'pageNum', e)
    },

    delectDataSource(dataSource) {
      this.$emit('delectDataSource', dataSource)
    },

    // 不变:0;新增:1;修改:2;删除:3
    selects(type, item, index) {
      if (type === 0) {
        if (index.distributionField !== '') {
          index.status = '2'
        }
        index.distributionField = item
      }
      if (type === 1) {
        if (index.mappingField !== '') {
          index.status = '1'
        }
        index.mappingField = item
      }
      // console.log(`item`, item)
      // console.log(`index`, index)
    }

  }
}
</script>
<style lang='less'>
.from-btn {
  margin: 0 0 10px 0;
  & > button {
    margin-right: 10px;
  }
}
</style>

<style>
.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}
</style>
