<script setup>
import { onMounted, ref, computed, watch } from 'vue'
const emit = defineEmits(['maxPage', 'clickHandle', 'input'])
const props = defineProps({
  current: {
    type: Number,
    default: 1
  },
  reindex: {
    type: Number,
    default: 1
  },
  total: {
    type: Number,
    default: 10
  },
  equable: {
    type: Number,
    default: 10
  },
  length: {
    type: Number,
    default: 5
  },
  value: {
    type: Number,
    default: 1
  },
  color: {
    type: String,
    default: '#2d2d2d'
  }
})
const index = ref(props.value)
const maxPage = computed(() => {
  let val = Math.ceil(props.total / props.equable)
  emit('maxPage', val)
  return val
})
const pages = computed(() => {
  return getPageNumArr(props.length, index.value, maxPage.value)
})
// const useUser = useUserStore()
// useUser.getInfo()
// 监听过滤数据变化更新总数
watch(()=> index.value, (newVal) => {
  emit('input', newVal)
})
watch(()=> props.current, (newVal) => {
  index.value = newVal
})
watch(()=> props.total, (newVal) => {
  if (index.value > maxPage.value) {
    index.value = maxPage.value
    clickHandle(maxPage.value)
  }
})
onMounted(() => {
  emit('maxPage', maxPage)
})
function clickHandle(indexs) {
  if (indexs > 0 && indexs <= maxPage.value) {
    index.value = indexs
  }
  emit('clickHandle', index.value)
}
function getPageNumArr(showPageMaxCount, pageNow, pageCount) {
  let pageNumArr = []
  let pageNumBegin, pageNumEnd

  if (pageCount <= showPageMaxCount) {
    pageNumBegin = 1
    pageNumEnd = pageCount
  } else {
    if (pageNow <= Math.floor(showPageMaxCount / 2)) {
      pageNumBegin = 1
      pageNumEnd = showPageMaxCount
    } else if (pageCount - pageNow <= Math.floor(showPageMaxCount / 2)) {
      pageNumBegin = pageCount - showPageMaxCount
      pageNumEnd = pageCount
      pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
    } else {
      pageNumBegin = Math.ceil(pageNow - showPageMaxCount / 2)
      pageNumEnd = Math.floor(pageNow + showPageMaxCount / 2)
      pageNumEnd - pageNumBegin >= showPageMaxCount && pageNumBegin++
    }
  }
  for (let i = pageNumBegin; i <= pageNumEnd; i++) {
    pageNumArr.push(i)
  }

  return pageNumArr
}
</script>
<template>
  <div class="layout">
    <!-- <a class="next-page pre-page" v-if="index>1" @click="clickHandle(index - 1)"></a> -->
    <a class="page-item" @click="clickHandle(1)" :class="{ active: index === 1 }">1</a
    ><a class="page-item more" @click="clickHandle(current - 3)" v-if="pages[0] - 2 >= 1">...</a
    ><a
      v-show="page !== maxPage && page !== 1"
      v-for="page in pages"
      :key="page"
      @click="clickHandle(page)"
      class="page-item"
      :class="{ active: index === page }"
      >{{ page }}</a
    ><a
      class="more page-item"
      @click="clickHandle(pages[pages.length - 1] + 2)"
      v-if="maxPage > 1 && pages[pages.length - 1] + 2 <= maxPage"
      >...</a
    ><a
      @click="clickHandle(maxPage)"
      class="page-item"
      v-if="maxPage !== 1"
      :class="{ active: index === maxPage }"
      >{{ maxPage }}</a
    >
    <a
      v-show="index !== maxPage"
      class="next-page next-page-item"
      @click="clickHandle(index + 1)"
    ></a>
  </div>
</template>

<style scoped>
.layout .more:hover::after {
  transform: scaleX(0) !important;
}
.layout .next-page-item:hover::before {
  transform: scaleX(2);
}
.layout .next-page-item:hover::after {
  transform: translateX(5px);
}
.layout .next-page-item::before {
  background-color: #111;
  height: 2px;
  width: 8px;
  transform-origin: 0 0;
}
.layout .next-page-item::after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent #011111;
}
.layout .pre-page::after {
  transform-origin: 100% 0;
}
.layout .pre-page:hover::after {
  transform: scaleX(2);
  transform-origin: 100% 0;
}
.layout .pre-page:hover::before {
  transform: translateX(-5px);
}
.layout .pre-page::after {
  background-color: #111;
  height: 2px;
  width: 8px;
}
.layout .pre-page::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 8px 5px 0;
  border-color: transparent #011111 transparent transparent;
}
.layout {
  /* text-align: left; */
  margin-top: 0;
  /* margin-left: 30px; */
}
.layout a {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 32px;
}
.layout a:not(:last-child) {
  margin: 10px 8px;
  font-size: 16px;
  display: inline-block;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  color: #323233;
  position: relative;
  transition: color 0.3s;
}
.layout a:last-child {
  position: relative;
  top: -5px;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
  align-items: center;
  height: 22px;
  padding: 0 9.6px;
  padding: 0 0.6rem;
}
.layout a:last-child::before,
.layout a:last-child::after {
  content: '';
  display: inline-block;
  will-change: transform;
  transition: transform 0.3s;
}

.layout a:not(:last-child).active,
.layout a:not(:last-child):hover {
  color: #fff;
  transform: scaleX(1);
  background: #323233;
}

.layout a:not(:last-child)::after {
  content: '';
  height: 3px;
  width: 140%;
  background-color: #111;
  display: block;
  margin-left: -20%;
  margin-top: 3px;
  transform-origin: 50% 50%;
  transform: scaleX(0);
  will-change: transform;
  transition: transform 0.3s;
}

/* .layout {
  text-align: center;
}

.layout a {
  margin: 10px;
  font-size: 18px;
  display: inline-block;
  cursor: pointer;
  user-select: none;
  color: #2d2d2d;

}

.layout a.active,
.layout a:hover {
  color: #111111;
  border-bottom: 2px solid #111;
} */
</style>
