<template>
  <div class="def-pagination" :style="{ justifyContent: cAlign }">
    <el-pagination
      v-model:currentPage="currentPageVal"
      v-model:page-size="pageSizeVal"
      :total="totalVal"
      :page-sizes="[10, 15, 20, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      v-bind="$attrs"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref, PropType, computed, watch } from 'vue'
import { IElPagination } from './types'

type TAlign = 'left' | 'center' | 'right'
export interface IPropsPagination extends IElPagination {
  align?: TAlign
}

/* 参数声明 */
const props = defineProps({
  currentPage: {
    // 当前页码
    type: Number,
    required: true
  },
  pageSize: {
    // 每页条数
    type: Number,
    required: true
  },
  total: {
    // 总条数
    type: Number,
    default: 0
  },
  align: {
    // 分页组件对齐方式
    type: String as PropType<TAlign>,
    default: 'center'
  }
})
const emits = defineEmits(['update:currentPage', 'update:pageSize', 'getList'])

const currentPageVal = ref(props.currentPage)
const pageSizeVal = ref(props.pageSize)
const totalVal = ref(props.total)

watch(
  () => props.total,
  (total) => {
    totalVal.value = total
  }
)

// 分页对齐方式计算
const cAlign = computed(() => {
  let align = ''
  if (props.align === 'left') {
    align = 'flex-start'
  } else if (props.align === 'center') {
    align = 'center'
  } else if (props.align === 'right') {
    align = 'flex-end'
  }
  return align
})

// 页码改变
const handleCurrentChange = (currentPage: number) => {
  currentPageVal.value = currentPage
  emits('update:currentPage', currentPage)
  emits('getList')
}
// 每页条数改变
const handleSizeChange = (pageSize: number) => {
  pageSizeVal.value = pageSize
  emits('update:pageSize', pageSize)
  emits('getList')
}
</script>

<style scoped lang="scss">
.def-pagination {
  @include flexRow;

  padding: 30px 0;
}
</style>
