<template>
  <div class="hltable">
    <el-table

        ref="table"
        id="HLtableList"
        :data="data"
        :border="border"
        :size="size"
        :show-overflow-tooltip="showOverflowTooltip"
        :show-summary="showSummary"
        :tooltip-effect="tooltipEffect"
        :height='autoHeigit === true ? computedHeight : height'
        :search="search"
        :header-cell-style="tableHeaderColor"
        :stripe="stripe"
        :highlight-current-row="currentRow"
        @selection-change="selectChange"
        @select="select"
        @select-all="selectAll"
        @row-click="rowClick"
        @current-change="currentChange"
        v-loading="loading"
        style="width: 98%;margin: 5px auto 0 15px;border-bottom: 1px solid rgba(233, 233, 233, 1)"
    >
      <el-table-column v-if="multiple" type="selection" width="50" align="left"></el-table-column>

      <el-table-column
          v-if="serialize"
          type="index"
          label="序号"
          align="center"
          width="55"
      ></el-table-column>

      <slot></slot>
      <el-table-column v-if="blankCol"></el-table-column>
    </el-table>
    <div class="containers" v-if="showPagination">
      <slot name="count"></slot>
      <el-pagination
          background
          class="page"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-sizes="pageSizes"
          :page-size="pageSize"
          :layout="layout"
          :total="total"
          :page-count="pageCount"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import _ from 'lodash'
// import { setTimeout } from 'timers';
export default {
  name: "RxTable",
  props: {
    data: {
      default: () => []
    },
    showPagination:{
      default:true
    },
    size: {
      default: "small"
    },
    pageCount:{
      default:0,
    },
    border: {
      default: true
    },
    showOverflowTooltip: {
      default: false
    },
    multiple: {
      default: false
    },
    serialize: {
      default: true
    },
    showSummary: {
      default: false
    },
    tooltipEffect: {
      default: "dark"
    },
    loading: {
      default: false
    },
    stripe: {
      default: true
    },
    search: {
      default: false
    },
    total: {
      default: 0
    },
    pageSizes: {
      default: () => [2, 20, 50, 100]
    },
    pageSize: {
      default: 20
    },
    currentPage: {
      default: 1
    },
    layout: {
      default: "total,  prev, pager, next, jumper"
    },
    autoHeigit: {
      type: Boolean,
      default: true
    },
    height: {
      type: Number,
      default: 0
    },
    blankCol: {
      type: Boolean,
      default: true
    },
    currentRow: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      computedHeight: 0
    };
  },
  computed: {},
  methods: {
    // 修改table header的背景色
    tableHeaderColor({rowIndex}) {
      if (rowIndex === 0) {
        return "background-color: #F6F8FA;color: #262626;font-weight: 500;";
      }
    },
    selectChange(selection) {
      this.$emit("selection-change", selection);
    },
    selectAll(selection){
      console.log("selectAll="+selection)
    },
    select(selection, row){
      console.log(selection)
    },
    rowClick(row, event, column) {
      let data = {
        row: row,
        event: event,
        column: column
      };
      this.$emit("row-click", data);
    },
    handleSizeChange(size) {
      this.$emit("sizeChange", size);
    },
    handleCurrentChange(page) {

      this.$emit("pageChange", page);
    },
    computedTableHeight() {
      if (this.autoHeigit === true) {
        this.computedHeight = this.getHlTableListHeight();
      }
    },
    getHlTableListHeight() {
      const $HLtableList = $("#HLtableList");

      return window.innerHeight - $HLtableList.offset().top - 70;
    },
    currentChange(currentRow, oldCurrentRow) {
      this.$emit('currentChange', currentRow, oldCurrentRow)
    }
  },
  mounted() {
    setTimeout(()=>{
      this.computedTableHeight();
    },400)

    $(window).bind("resize", _.throttle(() => {
      this.computedTableHeight();
    }, 400));
  },
  destroyed () {
    $(window).off("resize");
  }
};
</script>

<style scoped lang="less">
.containers {
  width: 98%;
  margin-left: 15px;
  height: 34px;
  background-color: #f6f8fa;
  position: relative;
  /*margin-top: 15px;*/
  margin-bottom: 15px;
  .page {
    display: block;
    position: absolute;
    right: 10px;
    /*top:px;*/
  }
}
.hltable /deep/ .el-table .is-center .cell {
  padding-left: 0;
}
</style>
