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

    // @unocss-include
    const data = reactive({
        items: [
            {
                name: 'Mapbox 地图示例',
                icon: 'emojione-globe-showing-europe-africa',
                page: '/pages/example/mapbox/index',
            },
            {
                name: 'Webview 示例',
                icon: 'logos-internetexplorer',
                page: '/pages/example/webview/index',
            },
            {
                name: 'Echarts 示例',
                icon: 'logos-chartblocks',
                page: '/pages/example/echarts/index',
            },
        ],
    })
</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)"
                >
                    <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>
