<template>
    <div class="pagination">
        <div class="pagination-btns">
        	<el-button class=" abc1" size="mini" @click="firstPage" :disabled="pageIndex==1"></el-button>
        	<el-button class=" abc2" size="mini" @click="prevPage" :disabled="pageIndex==1"></el-button>
        	<input class="pageIndex" type="text" v-model="pageIndex" @keyup="currentPageChange"/>
        	<span class="pageCount"> / {{numPages}}</span>
        	<el-button class=" abc3" size="mini" @click="nextPage" :disabled="pageIndex==numPages"></el-button>
        	<el-button class=" abc4" size="mini" @click="lastPage" :disabled="pageIndex==numPages"></el-button>
        </div>
    </div>
</template>
<script type="text/javascript">
    export default{
        name: 'Pagination',
        props: ['numPages'],
        data(){
            return {
                pageIndex: 1,
            }
        },
        created(){
        },
        mounted(){

        },
        methods: {
            firstPage(){
            	if(this.pageIndex == 1){
            		return;
            	}
            	this.pageIndex = 1;
            },
            prevPage(){
            	if(this.pageIndex == 1){
            		return;
            	}
            	this.pageIndex--;
            },
            nextPage(){
            	if(this.pageIndex == this.numPages){
            		return;
            	}
            	this.pageIndex++;
            },
            lastPage(){
            	if(this.pageIndex == this.numPages){
            		return;
            	}
            	this.pageIndex = this.numPages;
            },
            currentPageChange(){
            	let that = this;
            	if(this.pageChangeTimeId){
            		clearTimeout(this.pageChangeTimeId);
            	}
            	this.pageChangeTimeId = setTimeout( () => {
            		that.pageIndex = Number(that.pageIndex);
            		if(that.pageIndex > that.numPages) {
            			that.pageIndex = that.numPages;
            		}
            		if(that.pageIndex < 1){
            			that.pageIndex = 1;
            		}
            		that.pageChangeTimeId = '';
            	},1000);
            }
        },
        watch: {
            pageIndex(newval,oldval){
                if(newval != oldval){
                    this.$bus.emit('updatePaginationPage',newval);
                }
            }
        }
    }

</script>
<style type="text/css" scoped>
    .pagination{
   		width: 100%;
   		height: 40px;
   		line-height: 40px;
    }
    .pagination-btns{
   		margin: 0px auto;
   		padding: 0px 20px;
   		width: 240px;
    }
    .pageIndex{
        vertical-align: -2px;
   		width: 34px;
   		height: 20px;
   		font-size: 18px;
        line-height: 20px;
        text-align: center;
   		border: 1px solid #bbb;
        outline: none;
    }
    .pageCount{
   		vertical-align: -3px;
   		font-size: 18px;
    }
</style>
<style type="text/css">
    .pagination .el-button--mini,
    .pagination .el-button--mini.is-round{
        padding: 4px 5px;
    }
</style>

<style type="text/css">
     .abc1{
        background: url(/static/image/icon/1.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }
    .abc2{
        background: url(/static/image/icon/2.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }
    .abc3{
        background: url(/static/image/icon/3.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }
    .abc4{
        background: url(/static/image/icon/4.png) no-repeat center center !important;
        width: 20px;
        height: 20px;
    }

    .pagination-btns button{
        border: none !important;
        outline: none !important;
    }
</style>
