<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
        v-if="itm.tag"
        :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"
        :show-overflow-tooltip="itm.tooltip"
        min-width="50"
      >
        <!-- 一些需要特殊处理的单元格放到这里 -->
        <template slot-scope="scope">
          <!-- 查看 -->
          <template v-if="itm.tag === 'twoDecimal'">
            <template
                    v-if="
                      (scope.row.lt_ratios === 'lt_ratios' ||
                        scope.row.adshow_lt_ratios === 'adshow_lt_ratios') &&
                        itm.prop !== 'user_price'
                          "
            >
              <template v-if="typeof scope.row[itm.prop] === 'string'">
                <font style="color: #00a"
                  >{{
                    parseInt(scope.row[itm.prop].split("-")[1] * 10000) / 100
                  }}%</font
                >
              </template>
              <template v-else>
                {{ parseInt(scope.row[itm.prop] * 10000) / 100 || "-"
                }}{{ scope.row[itm.prop] ? "%" : "" }}
              </template>
            </template>
            <template v-else>
              {{ parseInt(scope.row[itm.prop] * 1000) / 1000 || "-" }}
            </template>
          </template>
        </template>
      </el-table-column>
      <!-- 正常列 -->
      <el-table-column
        v-else
        :key="idx"
        :prop="itm.prop"
        :label="itm.label"
        :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;
      //如果表格上方有元素则减去这些高度适应窗口，70是底下留白部分
      Height -= disTop.offsetTop + 70;
      if (disTop.offsetParent) Height -= disTop.offsetParent.offsetTop;
      this.tableHeight = Height < 460 ? 460 : Height;
      //重绘表格
      this.$refs.table.doLayout();
    },
  },
};
</script>

<style></style>
