<template>
  <div class="EasyTable">
    <el-table
      v-loading="loading"
      :data="tableData"
      :row-key="tableConfig.rowKey"
      v-bind="tableConfig.tableProps"
      :row-class-name="tableRowClassName"
      :header-cell-style="{background:'#8cc3fb',color:'#fff'}"
      @selection-change="(selection) => { $emit('update:selected', selection) }"
      v-on="getPropValue(tableConfig.tableListeners)"
    >
      <el-table-column
        v-if="getPropValue(tableConfig.showIndex)"
        :index="tableConfig.indexMethod"
        type="index"
        :width="tableConfig.indexWidth"
        label="序号"
        v-bind="tableConfig.tableIndexProps"
      />
      <el-table-column
        v-if="getPropValue(tableConfig.selection)"
        type="selection"
        :width="tableConfig.selectionWidth"
        v-bind="tableConfig.tableSelectionProps"
      />\
      <template
        v-for="field in _fields"
      >
        <el-table-column
          v-if="getPropValue(field.type) === 'slot'"
          :key="field.prop"
          :prop="field.prop"
          :label="getPropValue(field.label)"
          v-bind="field.tableProps"
        >
          <template slot-scope="scope">
            <slot :name="field.slotName" v-bind="scope" />
          </template>
        </el-table-column>
        <el-table-column
          v-else
          :key="field.prop"
          :prop="field.prop"
          :label="getPropValue(field.label)"
          v-bind="field.tableProps"
        />
      </template>

      <el-table-column
        v-if="buttons.length > 0"
        label="操作"
        fixed="right"
      >
        <template slot="header" slot-scope="scope">
          <template v-for="button in buttons.filter((item)=>{return item.position === 'header'})">
            <el-button
              v-if="getPropValue(button.show,scope)"
              :key="button.label"
              :loading="getPropValue(button.loading,scope)"
              :type="getPropValue(button.type,scope)"
              :size="getPropValue(button.size,scope)"
              :disabled="getPropValue(button.disabled,scope)"
              @click="callButtonHandle(button,scope)"
            >{{ getPropValue(button.label,scope) }}</el-button>
          </template>
          <span v-if="buttons.filter((item)=>{return item.position === 'header'}).length === 0">
            操作
          </span>
        </template>
        <template slot-scope="scope">
          <template v-for="button in buttons.filter((item)=>{return item.position === 'row'})">
            <el-button
              v-if="getPropValue(button.show,scope)"
              :key="button.label"
              :loading="getPropValue(button.loading,scope)"
              :type="getPropValue(button.type,scope)"
              :size="getPropValue(button.size,scope)"
              :disabled="getPropValue(button.disabled,scope)"
              @click="callButtonHandle(button,scope)"
            >{{ getPropValue(button.label,scope) }}</el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-row v-if="tableConfig.showPagination">
      <el-col :span="24" style="text-align:right">
        <el-pagination
          :page-size="pageParam.size"
          :total="total"
          :page-sizes="[10, 20, 30, 40, 50, 100, 200]"
          layout="slot,total, sizes, prev, pager, next, jumper"
          @size-change="(size)=>{pageParam.size = size;$emit('size-change', { pageParam, instance: that })}"
          @current-change="(current)=>{pageParam.current = current;$emit('current-change', { pageParam, instance: that })}"
        >
          <span>
            第 {{ pageParam.current }} 页 /
            共 {{ (total !== 0 ? parseInt((total + pageParam.size - 1)/pageParam.size) : 1) }} 页
          </span>
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import mixin from '@/mixin/myMixin'
export default {
  name: 'EasyTable',
  mixins: [mixin],
  props: {
    fields: {
      type: Array,
      default: () => {
        return []
      }
    },
    value: {
      type: Array,
      required: true
    },
    tableConfig: {
      type: Object,
      default: () => {
        return {}
      }
    },
    buttons: {
      type: Array,
      default: () => {
        return []
      }
    },
    total: {
      type: Number,
      default: () => {
        return 0
      }
    },
    selected: {
      type: Array,
      default: () => {
        return []
      }
    },
    emitCurrentChangeOnCreate: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data() {
    return {
      pageParam: {
        current: 1,
        size: 10
      },
      loading: false
    }
  },
  computed: {
    that() {
      return this
    },
    tableData() {
      return this.value
    },
    _fields() {
      return this.fields.filter((item) => {
        return this.getPropValue(item.showInTable)
      }).sort((a, b) => {
        return a.tableSort - b.tableSort
      })
    }
  },
  created() {
    if (this.emitCurrentChangeOnCreate) {
      this.$emit('current-change', {
        pageParam: this.pageParam,
        instance: this
      })
    }
  },
  methods: {
    getPropValue(prop, ...args) {
      return typeof prop === 'function' ? prop(...args, {
        tableData: this.tableData,
        tableConfig: this.tableConfig,
        componentName: 'EasyTable'
      }) : prop
    },
    callButtonHandle(button, scope) {
      button.handler(scope, button, this)
    },
    reset() {
      if (this.pageParam.current === 1 && this.pageParam.size === 10) {
        this.$nextTick(() => {
          this.$emit('current-change', {
            pageParam: this.pageParam,
            instance: this
          })
        })
      }
      this.$set(this, 'pageParam', {
        current: 1,
        size: 10
      })
    }
  }
}
export const template = {
  data() {
    return {
      tableData: [],
      tableConfig: {
        showIndex: true,
        indexMethod: (index) => {
          return index
        },
        indexWidth: '50',
        selection: true,
        selectionWidth: '55',
        rowKey: 'id',
        showPagination: true,
        tableProps: {
          border: true
        },
        tableSelectionProps: {
          reserveSelection: false
        },
        tableIndexProps: {}
      },
      fields: [
        {
          prop: 'name',
          label: '数量',
          showInTable: true,
          tableSort: 0,
          tableProps: {
            'min-width': '200px'
          }
        }
      ],
      buttons: [
        {
          label: '删除',
          type: 'danger',
          loading: false,
          show: true,
          disabled: false,
          position: 'header', // header | row
          handler: (scope, button, easyTableInstance) => {
            console.log(scope, button, easyTableInstance)
            button.loading = true
            button.label = '正在删除'
            setTimeout(() => {
              button.loading = false
              button.label = '删除'
            }, 5000)
          }
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
