<script setup lang="ts">
    import * as Pages from '@/utils/pages'
    import { convertKB } from '@/utils'
    import { calculateCacheSize, cleanCache } from '@/components/CacheImage/index'

    interface Item {
        name: string
        icon: string
        page?: string
        type?: 'link' | 'bottom'
        animationType?: Pages.AnimationType
        explain?: string
        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: 'fluent-color-chat-bubbles-question-24',
                page: `/pages/example/chat/index?link=${encodeURIComponent('https://api.coze.cn/open-platform/sdk/chatapp?params=%7B%22chatClientId%22%3A%22BCsVIvFQTfR6aaoq9rRlj%22%2C%22chatConfig%22%3A%7B%22bot_id%22%3A%227426295021118488587%22%2C%22user%22%3A%22yUDCvvY6bwgJlKOR4z64X%22%2C%22conversation_id%22%3A%22ugG5MOjgpB5QidAIG8Yf1%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%E5%B0%8F%E5%8A%A9%E6%89%8B%22%2C%22icon%22%3A%22https%3A%2F%2Fhntq.yiring.com%2Fminio%2Fpublic%2Fsystem%2Fai%2Fhntq-ai-logo.png%22%7D%7D')}`,
                animationType: 'slide-in-bottom',
            },
            {
                name: 'Chat AI 对话（WebView）',
                icon: 'fluent-color-chat-multiple-24',
                page: `/pages/example/chat/webview`,
                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: 'PDF 预览',
                icon: 'vscode-icons-file-type-pdf2',
                page: `/pages/common/viewer/pdf?uri=${encodeURIComponent('https://oss.kshg.yiring.com/kshg/upload/2024/10/24/937000bbb9524f0295d1e8ef6290bec6/10.%E4%B8%AD%E5%8D%8E%E4%BA%BA%E6%B0%91%E5%85%B1%E5%92%8C%E5%9B%BD%E5%8F%8D%E9%97%B4%E8%B0%8D%E6%B3%95.P18.pdf')}`,
            },
            {
                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: '通知公告',
                        }
                    }
                },
            },
            {
                name: '清理缓存',
                icon: 'fxemoji-clockwiserightwardsleftwardscirclearrows',
                type: 'bottom',
                explain: '',
                event() {
                    if (!this.explain) {
                        Message.toast('无需清理 ~')
                        return
                    }

                    Message.confirm('确认清除缓存?', '温馨提示').then(async (confirm) => {
                        if (confirm) {
                            Message.loading('清理中...')

                            try {
                                // 清理缓存
                                await cleanCache()

                                // 重新计算
                                calculateCache()
                            } finally {
                                // 延迟提示
                                setTimeout(() => {
                                    Message.toast('缓存清除成功')
                                    Message.hideLoading()
                                }, 500)
                            }
                        }
                    })
                },
            },
        ],
    })

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

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

        Pages.to(item.page, item.animationType)
    }

    /**
     * 计算缓存
     */
    function calculateCache() {
        // 重新计算
        const cacheIamgeSizeTotal = calculateCacheSize()
        const { size: currentStorageSize, unit: currentStorageSizeUnit } = convertKB(cacheIamgeSizeTotal / 1024)

        // 更新视图
        data.items.find((item) => item.name === '清理缓存').explain =
            Number(currentStorageSize) === 0 ? '' : `${currentStorageSize}${currentStorageSizeUnit}`
    }

    onShow(() => {
        // 计算缓存
        calculateCache()
    })
</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>
                    <text class="fui-text__explain text-#999" v-if="item.explain">{{ item.explain }}</text>
                </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>
