<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:00:26
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-06 15:51:05
 * @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 in navList" :key="item.path" :class="{ active: isActive(item.fullPath) }">
                <router-link :to="item.fullPath" class="nav-item">
                    <div class="nav-icon"></div>
                    <div>{{ 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;

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

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

            .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;
            }
        }

        .active {
            color: #42a5f5;

            .nav-icon {
                background-image: 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>'), linear-gradient(45deg, #42a5f5, #1976d2);
                background-blend-mode: multiply;
                filter: drop-shadow(0 0 5px #42a5f5);
            }
        }
    }
}
</style>
