<template>
  <el-table
    empty-text="暂无数据"
    ref="table"
    :data="tableList"
    border
    stripe
    fit
    highlight-current-row
    :height="tableHeight"
    @selection-change="selectionChange"
    @row-click="rowClick"
  >
    <!-- 选择框 -->
    <el-table-column
      v-if="select"
      type="selection"
      fixed="left"
      width="55"
      align="center"
    />
    <template v-for="(itm, idx) in header">
      <el-table-column
        :key="idx"
        :prop="itm.prop ? itm.prop : null"
        :label="itm.label ? itm.label : null"
        :width="itm.width ? itm.width : null"
        :sortable="itm.sortable ? itm.sortable : false"
        :align="itm.align ? itm.align : 'center'"
        :fixed="itm.fixed ? itm.fixed : null"
        :formatter="itm.formatter"
        :show-overflow-tooltip="itm.tooltip"
        min-width="50"
      />
    </template>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableHeight: null
    };
  },
  props: {
    tableList: {
      type: Array,
      default: () => []
    },
    header: {
      type: Array,
      default: () => []
    },
    select: {
      type: Boolean,
      default: () => false
    },
    selectionChange: {
      type: Function,
      default: () => null
    },
    rowClick: {
      type: Function,
      default: () => null
    }
  },
  mounted() {
    this.$nextTick(() => {
      //表格高度自适应浏览器大小
      this.changeTableHight();
      window.onresize = () => {
        this.changeTableHight();
      };
    });
  },
  destroyed() {
    //高度自适应事件注销
    window.onresize = null;
  },
  watch: {
    /**
     * 数据变化后 高度自适应
     */
    tableList() {
      this.$nextTick(() => {
        this.changeTableHight();
      });
    }
  },
  methods: {
    /**
     * 高度自适应
     * 当表格展示空间小于460按460px展示，大于的时候高度填充
     */
    changeTableHight() {
      let Height = window.innerHeight || document.body.clientHeight;
      //高度设置
      let disTop = this.$refs.table.$el;
      //如果表格上方有元素则减去这些高度适应窗口，66是底下留白部分
      Height -= disTop.offsetTop + 66;
      if (disTop.offsetParent) Height -= disTop.offsetParent.offsetTop;
      this.tableHeight = Height < 460 ? 460 : Height;
      //重绘表格
      this.$refs.table.doLayout();
    }
  }
};
</script>

<style></style>
