/**
* @Description:
* @author cxg
* @date 2021/08/14
*/
<template>
  <div class="relate-table-com">
    <dee-table
      ref="deeTable"
      style="height:100%"
      :data="cacheTableData"
      :edit-table="!readOnly"
      :more-check="!readOnly "
      :columns="tableColumns"
      @selection-change="selectionChange"
      @cell-data-change="cellDataChange"
    >
      <dee-tools v-if="!readOnly" slot="header" :tools="tools" />
    </dee-table>
  </div>
</template>

<script>
import { getLayouts } from '@/api/config'
export default {
  components: {},
  props: {
    layoutType: {
      type: String,
      default: () => ''
    },
    readOnly: {
      type: Boolean,
      default: () => false
    },
    typeKey: {
      type: String,
      default: () => ''
    },
    value: {
      type: [Array, Object],
      default: () => []
    }
  },

  data() {
    return {
      dictLists: {},
      selectRows: [],
      tools: [
        {
          name: '添加',
          icon: '/icons/c-batchc.png',
          handler: {
            click: () => {
              const selfSoleKey = this.$utils.guid()
              this.value.push({
                operator: 'ADD',
                selfSoleKey: selfSoleKey
              })
            }
          }
        },
        {
          name: '移除',
          icon: '/icons/c-batchd.png',
          handler: {
            click: () => {
              if (this.selectRows.length === 0) {
                this.$utils.showMessageWarning('请选择要删除的项')
                return
              }
              this.selectRows.forEach(element => {
                this.value.forEach((el, index) => {
                  if (el.id && el.id === element.id) {
                    this.$set(el, 'operator', 'REMOVE')
                  } else if (el.selfSoleKey && el.selfSoleKey === element.selfSoleKey) {
                    this.value.splice(index, 1)
                  }
                })
              })
              this.$emit('input', this.value)
            }
          }
        }
      ],
      tableColumns: []
    }
  },
  computed: {
    cacheTableData() {
      return this.value ? this.value.filter(el => {
        if (this.readOnly) {
          const dicKeyList = Object.keys(el)
          dicKeyList.forEach(elkey => {
            if (this.dictLists[elkey]) {
              el[elkey] = this.dictLists[elkey][el[elkey]]
            }
          })
        }
        return el.operator !== 'REMOVE'
      }) : []
    }
  },
  watch: {},
  mounted() {},
  created() {
    getLayouts(this.typeKey, this.layoutType).then(res => {
      if (res.items[0].configDetails) {
        this.tableColumns = JSON.parse(res.items[0].configDetails).tableObj.tableColumns
        if (this.readOnly) {
          this.$dict.getDictList(this.tableColumns).then(res => {
            if (res) {
              const dicKeyList = Object.keys(res)
              dicKeyList.forEach(el => {
                const dicObj = {}
                res[el].forEach(element => {
                  dicObj[element.value] = element.label
                })
                this.$set(this.dictLists, el, dicObj)
              })
            }
          })
        }
      }
    })
  },
  methods: {
    cellDataChange({ key, row, value }) {
      this.value.forEach(el => {
        if (el.id && el.id === row.id) {
          el.operator === 'EDIT'
          el[key] = value
        } else if (el.selfSoleKey === row.selfSoleKey) {
          el[key] = value
        }
      })
      this.$emit('input', this.value)
    },
    selectionChange(rows) {
      this.selectRows = rows
    }
  }
}

</script>
<style lang='scss'>
</style>