<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import AsideComponent from "@/components/page/main/AsideComponent.vue";
import ContentComponent from "@/components/page/main/ContentComponent.vue";
import type {IPermissionResponse, IUserMenuPermission} from "@/interface/page/user/IPermissionResponse.ts";
import {userStore} from "@/stores/user.ts";
import {menuStore} from "@/stores/menu.ts";
import type {IAppMenuList, IAppMinorMenuList} from "@/interface/app/IAppMenuList.ts";
import UserApi from "@/api/user.ts";
import type {AppServeDataResponse} from "@/interface/api/AppServeDataResponse.ts";
import {AppServeResponseCodeEnum} from "@/constant/enums/AppServeResponseCodeEnum.ts";
import type {IThisUserInfo} from "@/interface/app/IThisUserInfo.ts";
import MessageUtils from "@/utils/MessageUtils.ts";
import {Avatar} from "@element-plus/icons-vue";
import LanguageSwitch from "@/components/custom/LanguageSwitch.vue";
import {useI18n} from "vue-i18n";
import UserSetting from "@/components/page/app/UserSetting.vue";
import {appStore} from "@/stores/app.ts";

onMounted(() => {
  getMenuPermission(); // 获取菜单，加载菜单
});

const appMenu = ref<IAppMenuList[]>([]);
const showUserSetting = ref<boolean>(false); // 用户设置

const userStoreInstance = userStore();
const menuStoreInstance = menuStore();
const appStoreInstance = appStore();
const { t } = useI18n();


// 获取和加载菜单
const getMenuPermission = () => {
  // 查询用户的权限
  UserApi.permission().then(res => {
    const responseString = JSON.stringify(res.data);
    const permissionResponse: AppServeDataResponse<IPermissionResponse> = JSON.parse(responseString) as AppServeDataResponse<IPermissionResponse>;
    if (permissionResponse.code == AppServeResponseCodeEnum.SUCCESS && permissionResponse.data != undefined) {
      const permissionResponseData = permissionResponse.data;
      // 写入用户信息到 pinia 缓存
      const user: IThisUserInfo = {
        userId: permissionResponseData.userId,
        userName: permissionResponseData.userName,
        //LastLoginTime: response.data?.lastLoginTime,
        userGroup: permissionResponseData.userGroup,
        groupLevel: permissionResponseData.groupLevel,
        userLevel: permissionResponseData.userLevel,
      }
      userStoreInstance.setUserInfo(user); // 设置用户信息
      createMenuPermission(permissionResponseData.userMenuPermission); // 构建用户的菜单权限
      return;
    }
    MessageUtils.warningMessage(permissionResponse.msg);
  }).catch(() => {});
}

// 构建用户的菜单权限
const createMenuPermission = (menuPermissionList: IUserMenuPermission[]) => {
  menuStoreInstance.setUserMenu(menuPermissionList);
  userStoreInstance.clearMenuPermission(); // 清除权限缓存
  appMenu.value = [];
  let mainMenuIds: string[] = [];
  menuPermissionList.forEach((item) => {
    if(item.menuLevel == 1 && mainMenuIds.indexOf(item.menuId) == -1) {
      mainMenuIds.push(item.menuId);
    }
  });
  mainMenuIds.forEach(menuId => {
    // 查找主菜单的信息
    let mainMenu = menuPermissionList.find(permission => permission.menuId == menuId);
    if (mainMenu) {
      // 查找次级菜单
      const minorMenus = menuPermissionList.filter(item => item.fatherMenuId == menuId);
      if(minorMenus.length < 1) {
        return;
      }
      let minorMenuList: IAppMinorMenuList[] = [];
      minorMenus.forEach((item) => {
        let minorMenuItem: IAppMinorMenuList = {
          minorMenuId: item.menuId,
          minorMenuName: item.menuName,
          minorMenuIcon: item.menuIco,
          routerName: item.routerName
        }
        minorMenuList.push(minorMenuItem);
      })
      let mainMenuItem: IAppMenuList = {
        MainMenuId: mainMenu.menuId,
        mainMenuName: mainMenu.menuName,
        MainMenuIcon: mainMenu.menuIco,
        minorMenu: minorMenuList
      };
      appMenu.value.push(mainMenuItem);
    }
  });
}

</script>

<template>
  <div>
    <div style="width: 100vw; height: 40px; position: absolute; left: 0; top: 0; background-color: #6666cc">
      <el-row>
        <el-col :span="22">
          <span style="color: #f8f8f8;margin-left: 20px;line-height: 40px; font-size: 20px; font-weight: bold">{{ t('app.applicationName') }}</span>
          <!--      用于显示系统适用区域或者客户公司名称-->
          <span style="margin-left: 20px; margin-right: 20px; font-size: 0.8rem; color: #e9e6e6">{{appStoreInstance.getCustomerName()}}</span>
        </el-col>
        <el-col :span="2" style="line-height: 35px;">
          <el-tag type="success" effect="dark" @click="showUserSetting = true"><el-icon style="transform: translateY(2px)"><Avatar /></el-icon>{{userStoreInstance.getUserInfo().userName}}</el-tag>
        </el-col>
      </el-row>


    </div>
    <div style="width: 100%; height: calc(100vh - 50px); position: absolute; left: 0; top: 40px; background-color: white; display: flex">
      <div style="border-right: #6666cc solid 1px; height: calc(100vh - 45px);">
        <AsideComponent :model-value="appMenu"></AsideComponent>
      </div>
      <div style="margin-top: 1px">
        <ContentComponent></ContentComponent>
      </div>
    </div>
  </div>

<!--  用户设置-->
  <UserSetting v-model="showUserSetting"/>

</template>

<style scoped>

</style>