<template>
    <!-- 配合global-page-swiper实现左右滑动 -->
    <view class="mocp-content">
        <z-paging
            :auto="auto"
            :refresher-enabled="refresherEnabled"
            :refresher-threshold="refresherThreshold"
            :auto-show-back-to-top="autoShowBackToTop"
            :loading-more-enabled="loadingMoreEnabled"
            :back-to-top-bottom="backToTopBottom"
            show-refresher-update-time
            v-if="firstLoaded || isCurrentPage"
            ref="paging"
            v-model="dataList"
            @query="queryList"
            :fixed="false"
        >
            <template #empty>
                <global-empty></global-empty>
            </template>
            <slot :dataList="dataList"></slot>
        </z-paging>
    </view>
</template>

<script setup>
import { filterEmptyValues } from 'mocp/utils/tool'
import { computed, ref, watch } from 'vue'

const paging = ref()
const dataList = ref([])
// 当前组件是否已经加载过了
const firstLoaded = ref(false)
// 是否滚动到当前页
const isCurrentPage = ref(false)
const ps = defineProps({
    //是否自动加载
    auto: {
        type: Boolean,
        default: false
    },
    tabValue: {
        type: [Number, String],
        default: 0
    },
    tabIndex: {
        type: Number,
        default: 0
    },
    currentIndex: {
        type: Number,
        default: 0
    },
    //列表的每一项内容是否独立
    alone: {
        type: Boolean,
        default: false
    },
    //tab数据搜索字段
    tabValueField: {
        type: String,
        default: 'status'
    },
    //查询参数
    params: {
        type: Object,
        default: () => {
            return {}
        }
    },
    //查询接口
    api: {
        type: Function,
        default: null
    },
    //是否开启下拉刷新
    refresherEnabled: {
        type: Boolean,
        default: false
    },
    refresherThreshold: {
        type: [String, Boolean],
        default: '150rpx'
    },
    //是否启用加载更多数据
    loadingMoreEnabled: {
        type: Boolean,
        default: false
    },
    autoShowBackToTop: {
        type: Boolean,
        default: true
    },
    backToTopBottom: {
        type: [Number, String],
        default: '160rpx'
    },
    //是否本地分页
    localPaging: {
        type: Boolean,
        default: false
    },
    //数据转换
    transformData: {
        type: Function,
        default: null
    },
    //分页页码
    pageSize: {
        type: Number,
        default: 10
    }
})
watch(
    () => ps.currentIndex,
    (newVal) => {
        if (newVal === ps.tabIndex) {
            // 懒加载，当滑动到当前的item时，才去加载
            if (!firstLoaded.value) {
                // 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
                setTimeout(() => {
                    isCurrentPage.value = true
                }, 50)
            }
        }
    },
    {
        immediate: true
    }
)
const queryList = (pageIndex, pageSize) => {
    const params = {
        ...filterEmptyValues(ps.params)
    }
    //是否开启本地分页
    if (!ps.localPaging) {
        params['pageIndex'] = pageIndex
        params['pageSize'] = pageSize
    }
    if (ps.tabValue != null && !ps.alone) {
        params[ps.tabValueField] = ps.tabValue
    }
    console.log(ps.api)
    if (Object.prototype.toString.call(ps.api) == '[object Function]') {
        ps.api(params, {loading: true}).then((res) => {
            if (res.code == 200 || res.list?.length) {
                let data = res.list || res.data?.list || res?.data || []
                if (ps.transformData) {
                    data = ps.transformData(data) || []
                }
                if (ps.localPaging) {
                    paging.value?.setLocalPaging(data)
                } else {
                    paging.value?.complete(data)
                }
            } else {
                paging.value?.complete(false)
                uni.$mocpMessage.error(res.message)
            }
        }).catch(() => {
            paging.value?.complete(false)
        })
    } else {
        paging.value?.complete(false)
    }
}
defineExpose({
    dataList,
    reload: () => {
        paging.value?.reload()
    },
    updateCache: () => {
        paging.value?.updateCache()
    }
})
</script>
<script>
export default {
    options: {
        styleIsolation: 'shared'
    }
}
</script>
<style lang="scss" scoped>
/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
.mocp-content {
    height: 100%;
    //多选框
    :deep(.u-checkbox__icon-wrap) {
        min-width: 18px;
    }
}
</style>
