<!--
  分页组件
  @author: 张文
  @date: 2022-07-18
-->
<template>
  <div v-if="pageTotal !== 0" class="ty-global-flex-between pagination-box">

    <!-- 统计信息 -->
    <div>
      <span>{{ $tyLanguage.get('wms_project.pda.components.ui.Pagination.kzdeljrg','共') }}</span>
      <span class="ty-global-value-bold">{{ pageTotal }}</span>
      <span>{{ $tyLanguage.get('wms_project.pda.components.ui.Pagination.jckytjtx','条') }}</span>
    </div>

    <!-- 每页的数据条数 -->
    <div
      class="ty-global-click-style"
      @click="changSizePopupShow=true"
    >
      <span style="margin-right: 5px">{{ size }} {{ $tyLanguage.get('wms_project.pda.components.ui.Pagination.ymqlzcsc','条/页') }}</span>
      <van-icon name="arrow-down" />
    </div>

    <!-- 页码切换 -->
    <div
      class="ty-global-flex-between"
      style="min-width: 40%"
    >
      <!-- 上一页 -->
      <div
        :class="[isMin ? 'no-click' : 'ty-global-click-style']"
         @click="leftClick"
      >
        <slot name="prevBtn">
          {{ prevText }}
          <van-icon v-if="!prevText" name="arrow-left" />
        </slot>
      </div>

      <!-- 页面指示 -->
      <div
        class="ty-global-click-style"
        @click="pageNumPopupShow=true"
      >
        <span class="ty-global-value-bold-red">{{ num }}</span>
        <span> / </span>
        <span class="ty-global-value-bold">{{ allPageNum }}</span>
      </div>

      <!-- 下一页 -->
      <div
        :class="[isMax ? 'no-click' : 'ty-global-click-style']"
        @click="rightClick"
      >
        <slot name="nextBtn">
          {{ nextText }}
          <van-icon v-if="!nextText" name="arrow" />
        </slot>
      </div>
    </div>



    <!-- 调整页码条数的弹框-->
    <ty-popup-radio
      :title="$tyLanguage.get('wms_project.pda.components.ui.Pagination.eezadkoh','调整数据条数')"
      v-model="changSizePopupShow"
      :columns="pageSizeList"
      @confirm="confirmSize"
    />

    <!-- 调整页码的弹框-->
    <ty-popup-radio
      :title="$tyLanguage.get('wms_project.pda.components.ui.Pagination.qijgqhla','快速跳转')"
      v-model="pageNumPopupShow"
      :columns="pageNumList"
      @confirm="confirmNum"
    />


  </div>
</template>

<script>

export default {
  name: "tyPagination",
  props:{
    // 当前页
    value:{
      type: Number,
      default: 1
    },

    // 总条数
    pageTotal: {
      type: Number,
      default: 0
    },

    // 每页大小
    pageSize: {
      type: Number,
      default: 10
    },

    // 每页显示条数
    pageSizes:{
      type: Array,
      default: () => [10, 20, 30]
    },

    // 点击分页切换时，是否滚动到页面顶部，默认滚动到顶部
    scrollTop:{
      type:Boolean,
      default:true
    },
    // 滚动到顶部的元素
    scrollElement:{
      type:String,
      default:'#app'
    },

    // 上一页按钮文字
    prevText: String,
    // 下一页按钮文字
    nextText: String
  },
  computed:{

    // 当前页
    num:{
      get(){
        return this.value
      },
      set(v){
        this.$emit('input', v)
      }
    },

    // 总页码
    allPageNum(){
      return Math.ceil(this.pageTotal / this.size)
    },

    // 分页大小
    size:{
      get(){
        return this.pageSize
      },
      set(v){
        this.$emit('update:pageSize', v)
      }
    },

    // 总页码列表
    pageNumList(){
      let list = []
      for (let i = 1; i <= this.allPageNum; i++) {
        list.push({
          value: i,
          label: i
        })
      }
      return list
    },

    // 页面条数可选项列表
    pageSizeList(){
      return this.pageSizes.map(item=>{
        return {
          label: item + this.$tyLanguage.get('wms_project.pda.components.ui.Pagination.ymqlzcsc','条/页'),
          value: item
        }
      })
    },

    // 是否是最大页码
    isMax(){
      return this.allPageNum <= this.num
    },

    // 是否是最小页码
    isMin(){
      return this.num === 1
    }
  },
  data() {
    return {
      // 调整数据条数的弹框
      changSizePopupShow: false,

      // 调整页码的弹框
      pageNumPopupShow: false
    }
  },
  methods: {
    // 页码、分页大小发生改变
    pageChange(){
      this.$nextTick(()=>{
        this.$emit('change', {
          pageSize: this.size,
          pageNum: this.num
        })
      })

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

    },

    // 左边按钮点击
    leftClick(){
      if (this.isMin) return
      this.num--
      this.pageChange()
    },

    // 右边按钮点击
    rightClick(){
      if (this.isMax) return
      this.num++
      this.pageChange()
    },

    // 确认页面数据条数
    confirmSize(item){
      this.size = item.value

      this.$nextTick(()=>{
        if (this.allPageNum < this.num){
          this.num = this.allPageNum
        }

        this.pageChange()
      })
    },

    // 确认页面跳转页数
    confirmNum(item){
      this.num = item.value
      this.pageChange()
    }


  }
}
</script>

<style scoped lang="less">
@import "./../../assets/css/var.less";
.pagination-box{
  margin: 15px auto 5px;
  max-width: 300px;
  font-size: 14px;

  .ty-global-value-bold{
    display: inline-block;
    margin: 0 3px;
  }
}

// 禁止点击
.no-click{
  cursor: no-drop;
  color: #c0c4cc;
}
</style>
