<template>
    <!-- 全局page 带tab切换和左右滑动加载-->
    <z-paging-swiper>
        <!-- 头部 -->
        <template #top>
            <view :style="{ height: safeAreaInsets?.top + 'px' }" v-if="custom"></view>
            <!-- 自定义导航栏 -->
            <global-navbar :title="title" v-if="showNavbar">
                <template #left>
                    <uni-icons type="left" size="16" @tap="goBack"></uni-icons>
                </template>
            </global-navbar>
            <!-- tab切换 -->
            <z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" :name-key="nameKey" :value-key="valueKey"></z-tabs>
            <slot name="top"></slot>
        </template>
        <!-- 滚动内容 -->
        <swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
            <swiper-item v-for="(_, index) in tabList" :key="index">
                <global-page-swiper-item
                    :ref="(vc) => (pagingArr[index] = vc)"
                    :auto="auto"
                    :tabValue="tabList[current][valueKey]"
                    :tabIndex="index"
                    :tabValueField="tabValueField"
                    :currentIndex="current"
                    :api="api"
                    :refresher-enabled="refresherEnabled"
                    :refresher-threshold="refresherThreshold"
                    :auto-show-back-to-top="autoShowBackToTop"
                    :loading-more-enabled="loadingMoreEnabled"
                    :back-to-top-bottom="backToTopBottom"
                >
                    <template #="{ dataList }">
                        <slot :dataList="dataList"></slot>
                    </template>
                </global-page-swiper-item>
            </swiper-item>
        </swiper>
    </z-paging-swiper>
</template>

<script setup>
import { ref } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()

const ps = defineProps({
    //是否自动加载
    auto: {
        type: Boolean,
        default: true
    },
    //tab数据
    tabList: {
        type: Array,
        default: () => []
    },
    //tab默认index
    current: {
        type: Number,
        default: 0
    },
    //tab数据name
    nameKey: {
        type: String,
        default: 'name'
    },
    //tab数据value
    valueKey: {
        type: String,
        default: 'value'
    },
    //tab数据搜索字段
    tabValueField: {
        type: String,
        default: 'status'
    },
    //是否展示自定义导航栏
    showNavbar: {
        type: Boolean,
        default: true
    },
    //页面标题
    title: {
        type: String,
        default: ''
    },
    //是否关闭原生导航栏
    custom: {
        type: Boolean,
        default: true
    },
    //查询接口
    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'
    }
})

const tabs = ref()
const current = ref(ps.current)
//返回
const goBack = () => {
    uni.navigateBack()
}
// tabs通知swiper切换
const tabsChange = (index) => {
    current.value = index
}
// swiper滑动中
const swiperTransition = (e) => {
    tabs.value.setDx(e.detail.dx)
}
// swiper滑动结束
const swiperAnimationfinish = (e) => {
    current.value = e.detail.current
    tabs.value.unlockDx()
}
//获取列表刷新对象
const pagingArr = ref([])
defineExpose({
    reload: () => {
        pagingArr.value[current.value]?.reload()
    }
})
</script>

<style>
.swiper {
    height: 100%;
}
</style>
