<template>
  <div class="m-pagination">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="currentSize"
      :small="small"
      :background="background"
      :page-sizes="pageSizes"
      :disabled="disabled"
      :layout="layout"
      :total="total"
      v-bind="paginationCfg"
      :hideOnSinglePage="hideOnSinglePage"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handlePrev"
      @next-click="handleNext"
    />
  </div>
</template>

<script>
import { defineComponent, computed } from "vue";
export default defineComponent({
  name: "MPagination",
  props: {
    /**
     * 是否使用小型分页样式
     */
    small: {
      type: Boolean,
      default: false,
    },
    /**
     * 是否为分页按钮添加背景色
     */
    background: {
      type: Boolean,
      default: true,
    },
    /**
     * 每页显示条数(默认值 10)
     */
    pageSize: {
      type: Number,
      default: 10,
    },
    /**
     * 总条数(默认值 1)
     */
    total: {
      type: Number,
      required: true,
      default: 1,
    },
    /**
     * 当前页数(默认值 1)
     */
    page: {
      type: Number,
      required: true,
      default: 1,
    },
    /**
     * 切换分页组
     */
    pageSizes: {
      type: Array,
      default: () => [10, 20, 50, 100],
    },
    /**
     * 分页展示样式
     */
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    /**
     * 是否禁用分页
     */
    disabled: {
      type: Boolean,
      default: false,
    },
    /**
     * 只有一页时是否隐藏
     */
    hideOnSinglePage: {
      type: Boolean,
      default: false,
    },
    /**
     * 其他不常用 element pagination 具有的属性
     */
    paginationCfg: {
      type: Object,
    },
  },
  emits: [
    /**
     * 双向绑定page值，更新page值 | 回调参数: value
     */
    "update:page",
    /**
     * 双向绑定pageSize值，更新pageSize值 | 回调参数: value
     */
    "update:pageSize",
    /**
     * page改变时触发 | 回调参数: value
     */
    "page-change",
    /**
     * pageSize改变时触发 | 回调参数: value
     */
    "size-change",
    /**
     * 用户点击上一页按钮改变当前页时触发 | 回调参数: value
     */
    "prev",
    /**
     * 用户点击下一页按钮改变当前页时触发 | 回调参数: value
     */
    "next",
  ],
  setup(props, { emit }) {
    // 当前页数
    const currentPage = computed({
      get() {
        return props.page;
      },
      set(val) {
        emit("update:page", val);
      },
    });
    const currentSize = computed({
      get() {
        return props.pageSize;
      },
      set(val) {
        emit("update:pageSize", val);
      },
    });
    // page-size切换
    function handleSizeChange(val) {
      emit("size-change", val);
    }
    // page切换
    function handleCurrentChange(val) {
      emit("page-change", val);
    }
    // 用户点击上一页按钮改变当前页时触发
    function handlePrev(val) {
      emit("prev", val);
    }
    // 用户点击下一页按钮改变当前页时触发
    function handleNext(val) {
      emit("next", val);
    }

    return {
      currentPage,
      currentSize,
      handleSizeChange,
      handleCurrentChange,
      handlePrev,
      handleNext,
    };
  },
});
</script>
<style lang="scss" scoped>
@import "../../../styles/MPagination/index.scss";
</style>
