<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:00:26
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-07 14:16:20
 * @FilePath: \vite-ai\data-dashboard\src\views\dashboard\components\footer.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="footer-box">
        <ul class="nav-list">
            <li v-for="(item, index) in navList" :key="item.path" :class="{ active: isActive(item.fullPath) }">
                <router-link :to="item.fullPath" class="nav-item">
                    <div :class="`nav-icon-${index}`">

                    </div>
                    <div class="mt-[12px]">{{ item?.meta?.title }}</div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { dashboardRoutes } from '@/router/dashboard';
// 动态导航数据
const navList = computed(() => dashboardRoutes?.children)
const route = useRoute();

// 判断当前路由是否匹配
const isActive = (path: string) => {
    console.log(route.path, "isActive", path);
    return route.path.startsWith(path) || route.path === path;
};
</script>

<style scoped lang="scss">
.footer-box {
    margin-top: 30px;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: 20px;
    font-size: 18px;

    .nav-list {
        display: flex;
        justify-content: center;
        gap: 64px;
        padding: 0;

        .nav-item {
            text-align: center;
            cursor: pointer;
            transition: color 0.3s;

            // 定义一个循环，从 1 到 4
            @for $i from 0 through 3 {

                // 生成动态类名，如 .menu-icon-1、.menu-icon-2 等
                .nav-icon-#{$i} {
                    // 动态设置背景图片，引用对应的图标
                    background-image: url('@/assets/footer/menu#{$i}.png');
                    // 其他背景样式设置
                    background-repeat: no-repeat;
                    background-size: cover;
                    // 这里可以根据实际情况设置宽度和高度
                    width: 96px;
                    height: 96px;
                }
            }

            .nav-icon {
                width: 40px;
                height: 40px;
                background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>') no-repeat center;
                background-size: 80%;
                margin-bottom: 5px;
            }


        }

        &>li {
            color: #fff;
            opacity: 0.6;
        }

        .active {
            opacity: 1;
        }
    }
}
</style>
