<!--
@ 作者: 秦东
@ 时间: 2024-11-08 08:51:01
@ 备注: 公共底部组件
-->
<script lang='ts' setup>
import { useRoute,useRouter } from 'vue-router'
import SvgIcon from '@/components/svgIcon/index.vue'

import FloatingBall from './FloatingBall.vue'
const goTop = () => window.scrollTo({ top: 0, behavior: 'smooth' })

const route = useRoute()
const router = useRouter()
const footerActive = ref<number>(route.query.fa?route.query.fa:1)
/**
@ 作者: 秦东
@ 时间: 2024-11-12 13:14:24
@ 功能: 单击底部菜单
*/
const openPage = (val:number) => {
    switch (val) {
        case 2:
            router.push({ path: "/news",query:{id: "16213847972425134",fa:2}});
            break;
        case 3:
            router.push({ path: "/app",query:{fa:3}});
            break;
        case 4:
            router.push({ path: "/news",query:{id: "16213848089876281",fa:4}});
            break;
        case 5:
            router.push({ path: "/user",query:{fa:5}});
            break;
        case 6:
            router.push({ path: "/doc",query:{fa:6}});
            break;
        default:
            router.push({ path: "/"});
    }
}

</script>
<template>
    <div class="contentBetween">
        <div @click="openPage(1)" :class="footerActive==1?'footerBox active':'footerBox'">
            <div class="footSvg"><SvgIcon icon-class="homepage" :size="20"  /></div>
            <div>首页</div>
        </div>
        <div @click="openPage(2)" :class="footerActive==2?'footerBox active':'footerBox'">
            <div class="footSvg"><SvgIcon icon-class="gyl" :size="20"  /></div>
            <div>资讯</div>
        </div>
        <div @click="openPage(3)" :class="footerActive==3?'footerBox active':'footerBox'">
            <div class="footSvg"><SvgIcon icon-class="all" :size="20"  /></div>
            <div>应用</div>
        </div>
        <div @click="openPage(6)" :class="footerActive==6?'footerBox active':'footerBox'">
            <div class="footSvg"><SvgIcon icon-class="folder" :size="20"  /></div>
            <div>云盘</div>
        </div>  
        <div @click="openPage(5)" :class="footerActive==5?'footerBox active':'footerBox'">
            <div class="footSvg"><SvgIcon icon-class="user" :size="20"  /></div>
            <div>我的</div>
        </div>
        <FloatingBall @click="router.push({ path: '/agent',query:{fa:8}});">AI</FloatingBall>
    </div>
</template>
<style  lang='scss' scoped>

.fixBtn{
    x: 100px;
    y:300px;
    width: 50px;
    height: 50px;
    position: fixed;
}

.footerBox{
    width: 20%;
    text-align: center;
    background-color: #FFFFFF;
    padding: 10px 0;
    border-top: 1px solid #F5F5F5;
}

.footerBox.active{
    color: #409EFF;
    width: 20%;
    text-align: center;
}
</style>