<template>
    <!-- 全局page 带tab切换和左右滑动加载-->
    <z-paging-swiper :swiper-style="getSwiperStyle">
        <!-- 头部 -->
        <template #top>
            <view
                style="position: relative; z-index: -2"
                :style="{ height: safeAreaInsets?.top + 'px', background: navbgColor }"
                v-if="custom"
            ></view>
            <!-- 自定义导航栏 -->
            <global-navbar :title="title" v-if="showNavbar" :bgColor="navbgColor" :color="navColor">
                <template #left v-if="pages.length > 1 && showNavLeft">
                    <up-icon v-if="navLeftType == 'icon'" :name="navLeftIcon" size="16" @tap="handleLeftClick" :color="navColor"></up-icon>
                    <view v-if="navLeftType == 'text'" class="cancel" @tap="handleLeftClick">{{ navLeftText }}</view>
                </template>
                <template #right v-if="showNavRight">
                    <global-button type="text" size="small" v-if="navRightType == 'text'" @tap="handleRightClick">
                        {{ navRightText }}
                    </global-button>
                    <global-button type="primary" size="small" v-if="navRightType == 'button'" style="padding: 0 32rpx" @tap="handleRightClick">
                        {{ navRightText }}
                    </global-button>
                    <global-icon v-if="navRightType == 'icon'" :icon="navRightIcon" @tap="handleRightClick"></global-icon>
                </template>
            </global-navbar>
            <!-- tab切换 -->
            <global-tabs
                :current="current"
                :lineWidth="40"
                :list="tabList"
                :keyName="nameKey"
                @handleChange="tabsChange"
                inactiveStyle="color:#86909C"
                :width="tabsWidth"
                :height="100"
            ></global-tabs>
            <slot name="top"></slot>
        </template>
        <!-- 滚动内容 -->
        <swiper
            :duration="100"
            class="swiper"
            :style="getStyle"
            :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"
                    :tabIndex="index"
                    :tabValue="tabList[current][valueKey]"
                    :tabValueField="tabValueField"
                    :currentIndex="current"
                    :alone="alone"
                    :params="getParams"
                    :api="getApi"
                    :refresher-enabled="refresherEnabled"
                    :refresher-threshold="refresherThreshold"
                    :auto-show-back-to-top="autoShowBackToTop"
                    :loading-more-enabled="loadingMoreEnabled"
                    :back-to-top-bottom="backToTopBottom"
                    :localPaging="localPaging"
                    :transformData="transformData"
                >
                    <template #="{ dataList }">
                        <up-checkbox-group v-model="chooseValue" v-if="chooseDataType == 'checkbox'" class="checkbox-group">
                            <template v-for="(item, index) in dataList" :key="index">
                                <up-checkbox :name="index" v-if="chooseDataType == 'checkbox'" class="f-flex-1">
                                    <template #label>
                                        <slot :item="item" :index="index"></slot>
                                    </template>
                                </up-checkbox>
                            </template>
                        </up-checkbox-group>
                        <template v-for="(item, index) in dataList" :key="index" v-else>
                            <slot :item="item" :index="index"></slot>
                        </template>
                    </template>
                </global-page-swiper-item>
            </swiper-item>
        </swiper>
        <!-- 底部 -->
        <template #bottom>
            <view class="footer-btn" v-if="showFooterBtn">
                <global-button type="primary" size="large" @tap="handleFooterClick">{{ footerBtnText }}</global-button>
            </view>
            <slot name="bottom"></slot>
        </template>
        <!-- 消息提醒 -->
        <up-toast ref="uToastRef"></up-toast>
    </z-paging-swiper>
</template>

<script setup>
import { computed, nextTick, onUnmounted, ref, watch } from 'vue'

// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const es = defineEmits(['handleLeftClick', 'handleRightClick', 'handleFooterClick', 'handleChooseData', 'handleTabsChange'])
const ps = defineProps({
    background: {
        type: String,
        default: '#f7f8fa'
    },
    padding: {
        type: [String, Number],
        default: 0
    },
    margin: {
        type: [String, Number],
        default: 0
    },
    //是否自动加载
    auto: {
        type: Boolean,
        default: true
    },
    //列表的每一项内容是否独立
    alone: {
        type: Boolean,
        default: false
    },
    //tab数据
    tabList: {
        type: Array,
        default: () => []
    },
    //tab默认index
    current: {
        type: Number,
        default: 0
    },
    //tab数据搜索字段
    tabValueField: {
        type: String,
        default: 'status'
    },
    //tab数据name
    nameKey: {
        type: String,
        default: 'name'
    },
    //tab数据value
    valueKey: {
        type: String,
        default: 'value'
    },
    //是否展示自定义导航栏
    showNavbar: {
        type: Boolean,
        default: true
    },
    //导航栏背景色
    navbgColor: {
        type: String,
        default: '#f7f8fa'
    },
    //导航栏字体颜色
    navColor: {
        type: String,
        default: '#4e5969'
    },
    //是否显示nav左边插槽
    showNavLeft: {
        type: Boolean,
        default: true
    },
    //nav左边插槽类型:icon,text
    navLeftType: {
        type: String,
        default: 'icon'
    },
    //nav左边插槽图标
    navLeftIcon: {
        type: String,
        default: 'arrow-left'
    },
    //nav左边插槽文字
    navLeftText: {
        type: String,
        default: '取消'
    },
    //点击nav左边插槽default,emit
    navLeftClick: {
        type: String,
        default: 'default'
    },
    //是否显示nav右边插槽
    showNavRight: {
        type: Boolean,
        default: false
    },
    //nav右边插槽类型:icon,text,button
    navRightType: {
        type: String,
        default: 'text'
    },
    //nav右边插槽图标
    navRightIcon: {
        type: String,
        default: 'navbarright'
    },
    //nav右边插槽文字
    navRightText: {
        type: String,
        default: '编辑'
    },
    //是否显示底部按钮
    showFooterBtn: {
        type: Boolean,
        default: false
    },
    //底部按钮文字内容
    footerBtnText: {
        type: String,
        default: '保存'
    },
    //页面标题
    title: {
        type: String,
        default: ''
    },
    //是否关闭原生导航栏
    custom: {
        type: Boolean,
        default: true
    },
    //选择数据的类型'checkbox' | 'radio'
    chooseDataType: {
        type: String,
        default: ''
    },
    mapFieldName: {
        type: String,
        default: ''
    },
    mapFieldSplit: {
        type: String,
        default: ','
    },
    //查询参数
    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'
    },
    tabsWidth: {
        type: [Number, String],
        default: '250'
    },
    //是否本地分页
    localPaging: {
        type: Boolean,
        default: false
    },
    //数据转换
    transformData: {
        type: Function,
        default: null
    },
    //分页页码
    pageSize: {
        type: Number,
        default: 10
    }
})
// z-swiper样式
const getSwiperStyle = computed(() => {
    return {
        fontSize: '28rpx',
        background: ps.background
    }
})
//滚动区域样式
const getStyle = computed(() => {
    let padding = typeof ps.padding == 'number' ? ps.padding + 'rpx' : ps.padding
    let margin = typeof ps.margin == 'number' ? ps.margin + 'rpx' : ps.margin
    let style = {
        margin,
        padding
    }
    return style
})
//监听选择
const chooseValue = ref([])
watch(chooseValue, (value) => {
    let data = value.map((index) => pagingArr.value[current.value]?.dataList[index])
    if (ps.mapFieldName) {
        data = data.map((v) => v[ps.mapFieldName]).join(ps.mapFieldSplit)
    }
    es('handleChooseData', data)
})
const current = ref(ps.current)
// tabs通知swiper切换
const tabsChange = (item) => {
    current.value = item.index
    es('handleTabsChange', current.value)
}
// swiper滑动中
const swiperTransition = (e) => {}
// swiper滑动结束
const swiperAnimationfinish = (e) => {
    current.value = e.detail.current
}
//获取查询参数
const getParams = computed(() => {
    if (ps.alone) {
        return ps.tabList[current.value].params || ps.params || {}
    } else {
        return ps.params
    }
})
//获取查询接口
const getApi = computed(() => {
    if (ps.alone) {
        return ps.tabList[current.value].api || ps.api
    } else {
        return ps.api
    }
})
//消息提示
const uToastRef = ref()
const openToast = (params) => {
    nextTick(() => {
        uToastRef.value?.show(params)
    })
}
uni.$on('useMessage', (params) => openToast(params))
onUnmounted(() => {
    uni.$off('useMessage', openToast)
})
//点击左边插槽
const handleLeftClick = () => {
    if (ps.navLeftClick == 'default') {
        uni.$mocpJump.navigateBack()
        es('handleLeftClick')
    } else {
        es('handleLeftClick')
    }
}
//点击右边插槽
const handleRightClick = () => {
    es('handleRightClick')
}
//点击底部按钮
const handleFooterClick = () => {
    es('handleFooterClick')
}
// 获取页面栈
const pages = getCurrentPages()
//获取列表刷新对象
const pagingArr = ref([])
defineExpose({
    reload: () => {
        chooseValue.value = []
        pagingArr.value[current.value]?.reload()
    },
    updateCache: () => {
        chooseValue.value = []
        pagingArr.value[current.value]?.updateCache()
    }
})
</script>
<style scoped>
.swiper {
    height: 100%;
}

.checkbox-group {
    display: block;
}

.f-flex-1 {
    flex: 1;
}
</style>
