<script setup lang="ts">
    import { liveModules } from '/@/utils/const/Navigation'
    import type { navItemType } from '/@/utils/const/Navigation'

    defineProps({
        dataSouce: {
            type: Array as PropType<navItemType[]>,
            default: () => liveModules,
        },
    })

    // const colors = {
    //     m: '#1890FF',
    //     f: '#FF9A03',
    //     c: '#63C56D',
    //     w: '#1890FF',
    // }

    // const getColor = (type: string) => colors[type]
    function goRoute(nav: UniApp.NavigateToOptions) {
        uni.navigateTo(nav)
    }

    const lastString = (string: string) => string.charAt(string.length - 1)

    const getUrl = (item) => `/static/images/business/${lastString(item.value)}/${item.value}.svg`
</script>

<template>
    <fui-grid :columns="4" class="mt-4 bg-#fff" :showBorder="false">
        <fui-grid-item
            v-for="(item, index) in dataSouce"
            :key="index"
            :highlight="false"
            @click="goRoute(item.navigate)"
        >
            <view class="fui-grid__cell flex flex-col flex-center">
                <!-- <image src="/static/uni-logo.png" class="fui-icon w50" mode="widthFix" /> -->
                <!-- :color="getColor(lastString(item.value))" -->
                <!-- <FuiIcon custom-prefix="font_family" :name="`icon-${item.value}`" size="100" :primary="true" /> -->
                <image :src="getUrl(item)" class="fui-icon w-100 h-98" />
                <text class="text-24 mt-2">{{ item.label }}</text>
            </view>
        </fui-grid-item>
    </fui-grid>
</template>

<style lang="less">
    .fui-grid__cell {
        border: none;
    }
</style>
