<template>
    <div>

        <div class="flex t">
            <div class="cover">
                <st-condition ref="stCondition" v-model="searchCondition" :init-on-created="initOnCreated" @search="_onSearch"
                              :options="options" :auth="auth">
                    <template #btns>
                        <slot name="btns"></slot>
                    </template>
                </st-condition>
            </div>
            <div v-if="$slots.header" class="pt pr">
                <slot name="header"></slot>
            </div>
        </div>

        <slot :loading="loading" :pageNumber="pageNumber" :pageSize="pageSize" :startIndex="(pageNumber-1)*pageSize"></slot>

        <st-pagination :page-number="pageNumber" :page-size="pageSize" :total-row="totalRow" @pageChange="_onPageChange" @sizeChange="_onSizeChange">
            <slot name="pagination"></slot>
        </st-pagination>

    </div>
</template>

<script type="text/javascript">
    import {computed} from "@vue/reactivity";

    export default {
        name: 'st-page',
        emits:["search","reset"],
        props:{
            page : {
                type : Number ,
                default : 1
            },
            perPage : {
                type : Number ,
                default : 10
            },
            totalRow : {
                type : Number ,
                default : 0
            },
            loadData :{
                type : Function ,
                required : true
            },
            initOnCreated:{ //自动从本地缓存、配置的默认值、value初始化筛选条件，将触发@search，开启后可在@search中自动请求数据
                type : Boolean,
                default : true
            },
            auth : {
                type : Boolean ,
                default(){
                    return situ.getConfig("auth",true)
                }
            } ,
            options : {
                type:Array,
                default(){
                    return [] ;
                }
            }
        },

        data() {
            return {
                pageSize : 10 ,
                pageNumber : 1 ,
                searchCondition: {} ,
                loading: false
            }
        },

        provide(){
            return {
                startIndex : computed(()=> (this.pageNumber-1)* this.pageSize)
            }
        },

        created() {
            this.pageNumber = this.page ;
            this.pageSize = this.perPage ;
            if(!this.initOnCreated) this._onSearch();
        },

        methods:{
            async _loadTable(){
                this.loading = true;
                try {
                    await this.loadData({
                        ...this.searchCondition ,
                        page : this.pageNumber ,
                        perPage : this.pageSize ,
                        pageNum : this.pageNumber ,
                        pageSize : this.pageSize
                    });
                }finally {
                    this.loading = false;
                }
            },

            _onPageChange(pageNumber) {
                this.pageNumber = pageNumber;
                this._loadTable();
            },

            _onSizeChange(pageSize) {
                this.pageSize = pageSize;
                this._loadTable();
            },

            _onSearch(searchCondition = {} , eventName = "search") {
                this.searchCondition = searchCondition;
                this.pageNumber = 1;
                this._loadTable();
                this.$emit(eventName , searchCondition ) ;
            }
        }
    }
</script>