<template>
  <div class="sidebar" :class="{ 'isPhone': isPhone, 'sidebar-active': isPhoneActive }">
    <div class="logo-warp">
      <MenuLogo class="layout-logo" :collapsed="isCollapse"></MenuLogo>
      <selectSearch></selectSearch>
    </div>
    <el-menu
      :default-active="activeIdex"
      class="el-menu-vertical-demo"
      :collapse="getIsCollapse"
      @open="handleOpen"
      @close="handleClose"
      background-color="#304156"
      router
      unique-opened
    >
      <!-- <selectSearch></selectSearch> -->
      <MenuItem :menuList="menuList"></MenuItem>
    </el-menu>
  </div>
  <div class="sidebar-overlay" v-show="isPhoneActive" @click="sidebarClose"></div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, unref, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import { menuStore } from "@/store/menu";
import MenuItem from "./MenuItem.vue";
import MenuLogo from "@/layout/menu/MenuLogo.vue";
import selectSearch from "@/components/selectSearch.vue";
import { useWindowSize, useThrottleFn } from "@vueuse/core";
// setup语法糖中 定义的数据和方法，直接可以在模板中使用，无需要 return
const store = menuStore();

const isPhone = ref(false)
const { width } = useWindowSize()
// 使用节流防止多次触发屏幕
const throttledFnWidth = useThrottleFn(() => {
    isPhone.value = unref(width) < 768
    store.setIsPhone(isPhone.value)
}, 500, true)
onMounted(() => {
    isPhone.value = unref(width) < 768
    store.setIsPhone(isPhone.value)
    if (isPhone) window.addEventListener('resize', throttledFnWidth)
})
onUnmounted(() => {
    window.removeEventListener('resize', throttledFnWidth)
})
//当前路由
const route = useRoute();
const activeIdex = computed(() => {
  const { path } = route;
  return path;
});
//菜单数据
const menuList = computed(() => {
  return store.menuList;
});
// let menuList = reactive([
//     {
//         path: '/dashboard',
//         component: "Layout",
//         meta: {
//             title: "首页",
//             icon: "HomeFilled",
//             roles: ["sys:manage"]
//         },
//         children: []
//     },
//     {
//         path: "/system",
//         component: "Layout",
//         alwaysShow: true,
//         name: "system",
//         meta: {
//             title: "系统管理",
//             icon: "Menu",
//             roles: ["sys:manage"],
//             parentId: 0,
//         },
//         children: [
//             {
//                 path: "/department",
//                 component: "/system/department/department",
//                 alwaysShow: false,
//                 name: "department",
//                 meta: {
//                     title: "机构管理",
//                     icon: "Platform",
//                     roles: ["sys:dept"],
//                     parentId: 17,
//                 },
//             },
//             {
//                 path: "/userList",
//                 component: "/system/User/UserList",
//                 alwaysShow: false,
//                 name: "userList",
//                 meta: {
//                     title: "用户管理",
//                     icon: "el-icon-s-custom",
//                     roles: ["sys:user"],
//                     parentId: 17,
//                 },
//             },
//             {
//                 path: "/roleList",
//                 component: "/system/Role/RoleList",
//                 alwaysShow: false,
//                 name: "roleList",
//                 meta: {
//                     title: "角色管理",
//                     icon: "el-icon-s-tools",
//                     roles: ["sys:role"],
//                     parentId: 17,
//                 },
//             },
//             {
//                 path: "/menuList",
//                 component: "/system/Menu/MenuList",
//                 alwaysShow: false,
//                 name: "menuList",
//                 meta: {
//                     title: "权限管理",
//                     icon: "el-icon-document",
//                     roles: ["sys:menu"],
//                     parentId: 17,
//                 },
//             },
//         ],
//     },
//     {
//         path: "/goods",
//         component: "Layout",
//         alwaysShow: true,
//         name: "goods",
//         meta: {
//             title: "商品管理",
//             icon: "el-icon-document",
//             roles: ["sys:goods"],
//             parentId: 0,
//         },
//         children: [
//             {
//                 path: "/goodCategory",
//                 component: "/goods/goodsCategory/goodsCategoryList",
//                 alwaysShow: false,
//                 name: "goodCategory",
//                 meta: {
//                     title: "商品分类",
//                     icon: "el-icon-document",
//                     roles: ["sys:goodsCategory"],
//                     parentId: 34,
//                 },
//             },
//         ],
//     },
//     {
//         path: "/systenConfig",
//         component: "Layout",
//         alwaysShow: true,
//         name: "systenConfig",
//         meta: {
//             title: "系统工具",
//             icon: "el-icon-document",
//             roles: ["sys:systenConfig"],
//             parentId: 0,
//         },
//         children: [
//             {
//                 path: "/document",
//                 component: "/system/config/systemDocument",
//                 alwaysShow: false,
//                 name: "http://42.193.158.170:8089/swagger-ui/index.html",
//                 meta: {
//                     title: "接口文档",
//                     icon: "el-icon-document",
//                     roles: ["sys:document"],
//                     parentId: 42,
//                 },
//             },
//         ],
//     },
// ]);
const isCollapse = computed(() => {
  // return store.getters['getCollapse']
  return store.getCollapse;
});
const getIsCollapse = computed(() => {
    if (unref(isPhone)) return false
    return store.getCollapse
})
const isPhoneActive = computed(() => {
    return unref(isPhone) && unref(isCollapse)
})
const handleOpen = (key: string | number, keyPath: string) => {};
const handleClose = (key: string | number, keyPath: string) => {};
const sidebarClose = () => {
    store.setCollapse(false)
}
</script>
<style scoped>
.logo-warp {
  position: sticky;
  top: 0;
  background-color: #2B2F3A;
  z-index: 1999;
  padding-bottom: 4px;
}
@keyframes logoAnimation {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}
.layout-logo {
  animation: logoAnimation 1s ease-out;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}
.el-menu {
  border-right: none;
}

:deep(.el-sub-menu .el-sub-menu__title) {
  color: #f4f4f5 !important;
}

:deep(.el-menu .el-menu-item) {
  color: #bfcbd9;
}
/* 菜单点中文字的颜色 */

:deep(.el-menu-item.is-active) {
  color: #409eff !important;
}
/* 当前打开菜单的所有子菜单颜色 */

:deep(.is-opened .el-menu-item) {
  background-color: #1f2d3d !important;
}
/* 鼠标移动菜单的颜色 */

:deep(.el-menu-item:hover) {
  background-color: #001528 !important;
}
/* 移动端适配显示 */
.isPhone {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100vh;
    z-index: 1199;
    overflow-y: auto;
    background-color: #304156;
    margin-left: -238px;
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    transition: all .4s ease;
}
.sidebar-overlay {
    background-color: rgba(0, 0, 0, 0.6);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
.sidebar-active {
    margin-left: 0 !important;
}
</style>
