<template>
  <el-pagination
    :small="comTable.size == 'mini'"
    :disabled="defaultPage.disabled"
    :hide-on-single-page="defaultPage.single"
    :pager-count="defaultPage.pagerCount"
    :current-page.sync="defaultPage.currentPage"
    :background="defaultPage.background"
    :page-size="defaultPage.pageSize"
    :page-sizes="defaultPage.pageSizes"
    @size-change="sizeChange"
    @prev-click="prevClick"
    @next-click="nextClick"
    @current-change="currentChange"
    :layout="defaultPage.layout"
    :total="defaultPage.total"
  ></el-pagination>
</template>

<script>
import base from '../../utils/base.js';

export default {
  name: 'comTable',
  inject: ['comTable'],
  mixins: [base()],
  data() {
    return {
      defaultPage: {
        single: false,
        total: 0, // 总页数
        pagerCount: 7, //超过多少条隐藏
        currentPage: 1, // 当前页数
        pageSize: 10, // 每页显示多少条
        pageSizes: [10, 20, 30, 40, 50, 100],
        layout: 'total, sizes, prev, pager, next, jumper',
        background: true, // 背景颜色
      },
    };
  },
  created() {
    this.pageInit();
    this.comTable.$emit('on-load', this.defaultPage);
  },
  watch: {
    'comTable.page': {
      handler() {
        this.pageInit();
      },
      deep: true,
    },
  },
  computed: {
    pageFlag() {
      return this.defaultPage.total != 0;
    },
  },
  methods: {
    pageInit() {
      this.defaultPage = Object.assign(this.defaultPage, this.comTable.page);
      this.updateValue();
    },
    updateValue() {
      console.log('updateValue defaultPage', this.defaultPage);
      this.comTable.$emit('update:page', this.defaultPage);
    },
    //下一页事件
    nextClick(val) {
      console.log('nextClick', val);
      this.comTable.$emit('next-click', val);
    },
    //上一页事件
    prevClick(val) {
      console.log('prevClick', val);
      this.comTable.$emit('prev-click', val);
    },
    // 页大小回调
    sizeChange(val) {
      this.defaultPage.currentPage = 1;
      this.defaultPage.pageSize = val;
      this.updateValue();
      console.log('sizeChange', val);
      this.comTable.$emit('on-load', this.defaultPage);
      this.comTable.$emit('size-change', val);
    },
    // 页码回调
    currentChange(val) {
      this.updateValue();
      this.comTable.$emit('on-load', this.defaultPage);
      this.comTable.$emit('current-change', val);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-pagination {
  text-align: right;
  padding: 15px 10px 15px 20px !important;
}
</style>
