<template>
    <div :class="`${prefixCls} ${prefixCls}-${align}`">
        <div v-if="showElevator && showTotal" 
            :class="`${prefixCls}-total`">
            <slot>
                {{ t('pagination.total')}} {{ total }} <template v-if="total <= 1">{{ t('pagination.item') }}</template>
                <template v-else>{{ t('pagination.items') }}</template>
            </slot>
        </div>
        <ul :class="`${prefixCls}-pager`">
            <li 
                :class="itemClasses"
                @click="handlePrevPage(false)">
                <Icon type="arrow-left"></Icon>
            </li>
            <template v-if="showPagerContent">
                <li 
                    :class="currentPage === 1 ? activeClasses : itemClasses"
                    @click="handleChangePage(1)"><a>1</a></li>
                <li 
                    :class="itemClasses"
                    v-if="currentPage > pager" 
                    @click="handlePrevPage(true)">
                    <Icon type="more"></Icon>
                    <Icon type="prev"></Icon>
                </li>
                <li 
                    :class="itemClasses"
                    v-if="currentPage === pager" 
                    @click="handleChangePage(currentPage - 3)">
                    {{ currentPage - 3 }}
                </li>
                <li 
                    :class="itemClasses"
                    v-if="currentPage - 2 > 1" 
                    @click="handleChangePage(currentPage - 2)">
                    {{ currentPage - 2 }}
                </li>
                <li 
                    :class="itemClasses"
                    v-if="currentPage - 1 > 1" 
                    @click="handleChangePage(currentPage - 1)">
                    {{ currentPage - 1 }}
                </li>
                <li 
                    v-if="currentPage != 1 && currentPage != allPages" 
                    :class="activeClasses">
                    {{ currentPage }}
                </li>
                <li 
                    :class="itemClasses"
                    v-if="currentPage + 1 < allPages" 
                    @click="handleChangePage(currentPage + 1)">
                    {{ currentPage + 1 }}
                </li>
                <li 
                    :class="itemClasses"
                    v-if="currentPage + 2 < allPages" 
                    @click="handleChangePage(currentPage + 2)">
                    {{ currentPage + 2 }}
                </li>
                <li 
                    :class="itemClasses"
                    v-if="allPages - currentPage === 4" 
                    @click="handleChangePage(currentPage + 3)">
                    {{ currentPage + 3 }}
                </li>
                <li 
                    :class="itemClasses"
                    v-if="allPages - currentPage >= pager" 
                    @click="handleNextPage(true)">
                    <Icon type="more"></Icon>
                    <Icon type="next"></Icon>
                </li>
                <li 
                    v-if="allPages > 1" 
                    :class="currentPage === allPages ? activeClasses : itemClasses"
                    @click="handleChangePage(allPages)">
                    {{allPages}}
                </li>
            </template>
            <li 
                :class="itemClasses"
                @click="handleNextPage(false)">
                <Icon type="arrow-right"></Icon>
            </li>
        </ul>
        <div 
            v-if="showSizer" 
            :class="`${prefixCls}-sizer`">
            <YYSelect 
                v-model="sizerValue"
                :transfer="false"
                labelInValue
                @on-change="handleChangePageSize"
                ref="select"
                :invertable="false">
                <div 
                    v-show="showSizerInput"
                    :class="`${prefixCls}-sizer-input`"
                    slot="dropHead">
                    <InputNumber
                        :value="currentPageSize"
                        size="small"
                        :precision = 0
                        :showHandle="false"
                        @on-enter="handleChangeSizer"/>
                </div>
                <YYOption v-for="item in sizer" :value="item" :key="item">
                    {{item}}{{t('pagination.page')}}
                </YYOption>
            </YYSelect>
        </div>
        <div
            v-if="showElevator" 
            :class="`${prefixCls}-elevator`">
            {{t('pagination.goto')}}
            <InputNumber
                :value="currentPage"
                :showHandle="false"
                :precision = 0
                @on-enter="handleElevatorPage"/>
            {{t('pagination.pageItem')}}
        </div>
    </div>
</template>
<script>
    import YYSelect from '../select/'
    import Input from '../input/'
    import InputNumber from '../input-number/'
    import Icon from '../icon/'
    import Locale from '../../../mixins/locale'
    import Emitter from '../../../mixins/emitter'

    function isValueNumber(value) {
        return (/^[1-9][0-9]*$/).test(value + '')
    }

    const prefixCls = 'yy-pagination'
    export default {
        mixins: [ Emitter, Locale ],
        components: {
            YYSelect,
            YYOption: YYSelect.YYOption,
            Input,
            InputNumber,
            Icon
        },
        props: {
            current: {
                type: Number,
                default: 1
            },
            total: {
                type: Number,
                default: 0
            },
            pageSize: {
                type: Number,
                default: 10
            },
            pager: {
                type: Number,
                default: 5
            },
            align: {
                type: String,
                default: 'right'
            },
            showPagerContent: {
                type: Boolean,
                default: true
            },
            showSizerInput: {
                type: Boolean,
                default: true
            },
            showTotal: {
                type: Boolean,
                default: true
            },
            showElevator: {
                type: Boolean,
                default: true
            },
            showSizer: {
                type: Boolean,
                default: true
            },
            maxPageSize: {
                type: Number,
                default: 99999
            }
        },
        data() {
            return {
                prefixCls: prefixCls,
                sizer: [10, 20, 30, 40],
                currentPage: this.current,
                currentPageSize: this.pageSize,
                sizerValue: [{
                    value: this.currentPageSize || this.pageSize,
                    label: `${this.currentPageSize || this.pageSize}${this.t('pagination.page')}`
                }]
            }
        },
        computed: {
            allPages() {
                const allPage = Math.ceil(this.total / this.currentPageSize)
                return (allPage === 0) ? 1 : allPage
            },
            itemClasses() {
                return [
                    `${prefixCls}-item`,
                    {
                        [`${prefixCls}-item-signle`]: !this.showPagerContent
                    }
                ]
            },
            activeClasses() {
                return [
                    `${prefixCls}-item`,
                    `${prefixCls}-item-active`,
                    {
                        [`${prefixCls}-item-signle`]: !this.showPagerContent
                    }
                ]
            }
        },
        watch: {
            current(value) {
                this.handleChangePage(value)
            }
        },
        methods: {
            handleChangePageSize() {
                if(this.currentPageSize !== this.sizerValue[0].value) {
                    this.currentPageSize = this.sizerValue[0].value
                    this.$emit('on-page-size-change', this.currentPageSize)
                }
            },
            handleChangeSizer(event) {
                let value = Number(event.target.value)
                let validPageSizeFlag = true
                if(!!value) {
                    if (value > this.maxPageSize) {
                        this.$emit('on-invalid-page-size', value)
                        event.target.value = value = this.maxPageSize
                        validPageSizeFlag = false
                    }
                    this.$set(this, 'currentPageSize', value)
                    if(this.sizer.indexOf(this.currentPageSize != 0)) {
                        this.sizerValue = [{
                            value: this.currentPageSize,
                            label: `${this.currentPageSize}${this.t('pagination.page')}`
                        }]
                    }
                    if (validPageSizeFlag) this.$refs.select.handleCloseDrop()
                    this.$emit('on-page-size-change', this.currentPageSize)
                }
            },
            handleChangePage(page, type) {
                if(this.currentPage === page) return
                this.currentPage = page
                this.$emit('on-change', page)
            },
            handlePrevPage(isFirstPrev) {
                if(this.currentPage <= 1) return
                let changePage = this.currentPage - (isFirstPrev ? this.pager : 1)
                this.handleChangePage(changePage < 1 ? 1 : changePage)
            },
            handleNextPage(isLastNext) {
                if(this.currentPage >= this.allPages) return
                let changePage = this.currentPage + (isLastNext ? this.pager : 1)
                this.handleChangePage(changePage > this.allPages ? this.allPages : changePage)
            },
            handleElevatorPage(event) {
                let value = event.target.value
                let changePage = 1
                if(isValueNumber(value)) {
                    changePage = Number(value)
                }
                if(changePage > this.allPages) changePage = this.allPages
                if(changePage < 1) changePage = 1
                
                this.handleChangePage(changePage)
            }
        }
    }
</script>
