<template>
    <view class="pages" v-if="pages.totalPage > 1">
        <view class="uni-flex uni-row" style="justify-content: space-around;">
            <view :class="{'prohibit' : pages.page === 1} " class="btn">首页</view>
            <view class="page-arrow" @click="pageCheck(1)">
                <u-icon v-if="pages.page !== 1" name="arrow-left" size="20"></u-icon>
            </view>
            <view style="text-align: center;">
                <label style="color: #2C405A; padding-right: 4px;">{{pages.page}}</label> / {{pages.totalPage}}
            </view>
            <view class="page-arrow" @click="pageCheck(2)">
                <u-icon v-if="pages.page !== pages.totalPage" name="arrow-right" size="20"></u-icon>
            </view>
             <view :class="{'prohibit' : pages.page === pages.totalPage} " class="btn">尾页</view>
        </view>
    </view>
</template>

<script>
    export default {
        props:{
            pages:{
                type:Object,
                default :()=>{return{page:1,totalPage:0}}
            },
            type:'invest'
        },
        data() {
            return {
                
            }
        },
        methods: {
            pageCheck(pageType){
                let page = this.pages.page
                if(pageType === 1 && this.pages.page > 1){
                    page--
                }else if(pageType === 2 && this.pages.page < this.pages.totalPage){
                     page++
                }
                this.$emit('pageFun',page)
            },
        }
    }
</script>

<style lang="scss">
.pages{
    padding: 12px 0; 
    height: 32px; 
    line-height: 32px;
    .page-arrow{
        justify-items: center; 
        padding-top: 6px;
    }
    .prohibit{
        color: #A4A4A4;
    }
}
</style>
