<!--
  @name: 分页
  @description: -
  @author 张文
  @date: 2022-01-20
-->
<template>
  <div v-if="show" class="ty-global-flex-center ty-page-num-box">
    <van-pagination
      v-model="pageNum"
      :total-items="pageTotal"
      :items-per-page="pageSize"
      :show-page-size="showPageSize"
      :mode="mode"
      :force-ellipses="forceEllipses"
      :prev-text="prevText"
      :next-text="nextText"
      :page-count="pageCount"
      @change="pageChange"
    >
      <template #prev-text>
        <slot name="prev-text">
          <van-icon v-if="!prevText" name="arrow-left" />
        </slot>
      </template>
      <template #next-text>
        <slot name="next-text">
          <van-icon v-if="!nextText" name="arrow" />
        </slot>
      </template>
    </van-pagination>
  </div>
</template>

<script>

export default {
  name: "tyPages",
  props:{
    // 当前页码
    value: {
      type:Number,
      default:1
    },
    // 数据总条数
    pageTotal: {
      type:Number,
      default: 0
    },
    // 每页条数
    pageSize: {
      type:Number,
      default:10
    },
    // 底部显示的分页数量
    showPageSize: {
      type:Number,
      default:4
    },
    //显示模式
    mode:{
      type:String,
      default: 'multi'
    },
    // 上一页的文字
    prevText:String,
    // 下一页的文字
    nextText:String,
    // 总页数
    pageCount:[String,Number],
    // 是否显示省略号
    forceEllipses:{
      type:Boolean,
      default:true
    },
    // 点击分页切换时，是否滚动到页面顶部，默认滚动到顶部
    scrollTop:{
      type:Boolean,
      default:true
    },
    // 滚动到顶部的元素
    scrollElement:{
      type:String,
      default:'#app'
    },

    // 当内容小于一页时是否显示分页组件
    hide:{
      type: Boolean,
      default: true
    }
  },
  computed:{
    pageNum:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input',v)
      }
    },
    show(){

      if (this.pageCount){
        return this.pageCount > 1  || !this.hide
      }

      return this.pageTotal > this.pageSize  || !this.hide
    }
  },
  data() {
    return {}
  },
  methods: {
    // 页码发生改变
    pageChange(page){
      this.$emit('change', page)

      if (this.scrollTop){
        const dom = document.querySelector(this.scrollElement)
        dom && dom.scrollIntoView({
          behavior: "smooth",
          block:'start',
        });
      }
    }
  }
}
</script>

<style scoped lang="less">

@import "../../assets/css/var.less";



.ty-page-num-box{
  margin: 20px 0 10px;

  /deep/.van-pagination__item{
    color: @baseColor;
    background: #fff;
    height: 30px;
    min-width: 30px;
    border-radius: 6px;
    border: solid 1px @baseColor;
    flex-basis: 0;
    flex-grow: 0;

    &+.van-pagination__item{
      margin-left: 10px;
    }

    &::after{
      border-width: 0;
    }

    &:active{
      background: #c8c9cc;
    }


  }

  /deep/.van-pagination__item--disabled{
    color: #646566;
    background-color: #e5e7eb;
    cursor: not-allowed;
    opacity: 0.5;
    border-color: #ccc;
  }

  /deep/.van-pagination__item--active{
    background-color: @baseColor;
    color: #fff;
    font-weight: bold;
  }

  /deep/.van-pagination__page-desc{
    height: 30px;
    border-bottom: solid 1px @baseColor;
    box-sizing: border-box;
    margin: 0 10px;
  }
}

</style>
