<script setup lang="ts">
    import * as Pages from '@/utils/pages'

    interface Item {
        name: string
        icon: string
        page: string
        type?: 'link' | 'bottom'
        animationType?: Pages.AnimationType
        before?: () => void
        event?: () => void
    }

    // @unocss-include
    const data = reactive<{ items: Item[] }>({
        items: [
            {
                name: 'Mapbox 地图',
                icon: 'emojione-globe-showing-europe-africa',
                page: '/pages/example/mapbox/index',
            },
            {
                name: 'Echarts 图表',
                icon: 'logos-chartblocks',
                page: '/pages/example/echarts/index',
            },
            {
                name: 'Chat AI 对话',
                icon: 'emojione-cowboy-hat-face',
                page: `/pages/example/chat/index?link=${encodeURIComponent('https://api.coze.cn/open-platform/sdk/chatapp?params=%7B%22chatClientId%22%3A%22Hd1w0dc49QzvaAGlDONiA%22%2C%22chatConfig%22%3A%7B%22bot_id%22%3A%227426295021118488587%22%2C%22user%22%3A%22NmAh7FUtuyO6RPrzYMg4v%22%2C%22conversation_id%22%3A%22cqnuKy6c3lmYTdjF0vslj%22%7D%2C%22componentProps%22%3A%7B%22layout%22%3A%22mobile%22%2C%22lang%22%3A%22zh_CN%22%2C%22uploadable%22%3Atrue%2C%22title%22%3A%22%E6%B9%96%E5%8D%97%E5%A4%A9%E6%B0%94%20AI%20%E6%99%BA%E8%83%BD%E5%8A%A9%E7%90%86%22%2C%22icon%22%3A%22https%3A%2F%2Fhntq-res.oss-cn-shenzhen.aliyuncs.com%2Fhntq-ai-logo.png%22%7D%7D')}`,
                animationType: 'slide-in-bottom',
            },
            {
                name: 'Webview（本地）',
                icon: 'vscode-icons-file-type-html',
                page: `/pages/common/webview/index?link=${encodeURIComponent('/hybrid/html/local.html')}`,
            },
            {
                name: 'Webview（网络）',
                icon: 'logos-internetexplorer',
                page: `/pages/common/webview/index?link=${encodeURIComponent('https://uniapp.dcloud.io/static/web-view.html')}`,
            },
            {
                name: '应用维护全屏通知',
                icon: 'twemoji-laptop',
                page: '/pages/common/notice/index',
                animationType: 'fade-in',
                before() {
                    if (getApp().globalData.notice) {
                        // 重置
                        getApp().globalData.notice.id = Date.now()
                        getApp().globalData.notice.confirmed = false
                    } else {
                        // 默认示例
                        getApp().globalData.notice = {
                            id: Date.now(),
                            confirmed: false,
                            buttons: ['confirm', 'exit'],
                            content:
                                '<p style="text-indent: 2em; padding: 10px 0;">系统正在维护中，暂时无法使用，不便之处，敬请谅解。</p>',
                            title: '通知公告',
                        }
                    }
                },
            },
        ],
    })

    function to(item: Item) {
        if (item.before) {
            item.before?.()
        }

        if (item.type === 'bottom') {
            item.event?.()
            return
        }

        Pages.to(item.page, item.animationType)
    }
</script>

<template>
    <view class="fui-wrap">
        <scroll-view class="fui-scroll__box" scroll-y :style="{ height: '100%' }">
            <view class="fui-list__view">
                <fui-list-cell
                    arrow
                    :bottomBorder="false"
                    radius="16rpx"
                    marginTop="24"
                    :padding="['20rpx', '32rpx']"
                    v-for="(item, idx) in data.items"
                    :key="idx"
                    @click="to(item)"
                >
                    <view class="fui-list__item fui-align__center">
                        <Icon :class="[`icon-${item.icon}`]" size="48" />
                        <text>{{ item.name }}</text>
                    </view>
                </fui-list-cell>
            </view>
        </scroll-view>
    </view>
</template>

<style lang="less">
    page {
        height: 100%;
    }

    .fui-swiper__box,
    .fui-swiper__item,
    .fui-scroll__box {
        width: 100%;
    }

    .fui-list__view {
        width: 100%;
        min-height: 101%;
        padding: 8rpx 32rpx 32rpx;
        box-sizing: border-box;
    }

    .fui-list__item {
        width: 100%;
        height: 112rpx;
    }

    .fui-list__item text {
        padding-left: 24rpx;
        padding-right: 12rpx;
        flex-shrink: 0;
    }

    .fui-item__icon-box {
        width: 48rpx;
        height: 48rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50rpx 0 30rpx;
    }

    .fui-item__icon,
    .fui-vip__icon {
        width: 48rpx;
        height: 48rpx;
        display: block;
        flex-shrink: 0;
    }
</style>
