<template>
  <el-table :data="tableData" :size="tableSize" v-bind="_props">
    <slot name="left"></slot>
    <template v-for="(item, index) in columns">
      <el-table-column v-bind="item" :key="index">
        <slot :name="`header-${item.prop}`" slot="header"></slot>
        <template v-if="$scopedSlots[`cell-${item.prop}`]" #default="{ row, column, $index }">
          <slot :name="`cell-${item.prop}`" :value="row[column.property]" :row="row" :index="$index"></slot>
        </template>
      </el-table-column>
    </template>
    <slot></slot>
    <slot name="append"></slot>
  </el-table>
</template>

<script>
import tableProps from './props';

export default {
  name: 'TableNormal',
  inject: {
    elForm: {
      default: '',
    },
    elFormItem: {
      default: '',
    },
  },
  props: {
    value: {
      type: Array,
      default() {
        return [];
      },
    },
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    ...tableProps,
  },
  data() {
    return {
      tableData: this.value.length > 0 ? this.value : this.data,
    };
  },
  watch: {
    value(val) {
      this.tableData = val || [];
    },
    data(val) {
      this.tableData = val || [];
    },
  },
  computed: {
    _elFormItemSize() {
      return (this.elFormItem || {}).elFormItemSize;
    },
    tableSize() {
      return this.size || this._elFormItemSize || (this.elForm || {}).size || (this.$ELEMENT || {}).size;
    },
  },
};
</script>
