<script setup lang="ts">
import {ElRow} from "element-plus";
import type {IAppMenuList, IAppMinorMenuList} from "@/interface/app/IAppMenuList.ts";
import {tabsStore} from "@/stores/tabs.ts";
import {computed} from "vue";
import {menuStore} from "@/stores/menu.ts";
import {useI18n} from "vue-i18n";

const modelValue = defineModel<IAppMenuList[] | any>('modelValue', {required: false, default: []});
const appTabsInstance = tabsStore();
const menuInstance = menuStore();
const { t } = useI18n();

let selectMenu = computed({
  get() {
    return menuInstance.selectMenu;
  },
  set(newVal) {
    menuInstance.selectMenu = newVal;
  }
})

// 点击子菜单事件
const clickMenu = (minorItem: IAppMinorMenuList): void => {
  const tab = appTabsInstance.getAppTab(minorItem.minorMenuId);
  if (tab) {
    appTabsInstance.setSelectTab(tab.tabName);
    selectMenu.value = tab.tabName;
    return;
  }
  appTabsInstance.addAppTab({
    tabLabel: minorItem.minorMenuName,
    tabName: minorItem.minorMenuId,
    tabRouterName: minorItem.routerName
  })
  appTabsInstance.setSelectTab(minorItem.minorMenuId);
  selectMenu.value = minorItem.minorMenuId;
}
</script>

<template>
  <el-row style=" background-color: white; text-align: center">
    <span style="font-weight: bolder; font-size: 20px; height: 40px; width: 260px">{{ t('mainPage.mainMenu')}}</span>
  </el-row>
  <el-row style="height: calc(100vh - 90px);">
    <el-scrollbar style="width: 261px;height: calc(100vh - 90px);">
      <el-menu class="main-menu" style="width: 261px;height: calc(100vh - 90px);"
               :default-active="selectMenu" unique-opened>
        <el-sub-menu v-for="appMenuItem in modelValue" :index='appMenuItem.MainMenuId' :key="appMenuItem.MainMenuId">
          <template #title>
            <el-icon color="#409EFC">
              <component :is='appMenuItem.MainMenuIcon'></component>
            </el-icon>
            <span class="menuTitle">{{ appMenuItem.mainMenuName }}</span>
          </template>
          <div v-for="minorItem in (appMenuItem.minorMenu)">
            <el-menu-item :index='minorItem.minorMenuId' @click="clickMenu(minorItem)">
              ✦&nbsp;&nbsp;{{ minorItem.minorMenuName }}
            </el-menu-item>
          </div>
        </el-sub-menu>
      </el-menu>
    </el-scrollbar>
  </el-row>
</template>

<style scoped>
.main-menu {
  --el-menu-item-height: 40px;
  --el-menu-sub-item-height: calc(var(--el-menu-item-height) - 6px);
  --el-menu-active-color: #6666cc;
}
</style>