<template>
  <el-table ref="table" :border="border" :data="rows" @selection-change="$emit('selection-change', $event)">
    <template v-for="(prop, key) in propDefines">
      <template v-if="prop.hidden"></template>
      <el-table-column v-else-if="!prop.type" :key="key" :label="prop.label" :width="prop.width"
                       :min-width="prop.minWidth" :align="prop.align || 'center'" :fixed="prop.fixed">
        <template v-if="prop.slotHeader" #header="scopeHeader">
          <slot :name="prop.slotHeader" v-bind="{
            ...scopeHeader,
            key: key,
            label: prop.label,
            prop: prop
          }">{{ prop.label }}
          </slot>
        </template>
        <template slot-scope="scope">
          <slot v-if="prop.slot" :name="prop.slot" v-bind="{
            ...scope,
            key: key,
            label: prop.label,
            value: scope.row[key],
            prop: prop
          }">
            <span>{{ scope.row[key] }}</span>
          </slot>
          <span v-else>{{ scope.row[key] }}</span>
        </template>
      </el-table-column>
      <el-table-column :key="key" v-else :type="prop.type" :label="prop.label" :width="prop.width"
                       :align="prop.align || 'center'"></el-table-column>
    </template>
  </el-table>
</template>
<script>
export default {
  props: {
    border: {
      type: Boolean,
      default: false
    },
    rows: {
      type: Array,
      default: () => []
    },
    propDefines: {
      type: Object,
      default: () => ({
        id: {
          label: 'id', // label
          slot: '', // define slot if need custom body
          slotHeader: '', // define slot if need custom header
          slotFooter: '' // define slot if need custm footer
          // defines any property that el-table-column support.
        }
      })
    }
  },
  data() {
    return {
      properties: {}
    }
  },
  methods: {
    getRuntimeTable() {
      return this.$refs.table
    }
  }
}
</script>
<style lang="scss" scoped>
</style>
