<template>
    <div class="pagination-box">
        <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        class="pageination-style"
        :background="background"
        :page-sizes="pageSizes"
        :small="paginationSize"
        :default-page-size="pageSizes[0] || 20"
        layout="total, prev, pager, next, sizes, jumper"
        :total="totalNumber"
        :pager-count="pagerCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue'
import { __getItem, __setItem } from '../../script/index'

export default defineComponent({
    name: 'Pagination',
    props: {
        pageSizes: {
            type: Array<number>,
            default: () => [20, 50, 100]
        },
        totalNumber: {
            type: Number,
            default: 0
        },
        pagerCount: {
            type: Number,
            default: 7
        },
        parameter: {
            type: Object,
            default: () => { }
        },
        stateFlag: { // 是否缓存当前分页条件
            type: Boolean,
            default: true
        },
        background: {
            type: Boolean,
            default: true
        },
        paginationSize: {
            type: Boolean,
            default: false
        }
    },
    setup (props, context) {
        const { emit } = context
        let pageSize = ref<number>(20)
        let currentPage = ref<number>(1)
        // let timer: any = null
        // watch(() => [pageSize, currentPage], () => {
        //     if (timer) {
        //         clearTimeout(timer)
        //         timer = null
        //     }
        //     timer = setTimeout(() => {
        //         emit('changeTableData', props.parameter, isClick)
        //     }, 30)
        // }, {
        //     deep: true
        // })
        let defaultParameter:string
        let routeName: string
        let isClick: boolean
        onMounted(() => {
            defaultParameter = JSON.stringify(props.parameter)
            const routeBase = (window as any).router.options.history.base
            routeName = routeBase + (window as any).route.fullPath
            getParameter()
        })
        const getParameter = () => {
            if (props.stateFlag) {
                // 获取缓存参数
                const value = __getItem('myVuex', 'localStorage')
                const parameter = value.saveCurrentData.saveCurrentData[routeName]
                // 合并
                Object.assign(props.parameter, parameter)
                defaultParameter = JSON.stringify(props.parameter)
            }
            pageSize.value = props.parameter.pageSize || props.parameter.limit || props.pageSizes[0]
            currentPage.value = props.parameter.pageNum || (props.parameter.offset / props.parameter.limit + 1) || 1
            // props.parameter.id = { model: (window as any).route.query.id || '', oper: 'LIKE'}
            // props.parameter.name = { model: (window as any).route.query.name || '', oper: 'LIKE'}
            emit('changeTableData', props.parameter)
        }
        const handleSizeChange = ((val: number) => {
            if (props.parameter.offset !== undefined) {
                props.parameter.limit = val
                props.parameter.offset = props.parameter.limit * (currentPage.value - 1)
            } else {
                props.parameter.pageSize = val
            }
            emit('changeTableData', props.parameter, true)
        })
        const handleCurrentChange = ((val: number) => {
            currentPage.value = val
            if (props.parameter.offset !== undefined) {
                props.parameter.offset = props.parameter.limit * (currentPage.value - 1)
            } else {
                props.parameter.pageNum = val
            }
            emit('changeTableData', props.parameter, true)
        })
        const updateParameter = () => {
            const parameter = JSON.stringify(props.parameter)
            if (defaultParameter === parameter || !props.stateFlag) return true // 无参数改变
            const content = __getItem('myVuex', 'localStorage')
            if (content) {
                if (content.saveCurrentData.saveCurrentData !== 'default') {
                    content.saveCurrentData.saveCurrentData[routeName] = props.parameter
                } else {
                    content.saveCurrentData.saveCurrentData = {
                        [routeName]: props.parameter
                    }
                }
                __setItem('myVuex', content, 'localStorage')
            }
        }
        onBeforeUnmount(() => {
            updateParameter()
        })
        window.addEventListener('beforeunload', e => {
            updateParameter()
        })
        return {
            pageSize,
            currentPage,
            handleSizeChange,
            handleCurrentChange
        }
    }
})
</script>
<style lang="scss" scoped>
.pagination-box {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 15px;
}
.pageination-style {
    background: var(--bg-color);
    min-height: 60px;
}
</style>
