<template>
<div class="inner_table_box">
      <el-table
          ref="hsmultipleTable"
          @selection-change='selectionChange'
          :data="tableData"
          border
          :max-height='maxHeight'
          tooltip-effect="dark"
          @row-click='rowClick'
          :highlight-current-row='true'
          :style="tableStyle"
          @cell-click="tableCellClick"
          >
            <el-table-column v-if='showSelection' type="selection" width="55"></el-table-column>
            <template  v-for="(column,index) in tableColumns">
               <el-table-column
                :show-overflow-tooltip="column.showOverflowTooltip"
                :key="index"
                :prop="column.prop"
                :label="column.label"
                v-if="!column.slotName"
                :width="column.width"
                :fixed="column.fixed"
                />
                <el-table-column
                :show-overflow-tooltip="column.showOverflowTooltip"
                :key="index"
                :prop="column.prop"
                :label="column.label"
                 v-if="column.slotName"
                :width="column.width"
                :fixed="column.fixed"
                >
                 <template slot-scope="scope">
                    <slot :name="column.slotName" :row='scope.row'></slot>
                 </template>
               </el-table-column>
            </template>
            <el-table-column  v-if='showHandle' label="操作" :width='handleWidth'>
               <template slot-scope="scope">
                    <slot name="table_handle" :row='scope.row'></slot>
                </template>
              </el-table-column>
      </el-table>
      <div class="block_pagination" v-if='hsTablePagination'>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="tablePagination_.page"
          :page-sizes="[10,20,50,100, 200, 300, 400]"
          :page-size="tablePagination_.per_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tablePagination_.total">
        </el-pagination>
      </div>
</div>
</template>
<script>
export default {
  props: {
    maxHeight: {
      default: 500
    },
    // 是否显示操作栏目
    showHandle: {
      default: false
    },
    // 表头
    tableColumns: {},
    // 表体
    tableData: {},
    // 是否显示选择栏
    showSelection: {
      default: false
    },
    // 表格样式
    tableStyle: {
      width: '100%'
    },
    // 高度
    height: {
      default: '100%'
    },
    handleWidth: {},
    tablePagination: {
      default() {
        return {
          page: 1,
          per_page: 0,
          total: 0
        }
      }
    },
    hsTablePagination: {
      default: false
    }
  },
  data() {
    return {
      tablePagination_: {
        page: 1,
        per_page: 0,
        total: 0
      }
    }
  },
  watch: {
    tablePagination: {
      handler(val) {
        this.setPropDeep(this.tablePagination_, val)
      },
      deep: true
    }
  },
  mounted() {
    this.setPropDeep(this.tablePagination_, this.tablePagination)
  },
  methods: {
    setPropDeep(targetObj, sourceObj) {
      for (const p in sourceObj) {
        this.$set(targetObj, p, Number(sourceObj[p]))
      }
    },
    rowClick(row) {
      this.$emit('rowClick', row)
    },
    handleSizeChange(size) {
      this.$emit('handleSizeChange', size)
    },
    handleCurrentChange(page) {
      this.$emit('handleCurrentChange', page)
    },
    selectionChange(selection) {
      this.$emit('selectionChange', selection)
    },
    // 单击单元格,当选择选择栏的时候 当前行选择切换,而不必必须点击到 精确到选择框
    tableCellClick(row, column) {
      if (column.type === 'selection') {
        this.$refs.hsmultipleTable.toggleRowSelection(row)
      } else {
        this.$refs.hsmultipleTable.clearSelection() // 先清除掉其他的
        this.$refs.hsmultipleTable.toggleRowSelection(row) // 选中当前行
      }
    }
  }
}
</script>
<style scoped>
.inner_table_box{
  width: 100%;
  height: 100%;
}
.inner_table_box >>> .el-table__body tr.current-row>td{
  background-color: hsl(210, 100%, 89%);
}
.inner_table_box  >>> .el-divider--horizontal{
  margin:10px 0;
}
.block_pagination{
    display: flex;
    justify-content: flex-end;
}
</style>

