<!-- eslint-disable vue/no-mutating-props -->
<!--
 * @Author: Devin
 * @Date: 2022-11-16 09:56:37
 * @LastEditors: Devin
 * @LastEditTime: 2023-02-22 14:47:21
 * @Description: 公共页码
-->
<template>
  <el-pagination
    v-model:currentPage="pageData.num"
    v-model:page-size="pageData.size"
    :total="page.total"
    :page-sizes="pageSizes"
    v-bind="pageAttrs"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>

<script setup>
import { ref, watch } from 'vue';

const emits = defineEmits(['handleSizeChange', 'handleCurrentChange']);
const props = defineProps({
  pageAttrs: {
    type: Object,
    default: () => {
      return {
        background: true,
        layout: 'sizes, prev, pager, next',
        small: false
      };
    }
  },
  pageSizes: {
    type: Array,
    default: () => [10, 20, 50, 100]
  },
  page: {
    type: Object,
    default: () => {
      return {
        num: 1,
        size: 10,
        total: 0
      };
    }
  }
});
const pageData = ref(props.page);
watch(
  props?.page,
  () => {
    pageData.value = props.page;
  },
  { deep: true }
);
const handleSizeChange = (val) => {
  emits('handleSizeChange', val);
};

const handleCurrentChange = (val) => {
  emits('handleCurrentChange', val);
};
</script>

<script>
export default {
  name: 'CommonPagenation'
};
</script>

<style lang="scss" scoped>
.el-pagination {
  flex-shrink: 0 !important;
  padding: 0px 20px 20px 0;
  display: flex;
  justify-content: flex-end;
  // background-color: #fff;
}
.el-pagination {
  :deep(.number),
  :deep(.btn-prev),
  :deep(.btn-next) {
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 3px !important;
    background: #fff !important;
    font-size: 14px;
    color: rgba(0, 0, 0, 1) !important;
  }
  :deep(.btn-prev) {
    margin-right: 11px !important;
  }
  :deep(.el-pagination__sizes) {
    margin: 0 16px;
  }
  :deep(.el-pagination__jump) {
    margin: 0;
  }
  :deep(.el-pager) {
    .is-active {
      color: #2d98ff !important;
      font-weight: normal !important;
    }
  }
  :deep(.el-pagination__editor) {
    margin: 0 6px;
  }
}
.page-right {
  .jumper {
    width: 30px;
    height: 30px;
    border-radius: 3px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    text-align: center;
    font-size: 14px;
  }
}
</style>