<!--分页组件-->
<script setup lang="ts">
import type { ComponentSize } from 'element-plus'
import type {CmsArticleParam} from "~/api/cms/cmsArticle/model";
import {useIsMobile} from "~/composables/configState";

const props = withDefaults(
    defineProps<{
      data?: any;
      total?: number;
      size?: ComponentSize;
      pageSize?: number;
    }>(),
    {}
);

const emit = defineEmits<{
  (e: 'done', params: CmsArticleParam): void;
  (e: 'update:visible', visible: boolean): void;
}>();

const i18n = useI18n();
// const size = ref<ComponentSize>('default');
const disabled = ref<boolean>(false);
const background = ref(true);
const mobile = useIsMobile();

// 搜索表单
const where = reactive<CmsArticleParam>({
  keywords: '',
  page: 1,
  limit: props.pageSize || 12,
  status: 0,
  parentId: undefined,
  categoryId: undefined,
  lang: i18n.locale.value
});

// 加载数据
const reload = async () => {
  emit('done',where);
};
</script>

<template>
  <div class="pagination flex py-5 items-center" :class="mobile ? 'justify-center' : 'justify-between'">
    <span class="text-sm pl-2" v-if="!mobile">
        {{ $t('pagination.total') }} {{ total }} {{ $t('pagination.unit') }} {{ $t('pagination.perPage') }}{{ where.limit }}{{ $t('pagination.unit') }} {{ where.page }}/{{ Math.ceil(Number(total) / Number(where.limit)) }}
    </span>
    <el-pagination
        v-model:current-page="where.page"
        v-model:page-size="where.limit"
        :size="size"
        :disabled="disabled"
        :background="background"
        layout="prev, pager, next"
        :total="total"
        @currentChange="reload"
    />
  </div>
</template>

<style scoped lang="scss">

</style>
