<template>
	<div class="intelligenceLeftTabBar">
        <div class="navBox" :class="{navBoxShow:isNavMenuShow}">
            <div class="navList" v-for="(item,index) in navList " :key="index" :class="{on:navPath==item.path}" @click="onNavListClick(item.path)">
                <div class="icon" :style="{background:`url(${item.img})no-repeat`,backgroundSize:'24px 24px',backgroundPosition:'17px 17px'}"></div>
                <span class="text-tip-1" style="white-space: nowrap; ">{{ item.name }}</span>
            </div>
        </div>

        <img class="show" src="@/assets/icons/muenShow.png" :style="isNavMenuShow?'transform: scaleX(1)':''" alt="" @click="()=>{isNavMenuShow=!isNavMenuShow}">
	</div>
</template>

<script setup>
import muen1 from '@/assets/icons/tool-item-icon1.png'
import muen2 from '@/assets/icons/tool-item-icon2.png'
import muen3 from '@/assets/icons/tool-item-icon3.png'
import muen4 from '@/assets/icons/tool-item-icon4.png'

import { onMounted, onUnmounted, ref, nextTick } from "vue";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { useWrittingAsstaintStore } from "@/stores/writtingAsstaintStore";
const isNavMenuShow=ref(false)
const navList=ref([
    {
        img:muen1,
        path:'/writtingAsstaint',
        name:'智能写报'
    },
    {
        img:muen2,
        path:'/writtingAsstaint1',
        name:'智能翻译'
    },
    {
        img:muen3,
        path:'/writtingAsstaint2',
        name:'智能查询'
    },
    {
        img:muen4,
        path:'/writtingAsstaint3',
        name:'智能对话'
    },
])
const navPath=ref()
const route=useRoute()
if(route.path){
    navPath.value=route.path
}
const onNavListClick=(path)=>{
    navPath.value=path
}
</script>
<style lang="scss" scoped>
.intelligenceLeftTabBar{
    padding: 5px 0;
     border-right: 1px solid rgb(234, 236, 238);
     position: relative;
    .navBox{
        height: 100%;
        width: 65px;
        transition: all 0.3s;
        padding: 0 3px;
        .navList{
            display: flex;
            align-items: center;
            cursor: pointer;
            border-radius: 8px;
            overflow: hidden;
            height: 60px;
            .icon{
                width: 60px;
                height: 60px;
                flex-shrink: 0;
                border-radius: 10px;
                margin-right: 15px;
            }
        }
        .on{
            background-color: var(--color-primary-10);
            color: var(--color-primary-100);
            font-weight: Bold;
        }
    }
    .navBoxShow{
        width: 200px;
        transition: all 0.3s;
    }
    .show{
        position: absolute;
        width: 24px;
        height: 24px;
        right: 21px;
        bottom: 21px;
        cursor: pointer;
        transform: scaleX(-1)
    }
}


</style>