<template>
  <div class="table-container">
    <!-- 表格 https://blog.csdn.net/h_jQuery/article/details/128128309-->
    <el-table
      ref="table"
      :data="tableData"
      style="width: 100%"
      :header-cell-class-name="headerBg ? 'headerCell' : ''"
      :row-key="rowKey"
      @selection-change="handleSelectionChange"
      @current-change="handleCurrentRowChange"
      :highlight-current-row="highlightCurrentRow"
      :stripe="stripe"
      :max-height="maxHeight"
      :show-summary="summary"
      :border="border"
      :size="size"
      :summary-method="summaryMethod"
      :span-method="spanMethod"
      :row-class-name="tableRowClassName"
    >
      <!-- 展开行 -->
      <el-table-column v-if="expand" type="expand" width="70" align="center">
        <template slot-scope="scope">
          <!-- 作用域插槽， scope：拿到这一行的数据-->
          <slot name="expand" :row="scope.row" :index="scope.$index" :column="scope.column"> </slot>
        </template>
      </el-table-column>
      <!-- 多选 -->
      <el-table-column v-if="selection" type="selection" width="45" align="center" :selectable="selectBox" />
      <!-- 序列号 -->
      <el-table-column v-if="index" type="index" width="45" :label="indexLabel" align="center" />
      <!-- 数据 -->
      <el-table-column
        v-for="column in columns"
        :prop="column.prop"
        :label="column.label"
        :width="column.width || 'auto'"
        :key="column.prop"
        :show-overflow-tooltip="column.tooltip ? true : column.tooltip"
        :type="column.type || ''"
        :sortable="column.sortable || false"
        :fixed="column.prop == 'operation' ? 'right' : column.fixed || false"
        :align="column.prop == 'operation' ? 'left' : column.align || 'center'"
      >
        <!-- table自带的作用域插槽 -->
        <template slot-scope="scope">
          <!-- 作用域插槽， scope：拿到这一行的数据-->
          <slot :name="column.prop" :row="scope.row" :index="scope.$index" :column="scope.column">
            <!-- 默认显示 -->
            <span>{{ scope.row[column.prop] }}</span>
          </slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <template v-if="hasPage">
      <el-pagination
        align="left"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNo"
        :page-sizes="[20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      >
      </el-pagination>
    </template>
  </div>
</template>
<script>
export default {
  props: {
    columns: {
      //表格column配置项
      type: Array,
      default: () => [],
    },
    dataList: {
      //表格展示数据
      type: Array,
      default: () => [],
    },
    pagina: {
      //分页数据
      type: Object,
      default: () => {
        return {
          pageNo: 1,
          pageSize: 1,
          total: 0,
        };
      },
    },
    maxHeight: {
      //最大高度
      type: String,
      default: "550",
    },
    stripe: {
      //是否显示斑马纹
      type: Boolean,
      default: false,
    },
    border: {
      //是否显示纵向的边框
      type: Boolean,
      default: true,
    },
    selection: {
      //是否可多选
      type: Boolean,
      default: false,
    },
    index: {
      //是否显示序列号
      type: Boolean,
      default: true,
    },
    expand: {
      //是否展开行
      type: Boolean,
      default: false,
    },
    hasPage: {
      // 是否显示分页组件
      type: Boolean,
      default: true,
    },
    rowKey: {
      //行数据的key
      type: String,
      default: "",
    },
    indexLabel: {
      type: String,
      default: "序号",
    },
    headerBg: {
      //表头行是否有背景色
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "mini",
    },
    summary: {
      // 是否显示合计项
      type: Boolean,
      default: false,
    },
    selectBox: {
      //复选框可用/禁用状态处理函数
      type: Function,
      default: null,
    },
    summaryMethod: {
      //合计行处理函数
      type: Function,
      default: null,
    },
    spanMethod: {
      //合计行处理函数
      type: Function,
      default: null,
    },
    currentIndex: {
      type: Number,
    },
    highlightCurrentRow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableData: null,
      pagination: {
        pageNo: 1,
        pageSize: 1,
        total: 0,
      },
    };
  },
  computed: {
    table() {
      return this.$refs.table;
    },
  },
  methods: {
    tableRowClassName({ rowIndex }) {
      if (this.currentIndex === rowIndex) {
        return "current-row";
      }
      return "";
    },
    // 多选
    handleSelectionChange(selection) {
      this.$emit("selectionChange", selection);
    },
    handleCurrentRowChange(val) {
      this.$emit("currentChange", val);
    },
    handleSizeChange(pageSize) {
      this.pagination.pageSize = pageSize;
      this.$emit("pageChange", this.pagination);
    },
    handleCurrentChange(pageNo) {
      this.pagination.pageNo = pageNo;
      this.$emit("pageChange", this.pagination);
    },
    setCurrentRow(index) {
      const row = this.tableData[index];
      console.log(row);
      this.$refs.table.setCurrentRow(row);
    },
  },
  watch: {
    dataList: {
      handler(newVal) {
        this.tableData = JSON.parse(JSON.stringify(newVal));
      },
      immediate: true,
      deep: true,
    },
    pagina: {
      handler(newVal) {
        this.pagination = JSON.parse(JSON.stringify(newVal));
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>

<style lang="scss" scoped>
.table-container {
  ::v-deep .el-table {
    margin-bottom: 20px;
    .headerCell {
      background: #e8e8e8 !important;
      color: #333;
    }
    .current-row {
      background: #999999;
    }
  }

  .el-button {
    margin-bottom: 10px !important;
  }
}
</style>
