<template>
    <!-- 全局page 不带tab切换-->
    <z-paging
        ref="paging"
        v-model="dataList"
        :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
        :hide-empty-view="!isDataList"
        @query="queryList"
        @scroll="scroll"
        :paging-style="getPagingStyle"
    >
        <template #empty v-if="refresherEnabled || loadingMoreEnabled">
            <global-empty></global-empty>
        </template>
        <!-- 头部 -->
        <template #top>
            <view :style="{ height: safeAreaInsets?.top + 'px' }" v-if="custom"></view>
            <!-- 自定义导航栏 -->
            <global-navbar :title="title" v-if="showNavbar">
                <template #left v-if="pages.length > 1 && showNavLeft">
                    <up-icon v-if="navLeftType == 'icon'" :name="navLeftIcon" size="16" @tap="handleLeftClick"></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>
            <slot name="top"></slot>
        </template>
        <!-- 滚动内容 -->
        <view class="mocp-content" :style="getStyle">
            <slot :dataList="dataList" v-if="isDataList"></slot>
            <slot></slot>
        </view>
        <!-- 底部 -->
        <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>
</template>
<script setup>
import { filterEmptyValues } from 'mocp/utils/tool'
import { computed, nextTick, onUnmounted, ref } from 'vue'

const dataList = ref([])
const es = defineEmits(['query', 'handleLeftClick', 'handleRightClick', 'handleFooterClick'])
const paging = ref()
const ps = defineProps({
    background: {
        type: String,
        default: '#f7f8fa'
    },
    padding: {
        type: [String, Number],
        default: 0
    },
    margin: {
        type: [String, Number],
        default: 0
    },
    //是否自动加载
    auto: {
        type: Boolean,
        default: false
    },
    //是否展示自定义导航栏
    showNavbar: {
        type: Boolean,
        default: true
    },
    //是否显示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
    },
    //是否展示列表
    isDataList: {
        type: Boolean,
        default: false
    },
    //查询参数
    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'
    }
})
// z-page样式
const getPagingStyle = 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: margin,
        padding: padding
    }
    return style
})
//监听滚动
const scrollTime = ref(null)
const scroll = () => {
    // #ifdef APP
    if (scrollTime.value) {
        clearTimeout(scrollTime.value)
    }
    scrollTime.value = setTimeout(() => {
        uni.$emit('$upload-show', {})
    }, 500)
    // #endif
}
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
//列表加载
const queryList = (pageIndex, pageSize) => {
    if (ps.isDataList) {
        const params = {
            pageIndex,
            pageSize,
            ...filterEmptyValues(ps.params)
        }
        if (Object.prototype.toString.call(ps.api) == '[object Function]') {
            ps.api(params, { loading: true })
                .then((res) => {
                    if (res.code == 200) {
                        paging.value?.complete(res.list || res.data?.list || [])
                    } else {
                        uni.$mocpMessage.error(res.message)
                    }
                })
                .catch(() => {
                    paging.value?.complete(false)
                })
        } else {
            paging.value?.complete(false)
        }
    } else {
        es('query', { pageIndex, pageSize })
    }
}
//点击左边插槽
const handleLeftClick = () => {
    if (ps.navLeftClick == 'default') {
        uni.$mocpJump.navigateBack()
        es('handleLeftClick')
    } else {
        es('handleLeftClick')
    }
}
//点击右边插槽
const handleRightClick = () => {
    es('handleRightClick')
}
//消息提示
const uToastRef = ref()
const openToast = (params) => {
    nextTick(() => {
        uToastRef.value?.show(params)
    })
}
uni.$on('useMessage', (params) => openToast(params))
onUnmounted(() => {
    uni.$off('useMessage', openToast)
})
//点击底部按钮
const handleFooterClick = () => {
    es('handleFooterClick')
}
// 获取页面栈
const pages = getCurrentPages()
defineExpose({
    reload: () => {
        paging.value?.reload()
    },
    updateCache: () => {
        paging.value?.updateCache()
    }
})
</script>
<script>
export default {
    options: {
        styleIsolation: 'shared'
    }
}
</script>
<style lang="scss" scoped>
.mocp-content {
    // 表单内容
    :deep(.u-form-item__body) {
        padding: 24rpx 0 !important;
        .u-form-item__body__left__content__label {
            color: $mocp-text-5 !important;
            font-size: 28rpx !important;
        }
        .u-input__content__field-wrapper__field {
            color: $mocp-text-4 !important;
        }
        .u-textarea {
            margin-top: 8rpx;
            .u-textarea__field {
                font-size: 28rpx !important;
                color: $mocp-text-4 !important;
            }
        }
    }
}
.cancel {
    font-size: 28rpx;
}
.footer-btn {
    padding: 24rpx 32rpx;
    background-color: #fff;
}
</style>
