<template>
  <div class="Pagination-box">
    <div class="left-total" v-show="ShowTotal">共{{ total }}条数据</div>
    <div class="right-page" :class="{ hasShow: !ShowTotal }">
      <NuxtLink
        :to="CurrentRouting(pageNum - 1 == 0 ? pageNum : pageNum - 1)"
        @click="updatePage(pageNum - 1 == 0 ? pageNum : pageNum - 1)"
      >
        <ChevronLeftIcon
          class="icon"
          :style="{
            color: pageNum == 1 ? 'rgb(201,205,212)' : 'rgb(78,89,105)',
          }"
        />
      </NuxtLink>

      <div v-if="totalPage > 1" class="page-btns">
        <NuxtLink
          :to="CurrentRouting(item['value'])"
          :class="{ active: item['value'] == pageNum }"
          v-for="item in pageBtns"
          :key="item"
          @click="updatePage(item['value'])"
        >
          {{ item['value'] }}
        </NuxtLink>
        <span v-show="totalPage > continues">...</span>
        <!-- 最后一个 -->
        <NuxtLink
          class="last-page"
          :class="{ active: totalPage == pageNum }"
          :to="CurrentRouting(totalPage)"
          @click="updatePage(totalPage)"
        >
          {{ totalPage }}
        </NuxtLink>
      </div>
      <div v-else class="page-btns">
        <NuxtLink :class="{ active: pageNum == 1 }">1</NuxtLink>
      </div>
      <NuxtLink
        :to="CurrentRouting(pageNum == totalPage ? pageNum : pageNum + 1)"
        @click="updatePage(pageNum == totalPage ? pageNum : pageNum + 1)"
      >
        <ChevronRightIcon
          class="icon"
          :style="{
            color: pageNum == totalPage ? 'rgb(201,205,212)' : 'rgb(78,89,105)',
          }"
        />
      </NuxtLink>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ChevronLeftIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
import { filterChainObj } from '~~/constants/UnifiedManagementChain';
const props = defineProps({
  // 当前页数
  pageNum: {
    type: Number,
    default: 1,
  },
  //   分页大小
  pageSize: {
    type: Number,
    default: 100,
  },
  //   总数
  total: {
    type: Number,
    default: 0,
  },
  //   展示的按钮个数
  continues: {
    type: Number,
    default: 3,
  },
  //   ShowTotal--是否显示total
  ShowTotal: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(['pageChange']);
const pageBtns: any = reactive([]);
const chain = useChain();
// 总页数
const totalPage: any = computed(() => Math.ceil(props.total / props.pageSize));
// 计算
const startNumAndEndNum = () => {
  // 解构赋值
  const { pageNum, total, continues } = props;
  //先定义两个变量存储起始数字与结束数字
  let start = 0,
    end = 0;
  // 当pageNum小于5时
  if (totalPage.value < continues) {
    start = 1;
    end = totalPage.value;
  } else {
    //起始数字
    start = pageNum - Math.floor(continues / 2);
    //结束数字
    end = pageNum + Math.floor(continues / 2);
    if (start < 1) {
      start = 1;
      end = continues;
    }
    if (end > totalPage.value) {
      end = totalPage.value;
      start = totalPage.value - continues;
    }
  }
  return { start, end };
};

// 动态计算页面路由
const CurrentRouting = computed((value: any) => {
  return function (value: any) {
    let Obj = filterChainObj('value', chain.value);
    if (Obj) {
      return `/${Obj.name}/${value}`;
    }
  };
});
watch(
  () => [props.total, props.pageNum],
  (v) => {
    // 总量变化重新获取分页符
    pageBtns.length = 0;
    let add = startNumAndEndNum();
    for (let i: any = add.start; i < add.end; i++) {
      pageBtns.push({
        value: i,
      });
    }
  },
  {
    immediate: true,
  }
);

// 分页点击事件
const updatePage = (value: number) => {
  if (props.pageNum === value) {
    return;
  }
  emit('pageChange', value);
};
</script>

<style lang="less" scoped>
@import '@/style/flex.less';
.Pagination-box {
  width: 100%;
  height: 80px;
  background: var(--td--right-back-color-2);
  .dja(space-between,center);
  .left-total,
  .right-page {
    .dja();
    .icon {
      width: 22px;
      height: 22px;
      cursor: pointer;
    }
  }
  //   如果total隐藏--就将分页器居中显示
  .hasShow {
    width: 100%;
  }
  .left-total {
    padding-left: 12px;
    font-size: 14px;
  }
  .right-page {
    padding-right: 12px;
    .page-btns {
      .dja();
      a {
        margin: 0 6px;
        display: block;
        text-decoration: none;
        width: auto;
        text-align: center;
        color: var(--td-search-btn-back-1);
        border-radius: 2px;
        font-size: 12px;
        border-width: 1px;
        padding: 2px 9px 2px 9px;
        background-color: var(--td--right-back-color-2);
        border: 1px solid var(--td-Search-popup-back-color);
        &:hover {
          background-color: var(--td--main-btn-color-1);
          color: white;
          border-radius: 2px;
          transition: all 0.3s;
        }
      }
      .active {
        background: var(--td--main-btn-color-1);
        color: white;
        border: 1px solid var(--td--main-btn-color-1);
      }
    }
  }
}
</style>
