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

    // @unocss-include
    const data = reactive({
        items: [
            {
                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: 'Mapbox 地图示例',
                icon: 'emojione-globe-showing-europe-africa',
                page: '/pages/example/mapbox/index',
            },
            {
                name: 'Echarts 示例',
                icon: 'logos-chartblocks',
                page: '/pages/example/echarts/index',
            },
            {
                name: 'Webview(本地) 示例',
                icon: 'logos-internetexplorer',
                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')}`,
            },
        ],
    })
</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"
                    v-for="(item, idx) in data.items"
                    :key="idx"
                    @click="Pages.to(item.page, item.animationType as Pages.AnimationType)"
                >
                    <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>
