<template>
  <div class="table-cmp">
    <div v-if="showSelection" class="selection-count">
      <span>已选{{ multipleSelection.length }}条</span>
      <el-link
        type="danger"
        :underline="false"
        @click="clearSelection"
      >【取消选择】</el-link>
    </div>
    <!-- border -->
    <!-- highlight-current-row -->
    <el-table
      ref="my-table"
      v-loading="loading"
      :data="list"
      fit
      style="width: 100%"
      :header-cell-style="{ border: 'none', background: '#F8FAFC'}"
      :cell-style="{ border: 'none'}"
      header-row-class-name="grey-row"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      @row-click="(...args) => {$emit('row-click', args)}"
    >
      <el-table-column v-if="showSelection" type="selection" width="40" />
      <template v-for="(item, index) of $fields">
        <my-table-column
          v-if="!item.hidden"
          :key="'t-' + item.prop + index"
          v-permission="item.permission || []"
          :field="item"
        >
          <template v-for="it of slotList" :slot="it" slot-scope="scope">
            <slot v-bind="scope" :name="it" />
          </template>
        </my-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
import MyTableColumn from './MyTableColumn'
import { fieldsManager } from '../utils'
export default {
  components: { MyTableColumn },
  filters: {
    fieldsFilters(value, filter, scope) {
      if (!filter) return value
      return filter(value, scope)
    }
  },
  props: {
    fields: {
      type: [Array, Object],
      default: () => []
    },
    list: {
      type: Array,
      default: () => []
    },
    handlers: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    showSelection: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      $fields: [],
      slotList: [],
      multipleSelection: []
    }
  },
  watch: {
    fields() {
      // this.initSlotList()
      this.initFields()
      this.$forceUpdate()
    }
  },
  created() {
    this.initFields()
    // this.initSlotList()
  },
  methods: {
    initFields() {
      this.$fields = fieldsManager(this.fields)
      this.initSlotList()
    },
    initSlotList() {
      const { $fields } = this
      // const info = fieldsManager(this.info)
      // console.log($fields)
      if (!$fields || !$fields.length) return
      const diff = (arr, findkey, returnkey, defaultArr = []) => {
        arr.forEach((item) => {
          if (!item[findkey] || !item[findkey].length) {
            defaultArr.push(item[returnkey])
          } else {
            defaultArr = diff(item[findkey], findkey, returnkey, defaultArr)
          }
        })
        return defaultArr
      }
      this.slotList = diff($fields, 'children', 'prop')
      // console.log(this.slotList)
    },
    handleSelectionChange(e) {
      this.multipleSelection = e
    },
    getSelection(key) {
      const { multipleSelection } = this
      if (key) return multipleSelection.map((item) => item[key])
      return this.multipleSelection
    },
    clearSelection() {
      this.$refs['my-table'].clearSelection()
    },
    handleClike(data, handler) {
      handler(this, data)
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2) return 'grey-row'
      return ''
    }
  }
}
</script>

<style scoped>
.selection-count {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
</style>

<style>
.table-cmp .grey-row {
  background: #F8FAFC;
}
.table-cmp .el-table::before{
  height: 0;
}
</style>
