<template>
    <div class="d-flex flex-row justify-content-between pd-l-10 pd-r-10">
        <div class="dataTables_info">
            <select v-model="PageSize" class="mg-l-10 mg-t-10 native-select">
                <option v-for="pagesize in PageSizeOptions" v-bind:value="pagesize.value">
                    {{ pagesize.text }}
                </option>
            </select>
            <span class="mg-l-10">
                Hiển thị từ {{ From }} tới {{ To }} của {{ Total }} bản ghi
            </span>
        </div>
        <div class="paging_simple_numbers">
            <ul class="pagination">
                <li v-if="PageIndex > 1" class="paginate_button page-item previous">
                    <a href="javascript:void(0);" @click="First" class="page-link">Đầu</a>
                </li>
                <li v-if="PageIndex > 1" class="paginate_button page-item previous">
                    <a href="javascript:void(0);" @click="Previous" class="page-link">Trước</a>
                </li>
                <li class="paginate_button page-item" v-for="page in Pages" :class="ActivePage(page)">
                    <a class="page-link" href="javascript:void(0);" @click="GotoPage(page)">{{ page }}</a>
                </li>
                <li class="paginate_button page-item" v-if="PageIndex + 1 < TotalPages">
                    <a class="page-link" href="javascript:void(0);" @click="Next">
                        Sau
                    </a>
                </li>
                <li class="paginate_button page-item" v-if="PageIndex < TotalPages">
                    <a class="page-link" href="javascript:void(0);" @click="Last">
                        Cuối
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        Total: {
            type: Number,
            default: 0
        },
        TotalCurrent: {
            type: Number,
            default: 0
        },
        PagerPrefix: {
            type: String,
            default: 'pager:'
        }
    },
    data() {
        return {
            PageIndex: 1,
            PageSize: 25,
            PageSizeOptions: [{ value: 5, text: '5' }, { value: 15, text: '15' }, { value: 25, text: '25' }, { value: 50, text: '50' }, { value: 100, text: '100' }, { value: 200, text: '200' }],
        }
    },
    computed: {
        TotalPages() {
            return Math.ceil(this.Total / this.PageSize);
        },
        From() {
            return (this.PageIndex - 1) * this.PageSize + 1;
        },
        To() {
            return this.From + this.TotalCurrent - 1;
        },
        PartNumber() {
            return this.ShowItems / 2;
        },
        Pages() {
            var length = this.TotalPages;
            var current = this.PageIndex;
            var displayLength = 5;

            if (length <= 1) return [1];
            displayLength = displayLength - 2;
            var indexes = [1];
            var start = Math.round(current - displayLength / 2);
            var end = Math.round(current + displayLength / 2);
            if (start <= 1) {
                start = 2;
                end = start + displayLength - 1;
                if (end >= length - 1) end = length - 1;
            }
            if (end >= length - 1) {
                end = length - 1;
                start = end - displayLength + 1;
                if (start <= 1) start = 2;
            }
            if (start !== 2) indexes.push('...')
            for (var i = start; i <= end; i++) {
                indexes.push(i);
            }
            if (end !== length - 1) indexes.push('...')
            indexes.push(length);
            return indexes;

        }
    },
    methods: {
        GotoPage: function (pageNumber) {
            this.PageIndex = pageNumber;
            this.$emit("PageIndexChanged", pageNumber);
        },
        First() {

            if (this.PageIndex !== 1) {
                this.GotoPage(1);
            }
        },
        Previous() {

            if (this.PageIndex !== 1) {
                var npage = this.PageIndex - 1;
                this.GotoPage(npage);
            }
        },
        Next() {

            if (this.PageIndex < this.TotalPages) {
                var npage = this.PageIndex + 1;
                this.GotoPage(npage);
            }
        },
        Last() {
            if (this.PageIndex < this.TotalPages) {
                this.GotoPage(this.TotalPages);
            }
        },
        ActivePage(pageNum) {
            return this.PageIndex === pageNum ? 'active' : '';
        },
        Refresh() {
            this.PageIndex = 1;
        },
        updatePageSize(newPageSize) {
            this.PageSize = newPageSize;
        }
    },
    watch: {
        PageSize: function (nval, oldVal) {
            this.PageIndex = 1;
            this.$emit("PageSizeChanged", nval);
        }
    },
    created() {
        // this.$on('list:Refresh', () => {
        //     this.PageIndex = 1;
        // });
    }
}
</script>