<template>
  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <!--    <sidebar v-if="!sidebar.hide" class="sidebar-container" />-->
    <!--    <div class="z-24 absolute w-500px bg-green top-85px left-0">-->
    <el-drawer class="w-30vw! menu-style" v-model="useAppStore().newMenuShow" :direction="'ltr'"
      style="background-color:rgba(28, 121, 244,.9)">
      <template #title>
        <div class="flex-justify-end color-white fw-bold text-20px">菜单</div>
      </template>
      <template #default>
        <div class="flex justify-between">
          <div class="color-white">全局导航</div>
          <div class="flex flex-justify-end">
            <el-input placeholder="请输入菜单名称" v-model="seachMenu" clearable>
              <template #append>
                <el-button @click="handleSearchMenu" :icon="Search" />
              </template>
            </el-input>
          </div>
        </div>

        <div v-for="(item, index) in newMenuCard" :key="index">

          <el-divider class="left-0 mt-20px" content-position="left" border-style="double" style="">
            <div class="color-white text-16px lh-relaxed font-bold">{{ item.meta.title }}</div>
          </el-divider>

          <el-row>
            <el-col :lg="4" :md="6" :sm="8" class="m-10px" v-for="(q, w) in item?.children" :key="w">
              <el-button @click="toLink(q, item.path)" class="color-white text-14px"
                style="background-color: rgba(83, 152, 242, 0.6);">
                {{ q.meta.title }}
              </el-button>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-drawer>
    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <navbar @setLayout="setLayout" />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <settings ref="settingRef" />
    </div>
  </div>
</template>

<script setup>
import {useWindowSize} from '@vueuse/core'
import {AppMain, Navbar, Settings, TagsView} from './components'

import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from "@/store/modules/permission.js";
import {useRouter} from "vue-router";
import {Search} from "@element-plus/icons-vue";

const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme);
const sidebar = computed(() => useAppStore().sidebar);
const device = computed(() => useAppStore().device);
const needTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);

const router = useRouter();
const toLink = async (q, path) => {
  await router.push(path + "/" + q.path);
  useAppStore().toggleNewMune();
}
const seachMenu = ref("");
const handleSearchMenu = () => {
  if (seachMenu.value === "") {
    newMenuCard.value = usePermissionStore().sidebarRouters.filter(item => item.hidden === false);
    return;
  }

  const keyword = seachMenu.value.toLowerCase();
  const matchedMenus = [];

  newMenuCard.value.forEach(item => {
    if (item.meta.title.toLowerCase().includes(keyword)) {
      matchedMenus.push(item);
    } else if (item.children) {
      const matchedChildren = item.children.filter(child => child.meta.title.toLowerCase().includes(keyword));
      if (matchedChildren.length > 0) {
        matchedMenus.push({
          ...item,
          children: matchedChildren
        });
      }
    }
  });

  // 更新 newMenuCard 以显示匹配的菜单项
  newMenuCard.value = matchedMenus;
};

const newMenuCard = ref(usePermissionStore().sidebarRouters.filter(item => item.hidden === false));

const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
  openSidebar: sidebar.value.opened,
  withoutAnimation: sidebar.value.withoutAnimation,
  mobile: device.value === 'mobile'
}))

const { width, height } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design

watch(() => device.value, () => {
  if (device.value === 'mobile' && sidebar.value.opened) {
    useAppStore().closeSideBar({ withoutAnimation: false })
  }
})

watchEffect(() => {
  if (width.value - 1 < WIDTH) {
    useAppStore().toggleDevice('mobile')
    useAppStore().closeSideBar({ withoutAnimation: true })
  } else {
    useAppStore().toggleDevice('desktop')
  }
})

function handleClickOutside() {
  useAppStore().closeSideBar({ withoutAnimation: false })
}

const settingRef = ref(null);

function setLayout() {
  settingRef.value.openSetting();
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";
@import "@/assets/styles/variables.module.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

:deep(.el-drawer__header) {
  margin-bottom: 0;
  color: white;
}


:deep(.el-divider__text) {
  left: 0;
  background-color: rgb(28, 121, 244);
  border-radius: 10px;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.sidebarHide .fixed-header {
  width: 100%;
}

.mobile .fixed-header {
  width: 100%;
}
</style>