<template lang="pug">
  div.comp
    div.comp-table
      el-table(:data="data" size="medium" header-cell-class-name="tableStyle" highlight-current-row @selection-change="handleSelectionChange" border @row-click="handelRowClick")
        el-table-column(v-if="selection" type="selection" align="center" width="80")
        el-table-column(v-if="indexes" type="index" :label="indexes" align="center" width="80")
        //- 动态插入作用域插槽: 具名插槽 + 作用域插槽
        el-table-column(v-if="prop.slot" v-for="prop of props" :key="prop.field" :label="prop.header" :align="prop.align" :min-width='prop.minw' :fixed="prop.fixed")
          template(slot-scope="scope")
            slot(:scope="{row: scope.row, col: prop}" :name="prop.slot")
        //- 多级表头: 动态插入作用域插槽
        el-table-column(v-else-if="prop.merge" :label="prop.header" :align="prop.align" :fixed="prop.fixed")
          el-table-column(v-if="split.slot" v-for="split of prop.merge" :key="split.field" :label="split.header" :align="split.align" :min-width='split.minw')
            template(slot-scope="scope")
              slot(:scope="{row: scope.row, col: split}" :name="split.slot")
          el-table-column(v-else :key="split.field" :prop="split.field" :label="split.header" :align="split.align" :min-width='split.minw')
        //- 正常表头: 无需自定义
        el-table-column(v-else :key="prop.field" :prop="prop.field" :label="prop.header" :align="prop.align" :min-width='prop.minw' :fixed="prop.fixed")
    div.comp-pagination(v-show="!hiddenPaging")
      el-pagination(:total="paging.total" :layout="pagination.layout" :current-page="pagination.currentPage" :page-size="pagination.pageSize" popper-class="paginationStyle" @current-change="currentChanged" @size-change="sizeChanged")
</template>

<script>
import mixin from "./index.mixin";

export default {
  name: "comp-table-report",
  mixins: [mixin],
  props: {
    props: Array, // 表头
    data: Array, // 数据
    paging: {
      type: Object,
      default: () => {
        return {
          page: 1,
          size: 10,
          total: 100
        };
      }
    }, // 分页
    selection: Array, // 多选集合
    indexes: String, // 索引名称
    hiddenPaging: Boolean // 隐藏
  },
  data() {
    return {
      // 分页默认值
      pagination: {
        layout: "total, ->, prev, pager, next, sizes, jumper" // -> : 布局间距
      }
    };
  },
  methods: {
    // 样式
    headerStyle() {
      return "tableStyle";
    },
    paginationStyle() {
      return "paginationStyle";
    },
    // 分页
    currentChanged(index) {
      this.pagination.currentPage = index;
      this._paginationChanged();
    },
    sizeChanged(size) {
      this.pagination.pageSize = size;
      this._paginationChanged();
    },
    // 向父组件提分页交改变
    _paginationChanged() {
      this.$emit("paginationChanged", {
        page: this.pagination.currentPage,
        size: this.pagination.pageSize
      });
    },
    // 多选数据抛出同步 - `.sync` 处理对象更新
    handleSelectionChange(val) {
      this.$emit("update:selection", val);
    },
    // 行点击事件
    handelRowClick(row, col) {
      console.log(row, col);
      this.$emit("rowClick", {
        page: this.pagination.currentPage,
        size: this.pagination.pageSize
      });
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {
    // 分页初始化
    this.pagination.currentPage = this.paging.page;
    this.pagination.pageSize = this.paging.size;
  },
  mounted() {}
};
</script>

<style scoped lang="stylus">
.comp
  background-color: #fff;
  &-pagination
    padding: 30px 0 10px 0
>>> .tableStyle
  background-color: #F5F7FA !important
  color: #333;
  font-weight: bold;
.paginationStyle
  text-align: center
</style>
