<template>
  <div class="list">
    <p class="title">此处12个XXXX</p>
    <div class="wrapper">
      <div v-for="(item, i) in list" :key="i" class="item">
        <p>{{ item.name }}</p>
        <span>{{ item.address }}</span>
        <n-icon class="icon" size=".12rem" color="#dd505E">
          <ArrowForward />
        </n-icon>
      </div>
    </div>
    <div v-if="pagination" class="pagination">
      <n-icon size=".2rem" class="btn" @click="prePage">
        <ChevronBack />
      </n-icon>
      <p>
        <n-input-number
          v-model:value="curPage"
          class="page"
          :show-button="false"
          size="small"
          :min="1"
          :max="pageSize"
          :placeholder="null"
          :on-blur="toInt"
          @keydown.enter="fetchPage"
        />
        <span>/</span>
        <span>{{ pageSize }}</span>
      </p>
      <n-icon size=".2rem" class="btn" @click="nextPage">
        <ChevronForward />
      </n-icon>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ArrowForward, ChevronBack, ChevronForward } from '@vicons/ionicons5'
import { PropType, ref } from 'vue'
import useDebounce from '@/hooks/useDebounce'
const props = defineProps({
  pagination: {
    type: Boolean as PropType<boolean>,
    default: false,
  },
})
const list = [
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
  { name: '某某社区党组织', address: '上海市浦东新区327号' },
]
const pageSize = ref(999)
const curPage = ref(1)
const toInt = () => {
  if (curPage.value % 1 !== 0) {
    curPage.value = Math.floor(curPage.value)
  }
}
const fetchPage = useDebounce(() => {
  // TODO
  toInt()
  console.log('----', curPage.value)
})
const prePage = () => {
  curPage.value -= 1
  if (curPage.value <= 0) {
    curPage.value = 1
    return
  }
  fetchPage()
}
const nextPage = () => {
  curPage.value += 1
  if (curPage.value > pageSize.value) {
    curPage.value = pageSize.value
    return
  }
  fetchPage()
}
</script>

<style lang="stylus" scoped>
@import '../../components/MyComponent/main.styl'

.list
  background $bg
  $blur()
  border-radius .04rem
  box-sizing border-box
  padding .1rem .08rem
  width 3rem
  max-height 50vh
  display flex
  flex-direction column
  .title
    font-size .12rem
    border-bottom .01rem solid rgba(0,0,0,.06)
    padding 0 .08rem .05rem
  .wrapper
    flex 1
    padding-bottom .1rem
    overflow-y auto
  .item
    border-radius .03rem
    position relative
    background transparent
    cursor pointer
    box-sizing border-box
    padding .05rem .08rem
    p
      font-family $font-ping-medium
      $text-overflow()
    span
      color $gray
      $text-overflow()
    .icon
      display none
      position absolute
      top 0
      bottom 0
      right 0
      margin auto .1rem
    &:hover
      background $light-red
      &>.icon
        display inline-block
  .pagination
    $center()
    p
      width 30%
      $flex-align()
      justify-content space-around
      margin 0 .15rem
     .page
        text-align center
        width .4rem
    .btn
      color rgba(0,0,0,0.35)
      cursor pointer
      border-radius .03rem
      &:hover
        color $red
        background $light-red
</style>
<style lang="stylus">
.pagination
  .n-input
    border-radius .05rem
    .n-input__input-el
      height .2rem
</style>
