<!--
  ******       zxt      *****
  ***** 此分页为点击分页 *****
  import Pagination from '@/common/pagination/Pagination'
  用法:
  <pagination
    :pageNumber="pageNumber"
    :totalPage="totalPage"
    @handlePreClick="handlePreClick"
    @handleNextClick="handleNextClick"
    @handleChangePageSelect="handleChangePageSelect">
  </pagination>

  在父组件的data中：
    pageNumber: 1,
    pageSize: 10,
    totalPage: 1

  在父组件的methods中：
  // 分页部分
    handlePreClick () {
      this.pageNumber = this.pageNumber - 1
      this.getXXXXList() // 获取列表方法
    },
    handleChangePageSelect (val) {
      this.pageNumber = val
      this.getXXXXList() // 获取列表方法
    },
    handleNextClick () {
      this.pageNumber = this.pageNumber + 1
      this.getXXXXList() // 获取列表方法
    }
-->

<template>
    <div class="content-padded">
        <div class="v-page" v-show="totalPage > 1">
            <x-button mini @click.native="prev" :disabled="pageIndex === 1">
                <x-icon type="ios-arrow-left" size="24"></x-icon>
            </x-button>
            <x-button class="value" @click.native="show = true">{{ pageNumber }} / {{ totalPage }}</x-button>
            <x-button mini @click.native="next" :disabled="pageIndex === totalPage">
                <x-icon type="ios-arrow-right" size="24"></x-icon>
            </x-button>
        </div>

        <popup-picker
            v-model="pickerValue"
            :show.sync="show"
            :show-cell="false"
            :data="pickerList"
            :columns="1"
            @on-change="change"
        ></popup-picker>
    </div>
</template>

<script>
import { XButton, PopupPicker } from 'vux'
export default {
    components: { XButton, PopupPicker },
    props: {
        pageNumber: { type: Number, default: 1 },
        totalPage: { type: Number, default: 1 }
    },
    data () {
        return {
            pageIndex: this.pageNumber, // 当前页数
            pickerValue: [this.pageNumber + ''], // 弹窗值
            show: false // 是否显示弹窗
        }
    },
    watch: {
        pageNumber (value) {
            this.pageIndex = value
        }
    },
    computed: {
        pickerList: vm => [...Array(vm.totalPage)].map((n, i) => i + 1)
    },
    methods: {
    // 上一页
        prev () {
            this.$emit('handlePreClick')
        },
        // 下一页
        next () {
            this.$emit('handleNextClick')
        },
        // 页面改变
        change () {
            this.$emit('handleChangePageSelect', this.pickerValue[0] - 0)
        }
    }
}
</script>
<style lang="less" scoped>
.content-padded {
    margin: 0;
}
.v-page {
    // padding: 10px 15px;
    display: flex;
    justify-content: space-between;
    .weui-btn {
        margin: 0;
        padding: 0;
        height: 36px;
        line-height: 36px;
        &:first-child, &:last-child {
            width: 50px;
            padding: 6px 0;
        }
        &.value {
            width: 150px;
            min-width: 100px;
            color: #409EFF;
        }
        &[disabled] .vux-x-icon {
            fill: #C0C4CC;
        }
        &:not([disabled]) .vux-x-icon {
            fill: #409EFF;
        }
    }
}
.vux-cell-box::before {
    display: none;
}
</style>
