/**
 * create with webstorm
 * author: daxiu huang
 * createtime: 2017/9/6 10:21
 */
//分页组件
var pagecomponent = vue.extend({
    template: `<nav aria-label="page navigation">
        <ul class="pagination">
            <li :class="{\'disabled\':curpage==1}">
                <a href="javascript:;" @click="gopage(curpage==1?1:curpage-1)" aria-label="previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <li v-for="page in showpagebtn" :class="{\'active\':page==curpage}">
                <a href="javascript:;" v-if="page" @click="gopage(page)">{{page}}</a>
                <a href="javascript:;" v-else>···</a>
            </li>
            <li :class="{\'disabled\':curpage==pages}">
                <a href="javascript:;" @click="gopage(curpage==pages?pages:curpage+1)" aria-label="next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>`,
    props: {
        pages: {
            type: number,
            default: 1
        },
        current: {
            type: number,
            default: 1
        }
    },
    data(){
        return{
            curpage:1
        }
    },
    computed: {
        showpagebtn() {
            let pagenum = this.pages;
            let index = this.curpage;
            let arr = [];
            if (pagenum <= 5) {
                for (let i = 1; i <= pagenum; i++) {
                    arr.push(i)
                }
                return arr
            }
            if (index <= 2) return [1, 2, 3, 0, pagenum];
            if (index >= pagenum - 1) return [1, 0, pagenum - 2, pagenum - 1, pagenum];
            if (index === 3) return [1, 2, 3, 4, 0, pagenum];
            if (index === pagenum - 2) return [1, 0, pagenum - 3, pagenum - 2, pagenum - 1, pagenum];
            return [1, 0, index - 1, index, index + 1, 0, pagenum];
        }
    },
    methods: {
        gopage(page) {
            if (page != this.curpage) {
                //console.log(page);
                this.curpage = page;
                this.$emit('navpage', this.curpage);
            }else{
                //console.log('already in the current page');
            }
        }
    }
});
vue.component('navigation', pagecomponent);