<template>
    <div class="pagination">
        <button style="background-color: #ffff">共 {{ total }} 条</button>
        <el-select v-model="currentpageSize" placeholder="请选择" style="width: 100px;margin-right:16px" size="mini"
            @change="changesize">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
        </el-select>
        <button @click="updateCPage(currentPage - 1)" :disabled="currentPage <= 1">上一页</button>
        <button v-if="startEnd.start > 1" @click="updateCPage(1)">1</button>
        <button v-if="startEnd.start > 2" icon="el-icon-more" @click="updateCPage(currentPage - 5)"
            :class="[quickprevIconClass, { buttonactive: quickprevIconClass == 'el-icon-d-arrow-left' }]"
            @mouseenter="onMouseenter('left')" @mouseleave="quickprevIconClass = 'el-icon-more'">
        </button>
        <template v-for="(item, index) in totalPage">
            <button :class="{ active: Number(currentPage) === item }" :key="index"
                v-if="item >= startEnd.start && item <= startEnd.end" @click="updateCPage(item)">{{ item }}</button>
        </template>
        <button v-if="startEnd.end < totalPage - 1" icon="el-icon-more"
            :class="[quicknextIconClass, { buttonactive: quicknextIconClass == 'el-icon-d-arrow-right' }]"
            @click="updateCPage(currentPage + 5)" @mouseenter="onMouseenter('right')"
            @mouseleave="quicknextIconClass = 'el-icon-more'">
        </button>
        <button v-if="startEnd.end < totalPage" @click="updateCPage(totalPage)">{{ totalPage }}</button>
        <button @click="updateCPage(currentPage + 1)" :disabled="currentPage >= totalPage">下一页</button>
        <span style="margin-left:16px">
            前往
            <el-input v-model="page" min="1" :max="totalPage" style="width: 50px;margin:0 6px;" size="mini"
                @focus="foucus" @keyup.enter.native="blur" @blur="blur"></el-input>
            页
        </span>
    </div>
</template>

<script>
export default {
    /*
       1. total,总条数 (外部使用Pagination组件的区域传递进来的数据)
       2. pageSize,每页显示多少条(外部使用Pagination组件的区域传递进来的数据)
       3. totalPage, 根据1,2派生出总页数
       4. lxyms,连续页码数(外部使用Pagination组件的区域传递进来的数据)
       5. currentPage,当前页(内部数据)
       6. startEnd,连续页码的起始页 & 最终页
       7. indexFromWrap: 外部逻辑传入的当前页下标
   */
    name: "Pagination",
    //由父组件传递总条数 每页显示数  连续页码数  当前页下标
    props: ["total", "pageSize", "indexFromWrap"],
    data() {
        return {
            lxyms: 7,
            currentPage: this.indexFromWrap,
            page: this.indexFromWrap,
            quickprevIconClass: "el-icon-more",
            quicknextIconClass: 'el-icon-more',
            options: [{
                value: 10,
                label: '10条/页'
            }, {
                value: 20,
                label: '20条/页'
            }, {
                value: 30,
                label: '30条/页'
            }, {
                value: 50,
                label: '50条/页'
            }, {
                value: 100,
                label: '100条/页'
            }],
            currentpageSize: 10
        }
    },
    mounted() {
    },
    computed: {
        //总页数
        totalPage() {
            return Math.ceil(this.total / this.pageSize)
        },
        //最终页-起始页 = 连续页码数-1
        startEnd() {
            let { currentPage, lxyms, totalPage } = this
            // return console.log(this)
            let start;
            let end;
            //计算连续页码的起始页
            start = currentPage - Math.floor(lxyms / 2)
            if (start < 1) {
                start = 1
                this.quickprevIconClass = 'el-icon-more'
            }
            //结束页
            end = start + lxyms - 1  //此时当start<1时 在计算end时已经进行补位了
            // end>totalPage ?end=totalPage:""
            if (end > totalPage) {
                end = totalPage;
                start = end - lxyms + 1;  //此处当结束位置超出时,用start进行补位
                start < 1 ? start = 1 : ""  // 要满足start处于一个正常的范围
            }
            if (start >= 2 && end < totalPage - 1) {
                start += 2
            }
            if (end == totalPage - 1 && start > 1) {
                start += 1
                end -= 1
            }
            return { start, end }
        }
    },
    methods: {
        foucus() { },
        blur() {
            if (!this.page) {
                this.page = 1
            }
            if (this.page > this.totalPage) {
                this.page = this.totalPage
            }
            this.updateCPage(Number(this.page))
        },
        changesize() {
            this.currentPage = 1
            this.page = 1
            this.$emit("updateCPage", this.currentPage, this.currentpageSize)
        },
        onMouseenter(direction) {
            if (direction === 'left') {
                this.quickprevIconClass = 'el-icon-d-arrow-left';
            } else {
                this.quicknextIconClass = 'el-icon-d-arrow-right';
            }
        },
        updateCPage(currentPage) {
            if (currentPage < 1) return
            if (currentPage === this.currentPage) return;
            if (currentPage > this.totalPage - 3) {
                this.quicknextIconClass = 'el-icon-more'
            }
            if (currentPage > this.totalPage) {
                this.currentPage = this.totalPage
            } else {
                this.currentPage = currentPage;
            }
            //将当前页的数据,与外部的父组件进行数据交互
            this.$emit("updateCPage", this.currentPage, this.currentpageSize)
        }
    },
    watch: {
        currentPage: {
            handler(val) {
                this.page = val
            },
            deep: true,
            immediate: true
        },
        //监听当前页下标
        indexFromWrap: {
            handler(val) {
                this.currentPage = val
            },
            deep: true,
            immediate: true
        }
    }
}
</script>

<style lang="less" scoped>
.pagination {
    position: absolute;
    bottom: 5px;
    right: 20px;
    height: 40px;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;

    ::v-deep .el-input__inner {
        padding: 0 !important;
        font-size: 13px;
        text-align: center;
    }

    ::v-deep .el-input--suffix {
        .el-input__inner {
            padding-right: 20px !important;
        }
    }

    span {
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        vertical-align: top;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: black;
        outline: none;
        border-radius: 2px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 45px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            background-color: #409eff;
            color: #fff;
        }

        &.buttonactive {
            color: #409eff;
        }
    }
}
</style>