<template>
    <div>
        <el-button :disabled="isFirstDisabled"
                   @click="toFirstPage" size="mini">
            &lt;&lt;
        </el-button>
        <el-pagination
                layout="prev, pager, next"
                :page-size="rows"
                :total="total"
                :current-page.sync="current"
                style="display: inline-block;padding-right: 0;">
        </el-pagination>
        <el-button :disabled="isLastDisabled"
                   @click="toLastPage" size="mini">
            &gt;&gt;
        </el-button>
        <el-pagination
                layout=""
                :page-size="rows"
                :total="total"
                :current-page.sync="current"
                style="display: inline-block;padding-left: 0;">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        data() {
            return {
                current: 1
            }
        },
        props: {
            currentPage: {
                type: Number,
                default: 2
            },
            rows: {
                type: Number,
                default: 10
            },
            total: {
                type: Number,
                default: 0
            },

        },
        methods: {
            handleCurrentChange(page) {
                this.$emit("handleCurrentChangeSub", page);
            },
            toFirstPage() {
                this.current = 1;
            },
            toLastPage() {
                this.current = this.totalPage;
            }
        },
        watch: {
            currentPage(val) {
                this.current = val;
            },
            current(val) {
                this.handleCurrentChange(val);
            }
        },
        computed: {
            totalPage() {
                return Math.ceil(this.total / this.rows);
            },
            isLastDisabled() {
                if (this.totalPage <= 0) {
                    return true;
                }
                return this.current == this.totalPage ? true : false;
            },
            isFirstDisabled() {
                return this.current == 1 ? true : false;
            }
        }
    }
</script>

<style scoped>
/deep/.el-pager li.active {
    color: #fff;
    background-color: #E9021D;
}
/deep/.el-pager li.active:hover {
    color: #fff;
}
/deep/.el-pager li:hover {
    color: #E9021D;
}
/deep/.el-button:focus, /deep/.el-button:hover {
    color: #fff;
    background-color: #E9021D;
}


</style>
