<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-12-22 15:23:48
 * @FilePath: \housekeeping-uniapp\src\components\widgets\nav\nav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="nav m-[20rpx] bg-[#fff] rounded-lg" v-if="content.data.length && content.enabled">
        <view class="nav-item flex flex-wrap pt-[26rpx]">
            <view
                v-for="(item, index) in content.data"
                :key="index"
                class="flex flex-col items-center w-1/5 mb-[30rpx]"
                @click="handleClick(item.link)"
            >
                <u-image width="110rpx" height="110rpx" :src="getImageUrl(item.image)" alt="" />
                <view class="mt-[12rpx]" style="font-size: 0.775rem">{{ item.name }}</view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})

const handleClick = (link: any) => {
    navigateTo(link)
}
const { getImageUrl } = useAppStore()
</script>

<style></style>
