<template>
    <view>
        <view class="ul">
            <view v-if='curpage>1' @click="curpage--,pageClick()" class="but">上一頁</view>
            <view v-if='curpage==1' class="but">上一頁</view>
            <view class="num" @click="btnClick(i)" :class="{'active':curpage==i}" v-for="i in indexs" :key="i">{{i}}</view>
            <view  @click="curpage++,pageClick()"  v-if='curpage!=allNum' class="but">下一頁</view>
            <view v-if='curpage==allNum' class="but">下一頁</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                index:1,
                allNum:20,
                curpage:1,
                totalPage:0
                
            }
        },
        methods: {
            pageClick(){
                // this
                console.log(this.curpage)
            },
            btnClick(i){
                if(this.curpage!=i){
                    this.curpage=i
                }
            }
        },
        computed:{
            indexs:function(){
                let that=this;
                let left=1;
                let right=this.allNum;
                let arr=[];
                if(that.allNum>=5){
                    if(that.curpage>3&&that.curpage<that.allNum-2){
                        left=that.curpage-2;
                        right=that.curpage+2;
                    }else{
                        if(that.curpage<=3){
                            left=1;
                            right=5;
                            console.log(66666666666)
                        }else{
                            left=that.allNum-4;
                            right=that.allNum
                            console.log(777777777777)
                        }
                    }
                }
                while(left<=right){
                    arr.push(left)
                    left++
                }
                return arr
            }
        }
    }
</script>

<style>
    .ul{
        width: 100vw;
        display: flex;
    }
    .but{
        width:100px;
        height: 20px;
    
    }
    .num{
        width:80px;
        text-align: center;
        
    }
    .but,.num{
        border: 1px solid rgba(0,0,0,.2);
        height: 50px;
        line-height: 50px;
        text-align: center; 
        margin: 0 6px;
        font-size: 14px;
    }
    .active{
        background-color: #337AB7;
        color: white;
    }

</style>