<template>
  <div class="eContainer-table-block">
    <el-table :id="tableRef" :data="list" ref="table" style="width: 100%" class="eContainer-table" :header-cell-style="{background: 'eef1f6', color: '#606266'}"
      v-bind="$attrs" v-on="tableListeners" v-loading="loading" :row-class-name="tableRowClass" :max-height="maxHeight"
      >
      <el-table-column
        v-for="(item, key) in columnsConfig"
        :key="key"
        v-bind="item"
      ></el-table-column>
      <slot></slot>
    </el-table>
    <el-pagination
      class="eContainer-pagination"
      v-if="paginationShow"
      :background="type=='small'? false: true"
      small
      layout="prev, pager, next, jumper"
      :page-size="limit"
      :current-page="current"
      :total="total"
      v-on="$listeners"
    ></el-pagination>
    <div class="paginationLable" v-if="paginationShow">当前显示第 {{page1}}-{{page2}} 条，共 {{total}} 条</div>
  </div>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'normal'
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    columnsConfig: {
      type: Array,
      default: () => {
        return []
      }
    },
    total: {
      type: Number,
      default: 0
    },
    current: {
      type: Number,
      default: 0
    },
    limit: {
      type: Number,
      default: 0
    },
    outerHeight: {
      type: Number,
      default: undefined
    },
    loading: {
      type: Boolean,
      default: false
    },
    tableRowClassName: {
      type: Function
    },
    maxHeight:{
      type: String,
      default:undefined
    },
    paginationShow: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  data(){
    return{
      page1:'',
      page2:'',
      tableListeners: {},
      tableRef: 'tableRef' + Math.floor(Math.random() * 100)
    }
  },
  watch: {
    'current': function () {
      this.getPageNum()
    },
    'outerHeight': function () {
      if (this.outerHeight !== undefined) {
        window.removeEventListener('resize', this.handleResizeBind)
        this.clientHeight = `${document.documentElement.clientHeight}`
        this.changeFixed()
        this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight)
        window.addEventListener('resize', this.handleResizeBind)
      }
    }
  },
  created() {
    this.getPageNum()
    this.tableListeners = {...this.$listeners}
    delete this.tableListeners['current-change']
  },
  mounted() {
    if (this.outerHeight) {
      this.clientHeight = `${document.documentElement.clientHeight}`
      this.changeFixed()
      this.handleResizeBind = this.handleResize.bind(this, this.tableRef, this.outerHeight)
      window.addEventListener('resize', this.handleResizeBind)
    }
    
  },
  methods: {
    changeFixed() {
      let content = document.getElementById(this.tableRef)
      let clientHeight = `${document.documentElement.clientHeight}`
      let target
      for (let i = 0; i < content.children.length; i++) {
        if (content.children[i].classList.contains('el-table__body-wrapper')) {
          target = content.children[i]
        }
      }
      target.style.maxHeight = clientHeight - this.outerHeight + 'px'
    },
    handleResize: (tableRef, outerHeight) => {
      let content = document.getElementById(tableRef)
      let clientHeight = `${document.documentElement.clientHeight}`
      let target
      for (let i = 0; i < content.children.length; i++) {
        if (content.children[i].classList.contains('el-table__body-wrapper')) {
          target = content.children[i]
        }
      }
      target.style.maxHeight = clientHeight - outerHeight + 'px'
    },
    getPageNum(){      
      if( this.current == Math.ceil(this.total/this.limit)){
        this.page1 = this.current*this.limit-this.limit + 1
        this.page2 = this.total
      }else{
        this.page1 = this.current*this.limit-this.limit + 1
        this.page2 = this.current*this.limit
      }
    },
    tableRowClass: function ({row, rowIndex}) {
      if (this.tableRowClassName) {
        return this.tableRowClassName({row, rowIndex})
      } else {
        return ''
      }
    }
  },
  destroyed: function () {
    if (this.outerHeight) {
      window.removeEventListener('resize', this.handleResizeBind)
    }
  },
  
}
</script>

<style>
.eContainer-table-block .paginationLable{
 font-size: 12px;
 color: #808080;
 height: 26px;
 line-height: 26px;
 float:right;
 margin-top:20px;
}
.eContainer-table-block .el-table__body-wrapper {
  overflow: auto;
}
.el-table .warning-row {
  background: oldlace;
}
.el-table .success-row {
  background: #f0f9eb;
}
/* .eContainer-table thead tr th.is-leaf{
  border-bottom: transparent;
} */
</style>