<template>
    <div class="new-page">
        <ul :class="simpleWrapClasses" :style="styles" v-if="simple">
                <li
                    :title="t('i.page.prev')"
                    :class="prevClasses"
                    @click="prev">
                    <a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
                </li>
                <div :class="simplePagerClasses" :title="currentPage + '/' + allPages">
                    <input
                        type="text"
                        :value="currentPage"
                        autocomplete="off"
                        spellcheck="false"
                        :disabled="disabled"
                        @keydown="keyDown"
                        @keyup="keyUp"
                        @change="keyUp">
                    <span>/</span>
                    {{ allPages }}
                </div>
                <li
                    :title="t('i.page.next')"
                    :class="nextClasses"
                    @click="next">
                    <a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
                </li>
        </ul>
        <ul class="page" :class="wrapClasses" :style="styles" v-else>
            <span :class="[prefixCls + '-total']" v-if="showTotal">
                <slot>{{ t('i.page.total') }} {{ total }} <template v-if="total <= 1">{{ t('i.page.item') }}</template><template v-else>{{ t('i.page.items') }}</template></slot>
            </span>
            <li
                :title="t('i.page.prev')"
                :class="prevClasses"
                @click="prev">
                <a><template v-if="prevText !== ''">{{ prevText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-back"></i></a>
            </li>
            <li title="1" :class="firstPageClasses" @click="changePage(1)"><a>1</a></li>
            <li :title="t('i.page.prev5')" v-if="currentPage > 3" :class="[prefixCls + '-item-jump-prev']" @click="fastPrev"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i><i class="ivu-icon ivu-icon-ios-more"></i></a></li>
            <!-- <li :title="currentPage - 3" v-if="currentPage === 5" :class="[prefixCls + '-item']" @click="changePage(currentPage - 3)"><a>{{ currentPage - 3 }}</a></li> -->
            <!-- <li :title="currentPage - 2" v-if="currentPage - 2 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 2)"><a>{{ currentPage - 2 }}</a></li> -->
            <li :title="currentPage - 1" v-if="currentPage - 1 > 1" :class="[prefixCls + '-item']" @click="changePage(currentPage - 1)"><a>{{ currentPage - 1 }}</a></li>
            <li :title="currentPage" v-if="currentPage != 1 && currentPage != allPages" :class="[prefixCls + '-item',prefixCls + '-item-active']"><a>{{ currentPage }}</a></li>
            <li :title="currentPage + 1" v-if="currentPage + 1 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 1)"><a>{{ currentPage + 1 }}</a></li>
            <!-- <li :title="currentPage + 2" v-if="currentPage + 2 < allPages" :class="[prefixCls + '-item']" @click="changePage(currentPage + 2)"><a>{{ currentPage + 2 }}</a></li> -->
            <!-- <li :title="currentPage + 3" v-if="allPages - currentPage === 4" :class="[prefixCls + '-item']" @click="changePage(currentPage + 3)"><a>{{ currentPage + 3 }}</a></li> -->
            <li :title="t('i.page.next5')" v-if="allPages - currentPage >= 3" :class="[prefixCls + '-item-jump-next']" @click="fastNext"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i><i class="ivu-icon ivu-icon-ios-more"></i></a></li>
            <li :title="allPages" v-if="allPages > 1" :class="lastPageClasses" @click="changePage(allPages)"><a>{{ allPages }}</a></li>
            <li
                :title="t('i.page.next')"
                :class="nextClasses"
                @click="next">
                <a><template v-if="nextText !== ''">{{ nextText }}</template><i v-else class="ivu-icon ivu-icon-ios-arrow-forward"></i></a>
            </li>
            <Options
                :show-sizer="showSizer"
                :page-size="currentPageSize"
                :page-size-opts="pageSizeOpts"
                :placement="placement"
                :transfer="transfer"
                :show-elevator="showElevator"
                :_current.once="currentPage"
                :current="currentPage"
                :disabled="disabled"
                :all-pages="allPages"
                :is-small="isSmall"
                @on-size="onSize"
                @on-page="onPage">
            </Options>
        </ul>
    </div>
    
</template>
<script>
    import { oneOf } from 'view-design/src/utils/assist';
    // import Options from 'view-design/src/components/page/options';
    import Locale from 'view-design/src/mixins/locale';

    const prefixCls = 'ivu-page';

    export default {
        name: 'Page',
        mixins: [ Locale ],
        // components: { Options },
        props: {
            current: {
                type: Number,
                default: 1
            },
            total: {
                type: Number,
                default: 0
            },
            pageSize: {
                type: Number,
                default: 10
            },
            pageSizeOpts: {
                type: Array,
                default () {
                    return [10, 20, 30, 40];
                }
            },
            placement: {
                validator (value) {
                    return oneOf(value, ['top', 'bottom']);
                },
                default: 'bottom'
            },
            transfer: {
                type: Boolean,
                default () {
                    return !this.$IVIEW || this.$IVIEW.transfer === '' ? false : this.$IVIEW.transfer;
                }
            },
            size: {
                validator (value) {
                    return oneOf(value, ['small']);
                }
            },
            simple: {
                type: Boolean,
                default: false
            },
            showTotal: {
                type: Boolean,
                default: false
            },
            showElevator: {
                type: Boolean,
                default: false
            },
            showSizer: {
                type: Boolean,
                default: false
            },
            className: {
                type: String
            },
            styles: {
                type: Object
            },
            prevText: {
                type: String,
                default: ''
            },
            nextText: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        data () {
            return {
                prefixCls: prefixCls,
                currentPage: this.current,
                currentPageSize: this.pageSize
            };
        },
        watch: {
            total (val) {
                let maxPage = Math.ceil(val / this.currentPageSize);
                if (maxPage < this.currentPage ) {
                    this.currentPage = (maxPage === 0 ? 1 : maxPage);
                }
            },
            current (val) {
                this.currentPage = val;
            },
            pageSize (val) {
                this.currentPageSize = val;
            }
        },
        computed: {
            isSmall () {
                return !!this.size;
            },
            allPages () {
                const allPage = Math.ceil(this.total / this.currentPageSize);
                return (allPage === 0) ? 1 : allPage;
            },
            simpleWrapClasses () {
                return [
                    `${prefixCls}`,
                    `${prefixCls}-simple`,
                    {
                        [`${this.className}`]: !!this.className
                    }
                ];
            },
            simplePagerClasses () {
                return `${prefixCls}-simple-pager`;
            },
            wrapClasses () {
                return [
                    `${prefixCls}`,
                    {
                        [`${this.className}`]: !!this.className,
                        [`${prefixCls}-with-disabled`]: this.disabled,
                        'mini': !!this.size
                    }
                ];
            },
            prevClasses () {
                return [
                    `${prefixCls}-prev`,
                    {
                        [`${prefixCls}-disabled`]: this.currentPage === 1 || this.disabled,
                        [`${prefixCls}-custom-text`]: this.prevText !== ''
                    }
                ];
            },
            nextClasses () {
                return [
                    `${prefixCls}-next`,
                    {
                        [`${prefixCls}-disabled`]: this.currentPage === this.allPages || this.disabled,
                        [`${prefixCls}-custom-text`]: this.nextText !== ''
                    }
                ];
            },
            firstPageClasses () {
                return [
                    `${prefixCls}-item`,
                    {
                        [`${prefixCls}-item-active`]: this.currentPage === 1
                    }
                ];
            },
            lastPageClasses () {
                return [
                    `${prefixCls}-item`,
                    {
                        [`${prefixCls}-item-active`]: this.currentPage === this.allPages
                    }
                ];
            }
        },
        methods: {
            changePage (page) {
                if (this.disabled) return;
                if (this.currentPage != page) {
                    this.currentPage = page;
                    this.$emit('update:current', page);
                    this.$emit('on-change', page);
                }
            },
            prev () {
                if (this.disabled) return;
                const current = this.currentPage;
                if (current <= 1) {
                    return false;
                }
                this.changePage(current - 1);
            },
            next () {
                if (this.disabled) return;
                const current = this.currentPage;
                if (current >= this.allPages) {
                    return false;
                }
                this.changePage(current + 1);
            },
            fastPrev () {
                if (this.disabled) return;
                const page = this.currentPage - 5;
                if (page > 0) {
                    this.changePage(page);
                } else {
                    this.changePage(1);
                }
            },
            fastNext () {
                if (this.disabled) return;
                const page = this.currentPage + 5;
                if (page > this.allPages) {
                    this.changePage(this.allPages);
                } else {
                    this.changePage(page);
                }
            },
            onSize (pageSize) {
                if (this.disabled) return;
                this.currentPageSize = pageSize;
                this.$emit('on-page-size-change', pageSize);
                this.changePage(1);
            },
            onPage (page) {
                if (this.disabled) return;
                this.changePage(page);
            },
            keyDown (e) {
                const key = e.keyCode;
                const condition = (key >= 48 && key <= 57) || (key >= 96 && key <= 105) || key === 8 || key === 37 || key === 39;

                if (!condition) {
                    e.preventDefault();
                }
            },
            keyUp (e) {
                const key = e.keyCode;
                const val = parseInt(e.target.value);

                if (key === 38) {
                    this.prev();
                } else if (key === 40) {
                    this.next();
                } else if (key === 13) {
                    let page = 1;

                    if (val > this.allPages) {
                        page = this.allPages;
                    } else if (val <= 0 || !val) {
                        page = 1;
                    } else {
                        page = val;
                    }

                    e.target.value = page;
                    this.changePage(page);
                }
            }
        }
    };
</script>

<style lang="less" scoped>
.new-page {
    .page {
   
           /deep/ .ivu-page-total{
            }
            .ivu-page-item {
                    margin: 0 1px;
            }
            .ivu-icon-ios-more:before{
                content: none;
            }
            .ivu-page-item-jump-next:hover i:after{
                content: none;
            }
            .ivu-page-item-jump-prev:hover i:after{
                content: none;
            }
            .ivu-page-item-jump-next:hover i:first-child:after{
                content: "\F11F";
                margin-left: -8px;
            }
            .ivu-page-item-jump-prev:hover i:first-child:after{
                content: "\F115";
                margin-left: -8px;
            }
       
    }
}


</style>
