<template>
  <el-drawer
    v-model="drawer"
    size="80%"
    direction="ltr"
    :append-to-body="false"
    :with-header="false"
    modal-class="classic-right-menu"
    @closed="closed"
  >
    <el-container class="h-full" :class="`${prefixCls}`">
      <el-aside :class="`${prefixCls}__menu`">
        <el-menu :default-active="activeMenu" class="el-menu-vertical-demo">
          <el-menu-item :index="item.path" v-for="item in showMenuListGet" :key="item.name" @click="handleSelFirstMenu(item)">
            <i class="iconfont flx-shrink" :class="item.meta.icon"></i>
            <template #title>
              <span class="sle">{{ $t(`menu.${item.name}`) }}</span>
              <div class="has-children">
                <i class="iconfont iconchevron-right" v-if="item?.children && item?.children.length"></i>
              </div>
            </template>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main style="padding: 0">
        <RightSubMenu :path="activeMenu" :menu="menuList" @close="closed" />
      </el-main>
    </el-container>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useDesign } from "@/hooks/useDesign";
import { useGlobalStore } from "@/stores/modules/global";
import { useAuthStore } from "@/stores/modules/auth";
import RightSubMenu from "./components/RightSubMenu.vue";
import { useRouter } from "vue-router";

const { prefixCls } = useDesign("right-menu");
const globalStore = useGlobalStore();
const authStore = useAuthStore();
const router = useRouter();
const emit = defineEmits(["close"]);
const drawer = ref(false);
const showMenuListGet = computed(() => authStore.showMenuListGet);
const activeMenu = ref("");
const menuList = ref();

/**
 * @description 关闭导航抽屉
 */
const closed = () => {
  emit("close");
  drawer.value = false;
};

/**
 * @description 打开导航抽屉
 */
const show = () => {
  drawer.value = true;

  // 检测为空时，默认展开第一个菜单内容
  if (activeMenu.value == "") {
    menuList.value = showMenuListGet.value[0].children;
    activeMenu.value = showMenuListGet.value[0].path;
  }
};

/**
 * @description 获取当前激活的菜单
 */
const handleSelFirstMenu = (item: any) => {
  console.log("handleSelFirstMenu item :>> ", item);
  if (item?.children.length > 0) {
    menuList.value = item.children;
    activeMenu.value = item.path;
  } else {
    menuList.value = [];
    if (item.meta.isLink) return window.open(item.meta.isLink, "_blank");
    router.push(item.path);
    closed();
  }
};

defineExpose({
  show,
  closed
});
</script>

<style lang="scss" scoped>
$prefix-cls: "#{$namespace}-right-menu";

.#{$prefix-cls} {
  background-color: $color-gray-3;
  padding: 8px;
  // margin: 20px !important;
  // padding: $space-a3 $space-a2 !important;

  // background-color: var(--el-menu-bg-color);
  // border-radius: $br-sm;
  // overflow: hidden;

  &__menu {
    width: 160px;
    margin-right: 8px;
    :deep(.el-menu) {
      border-right: none;
      background-color: unset;

      .el-menu-item {
        margin: 0;
        background-color: $color-gray-1;
        border-radius: $br-sm;
        & + .el-menu-item {
          margin-top: 8px;
        }
        // &.is-active::before {
        //   right: unset;
        //   left: 0;
        // }
      }
    }
  }
  :deep(.el-main) {
    background-color: $color-gray-1;
  }
  :deep(.el-menu-item) {
    .has-children {
      position: absolute;
      right: 12px;

      .iconfont {
        font-size: 12px;
      }
    }
  }
}
</style>

<style lang="scss">
.classic-right-menu {
  // top: 54px;
  top: 40px;

  .el-drawer__body {
    padding: 0;
  }
}
</style>
