<template>
    <div>
        <div class="v-page" v-show="total > 1">
            <x-button mini @click.native="pageIndex--" :disabled="pageIndex === 1">
                <x-icon type="ios-arrow-left" size="24"></x-icon>
            </x-button>
            <x-button class="value" @click.native="show = true">{{ value }} / {{ total }}</x-button>
            <x-button mini @click.native="pageIndex++" :disabled="pageIndex === total">
                <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="pageIndex = pickerValue[0] - 0"
        ></popup-picker>
    </div>
</template>

<script>
import { XButton, PopupPicker } from 'vux'
export default {
    components: { XButton, PopupPicker },
    model: { prop: 'value', event: 'change' },
    props: {
        value: { type: Number, default: 1 }, // 当前页数
        total: { type: Number, default: 1 } // 总页数
    },
    data () {
        return {
            pageIndex: this.value, // 当前页数
            pickerValue: [this.value + ''], // 弹窗值
            show: false // 是否显示弹窗
        }
    },
    computed: {
        pickerList: vm => [...Array(vm.total)].map((n, i) => i + 1)
    },
    watch: {
        pageIndex (pageIndex) {
            this.pickerValue = [pageIndex + '']
            this.$emit('change', pageIndex)
        }
    }
}
</script>

<style lang="less" scoped>
.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>
