<template>
  <div class="y-table">
    <el-table
      ref="MyTable"
      v-loading="loading"
      :data="data"
      style="width: 100%"
      :size="size"
      :row-key="rowkey"
      v-bind="$attrs"
      v-on="$listeners"
    >
      <template v-for="(v, i) in column">
        <el-table-column
          v-if="!v.slot"
          :key="i"
          :reserve-selection="v.reserveSelection"
          :prop="v.prop"
          :type="v.type"
          :index="v.index"
          :label="v.label"
          :width="v.width"
          :align="v.align"
          :fixed="v.fixed"
          :formatter="v.formatter"
          :min-width="v.minWidth"
          :show-overflow-tooltip="v.showOverflowTooltip"
        >
        </el-table-column>
        <el-table-column
          v-else
          :key="'a' + i"
          :reserve-selection="v.reserveSelection"
          :prop="v.prop"
          :type="v.type"
          :index="v.index"
          :label="v.label"
          :width="v.width"
          :align="v.align"
          :fixed="v.fixed"
          :formatter="v.formatter"
          :min-width="v.minWidth"
          :show-overflow-tooltip="v.showOverflowTooltip"
        >
          <template slot-scope="scope">
            <slot :name="v.prop" v-bind="scope"></slot>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "YTable",
  props: {
    loading: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: "",
    },

    data: {
      type: Array,
      default: () => [],
    },
    column: {
      type: Array,
      default: () => [],
    },
    rowkey: {
      type: [String, Function],
      default: "id",
    },
  },
  data() {
    return {};
  },
  watch: {
    data: {
      handler() {
        this.$nextTick(() => {
          this.$refs.MyTable.bodyWrapper.scrollTop = 0;
          this.$refs.MyTable.bodyWrapper.scrollLeft = 0;
        });
      },
      immediate: true,
      deep: true,
    },
  },
  computed: {},
  created() {},
  methods: {
    clearSelection() {
      this.$refs.MyTable.clearSelection();
    },
    toggleAllSelection() {
      this.$refs.MyTable.toggleAllSelection();
    },
    clearSort() {
      this.$refs.MyTable.clearSort();
    },
    doLayout() {
      this.$refs.MyTable.doLayout();
    },
    clearFilter() {
      this.$refs.MyTable.clearFilter(...arguments);
    },
    sort() {
      this.$refs.MyTable.sort(...arguments);
    },
    toggleRowExpansion() {
      this.$refs.MyTable.toggleRowExpansion(...arguments);
    },
    setCurrentRow() {
      this.$refs.MyTable.setCurrentRow(...arguments);
    },
    toggleRowSelection() {
      this.$refs.MyTable.toggleRowSelection(...arguments);
    },
  },
};
</script>

<style lang="less" scoped>
.y-table {
  width: 100%;
  height: 100%;
}
</style>
