<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]

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

<template>
    <fui-grid :columns="4" class="mt-4">
        <fui-grid-item v-for="(item, index) in dataSouce" :key="index">
            <view class="fui-grid__cell flex flex-col flex-center">
                <!-- <image src="/static/uni-logo.png" class="fui-icon w50" mode="widthFix" /> -->
                <FuiIcon
                    custom-prefix="font_family"
                    :name="`icon-${item.value}`"
                    size="100"
                    :color="getColor(lastString(item.value))"
                />
                <text class="text-30 mt-2">{{ item.label }}</text>
            </view>
        </fui-grid-item>
    </fui-grid>
</template>

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