<script setup>
import { reactive, ref, watch } from "vue";
import { useRoute,useRouter } from "vue-router";
import { useStore } from "vuex";
const route = useRoute();
const router= useRouter()
const store=useStore()

let activePath = ref("/report/classify");
watch(
  () => route.path,
  (to) => {
    activePath.value = to;
  },
  {
    immediate: true,
  }
);

// 点击有二级菜单的默认打开第一个
const submenuEvent = (index)=>{
  let tem=null
  menuList.forEach(_item=>{
    if(_item.path==index){
      tem=_item.children
    }
  })
  if(tem){
    let flag=false
    tem.forEach(item=>{
      if(item.path==route.path){
        flag=true
      }
    })
    if(flag) return
    router.push(tem[0].path)
  }
}

let menuList = reactive([
  {
    MenuId: 1,
    name: "研报",
    path: "/report/classify",
    icon_path: new URL('../../assets/leftNav/report-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 8,
    name: "线上路演",
    path: "/roadshow/video/list",
    icon_path: new URL('../../assets/leftNav/roadShowVideo-s.png', import.meta.url).href,
    children: null,
  },
  // {
  //   MenuId: 2,
  //   name: "价格驱动",
  //   path: "/pricedriven",
  //   icon_path: new URL('../../assets/leftNav/chart-s.png', import.meta.url).href,
  //   children: null,
  // },
  {
    MenuId: 2,
    name: "我的图库",
    path: "/mychart/list",
    icon_path: new URL('../../assets/leftNav/chart-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 8,
    name: "持仓分析",
    path: "/positionanalysis/index",
    icon_path: new URL('../../assets/leftNav/positionAnalysis-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 3,
    name: "活动",
    path: "/activity/list",
    icon_path: new URL('../../assets/leftNav/activity-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 4,
    name: "沙盘推演",
    path: "/sandBox/list",
    icon_path: new URL('../../assets/leftNav/sandBox-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 5,
    name: "视频社区",
    path: "/video/list",
    icon_path: new URL('../../assets/leftNav/video-s.png', import.meta.url).href,
    children: null,
  },
  {
    MenuId: 6,
    name: "问答",
    path: "/question/list",
    icon_path: new URL('../../assets/leftNav/question-s.png', import.meta.url).href,
    children: [
      {
        MenuId:6.1,
        name:'问答社区',
        path:'/question/list'
      },{
        MenuId:6.2,
        name:'我的问答',
        path:'/question/mylist'
      }
    ],
  },
  {
    MenuId: 7,
    name: "语音播报",
    path: "/voice/list",
    icon_path: new URL('../../assets/leftNav/voice-s.png', import.meta.url).href,
    children: null,
  }
]);

// 设置语音播报侧边栏
watch(
  ()=>store.state.userInfo,
  ()=>{
    menuList.forEach(item=>{
      if(item.MenuId==7){
        if(store.state.userInfo?.is_voice_admin==1){
          item.children=[
            {
              MenuId:7.1,
              name:'语音播报',
              path:'/voice/list'
            },
            {
              MenuId:7.2,
              name:'我的语音',
              path:'/voice/mine'
            },
          ]
        }else{
          item.children=null
        }
      }
    })
  },
  {
    deep:true,
    immediate:true
  }
)

</script>

<template>
  <div class="aside-wrap">
    <el-menu 
      router 
      :default-active="activePath" 
      @open="submenuEvent"
      unique-opened 
      text-color="#333" 
      active-text-color="#F3A52F" 
      class="el-menu-wrap"
    >
      <template v-for="menu in menuList">
        <el-menu-item :index="menu.path" :key="menu.MenuId" v-if="!menu.children">
          <img class="menu-icon" :src="menu.icon_path" alt="" />
          <span class="menu-text">{{ menu.name }}</span>
        </el-menu-item>
        <el-sub-menu :index="menu.path" :key="menu.MenuId"  v-else>
          <template #title>
            <img class="menu-icon" :src="menu.icon_path" alt="" />
            <span class="menu-text">{{ menu.name }}</span>
          </template>
          <el-menu-item 
            v-for="child in menu.children" 
            :key="child.MenuId" 
            :index="child.path" 
            style="text-align: center"
          >
            {{ child.name }}
          </el-menu-item>
        </el-sub-menu>
      </template>
    </el-menu>
  </div>
</template>


<style lang="scss" scoped>
.aside-wrap {
  padding-top: 20px;
  position: relative;
  border-right:1px solid #F2F2F2;
  height: 100%;
  &::-webkit-scrollbar {
    width: 0;
  }
}

.el-menu-wrap {
  width: 100%;
  border: none;
}
.el-menu-item:hover{
  background-color: #FFFBF5;
}
.el-menu-item.is-active {
  background-color: #FFFBF5 !important;
}
.menu-icon {
  width: 20px;
  height: 20px;
  margin-right: 20px;
  vertical-align: middle;
}
.menu-text {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  font-weight: bold;
}
.el-sub-menu .el-menu-item{
  padding: 0 20px !important;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
}
ul,
li {
  box-sizing: border-box;
  display: block;
}
</style>
