<template>
  <div class="w-full flex items-center justify-center mt-6">
    <div class="page-btn text-center text-xs rounded-l-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(1)">
      首页
    </div>
    <van-pagination v-model="page" class="mb-0" :page-count="totalPage" @change="handleChange">
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
    </van-pagination>
    <div class="page-btn text-center text-xs rounded-r-lg flex items-center justify-center border border-solid border-app-blue-3" @click="goPage(totalPage)">
      尾页
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { Pagination, Icon } from 'vant'
Vue.use(Pagination)
Vue.use(Icon)
export default Vue.extend({
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    totalPage: {
      type: Number,
      default: 5
    }
  },
  computed: {
    page: {
      get: function() {
        return this.currentPage
      },
      set: function() {

      }
    }
  },
  methods: {
    handleChange(v: number) {
      console.log(v)
      this.$emit('handleChange', v)
    },
    goPage(v: number) {
      this.handleChange(v)
    }
  }
})
</script>

<style scoped>
  >>> .van-pagination__item {
    min-width: 32px;
    height: 36px;
    background: #1A0270;
    color: #fff;
    border: 1px solid #35379F;
    border-right: none;
    font-size: 12px;
    flex-grow: 0
  }
  >>> .van-pagination__item--active {
    background: #0B0A44;
    color: #FFBB00;
  }

  >>> [class*=van-hairline]::after {
    border-color: #35379F
  }
</style>
