<template>
  <el-container class="h-full" :class="`${prefixCls}`">
    <el-aside width="220px">
      <el-scrollbar>
        <el-menu
          :default-active="activeSubMenu"
          :router="false"
          :collapse-transition="false"
          :unique-opened="true"
          menu-trigger="hover"
        >
          <SubMenu :menuList="menu" :is-collapse="true">
            <template #menutitle="scoped">
              <!-- {{ scoped }} -->
              <span class="sle">{{ $t(`menu.${scoped?.subItem.name}`) }}</span>
              <div class="has-children">
                <i class="iconfont iconchevron-right" v-if="scoped.subItem?.meta.isSubMenu"></i>
                <!-- v-if="scoped.subItem?.meta.consolerightMenu && scoped.subItem.meta.consolerightMenu.length" -->
              </div>
            </template>
            <template #submenu="scoped">
              <SubMenu :menuList="scoped.menuList" :is-collapse="true">
                <template #menutitle="subscoped">
                  <span class="sle">{{ $t(`menu.${subscoped?.subItem.name}`) }}</span>
                  <div class="has-children">
                    <i class="iconfont iconchevron-right" v-if="subscoped.subItem?.meta.isSubMenu"></i>
                    <!-- v-if="subscoped.subItem?.meta.consolerightMenu && subscoped.subItem.meta.consolerightMenu.length" -->
                  </div>
                </template>
              </SubMenu>
            </template>
          </SubMenu>
        </el-menu>
      </el-scrollbar>
    </el-aside>
    <el-main :class="`${prefixCls}__main ${menuArrangedVertically ? 'is-vertical' : ''}`">
      <template v-if="rightMenu">
        <LjHeader :class="`${prefixCls}-group-header mian-header`" size="large" :title="$t(`menu.${rightMenu.name}`)">
          <template #toolButton>
            <el-radio-group v-model="menuArrangedVertically" size="small" @change="handleChangeMenuArranged">
              <el-radio-button :label="false">
                <i class="iconfont iconrows-03"></i>
              </el-radio-button>
              <el-radio-button :label="true">
                <i class="iconfont iconcolumns-03"></i>
              </el-radio-button>
            </el-radio-group>
          </template>
        </LjHeader>
        <div :class="`${prefixCls}__main-list`">
          <div :class="`${prefixCls}-group`" v-if="rightMenuListBase.length">
            <ul :class="`${prefixCls}-group-list`">
              <template v-for="(item, index) in rightMenuListBase" :key="index">
                <li :class="`${prefixCls}-group-item`" @click="handleSelItem(item)">
                  <span class="text-body-m">{{ $t(`menu.${item.name}`) }}</span>
                </li>
              </template>
            </ul>
          </div>
          <MenuList :menu="rightMenuListChild" @sel-item="handleSelItem" />
        </div>
      </template>
    </el-main>
  </el-container>
</template>

<script setup lang="ts">
import { ref, computed, provide, watch } from "vue";
import { useDesign } from "@/hooks/useDesign";
import SubMenu from "../SubMenu.vue";
import MenuList from "./MenuList.vue";
import LjHeader from "@/components/LjHeader/index.vue";
import { getShowMenuList } from "@/utils/index";
import { useRoute, useRouter } from "vue-router";
import { useGlobalStore } from "@/stores/modules/global";
import { storeToRefs } from "pinia";

interface RightMenuSubProps {
  menu: any;
  path: string;
}

const props = withDefaults(defineProps<RightMenuSubProps>(), {
  menu: [],
  path: ""
});

const { prefixCls } = useDesign("right-menu__submenu");
const route = useRoute();
const router = useRouter();
const globalStore = useGlobalStore();
const activeSubMenu = ref("");
const activeSubMenuHistory = ref<any>({});
const rightMenu = ref();
const rightMenuList = ref();
/**
 * @description 菜单中，含有下级的列表
 */
const rightMenuListChild = computed(() => {
  return rightMenuList.value.filter((item: any) => item?.children);
});
/**
 * @description 菜单中，直属下级
 */
const rightMenuListBase = computed(() => {
  return rightMenuList.value.filter((item: any) => !item?.children || !item?.children.length);
});
/**
 * @description 是否是菜单竖向布局
 */
// const { menuArrangedVertically } = storeToRefs(globalStore);
// const menuArrangedVertically = ref(globalStore.menuArrangedVertically)
const menuArrangedVertically = ref(false);
const handleChangeMenuArranged = (val: any) => {
  globalStore.setGlobalState("menuArrangedVertically", val);
};

const emit = defineEmits(["close"]);

const changeRightMenu = (val: any) => {
  if (val) {
    rightMenu.value = val;
    console.log("val :>> ", val);
    // rightMenuList.value = val.meta?.consolerightMenu ? getShowMenuList(val.meta?.consolerightMenu) : [];
    rightMenuList.value = val.meta?.isSubMenu ? getShowMenuList(val.children) : [];

    console.log("rightMenuList.value :>> ", rightMenuList.value);
    console.log("rightMenuListBase.value :>> ", rightMenuListBase.value);
    activeSubMenuHistory.value[props.path] = val.path;
  } else {
    emit("close");
  }
};

watch(
  () => props.menu,
  val => {
    console.log("watch val :>> ", val);
    let _index = 0;
    if (activeSubMenuHistory.value.hasOwnProperty(props.path)) {
      _index = val.findIndex((item: any) => item.path === activeSubMenuHistory.value[props.path]);
      if (_index == -1) _index = 0;
    }
    console.log("_index :>> ", _index);
    if (val[_index]?.meta?.isSubMenu) {
      // if (val[_index]?.meta?.isSubMenu || val[_index]?.children) {
      let target = val[_index];
      // if (val[_index]?.children) {
      //   let _idx = val[_index].children.findIndex((item: any) => item.path === activeSubMenuHistory.value[props.path]);
      //   if (_idx == -1) _idx = 0;
      //   target = val[_index].children[_idx];
      // }
      console.log("props.menu :>> ", props.menu);
      console.log("props.path :>> ", props.path);
      console.log("target.path :>> ", target);
      changeRightMenu(target);
      activeSubMenuHistory.value[props.path] = target.path;
      activeSubMenu.value = target.meta.activeMenu ? target.meta.activeMenu : target.path;
    } else {
      rightMenu.value = null;
    }
    console.log("activeSubMenuHistory.value :>> ", activeSubMenuHistory.value);
    console.log("activeSubMenu.value :>> ", activeSubMenu.value);
  },
  {
    immediate: true
  }
);
provide("changeRightMenu", changeRightMenu);

// const selMenuItem = (val: any) => {
//   if (val) {
//     rightMenu.value = val;
//     rightMenuList.value = getShowMenuList(val.meta?.consolerightMenu);
//     console.log("changeRightMenu rightMenu.value :>> ", rightMenu.value);
//   } else {
//     emit("close");
//   }
// };
// provide("selMenuItem", selMenuItem);
const handleSelItem = (subItem: any) => {
  console.log("handleSelItem data :>> ", subItem);
  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
  router.push(subItem.path);
  emit("close");
};
</script>

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

.#{$prefix-cls} {
  margin: 0;
  padding: 0;
  background-color: $color-gray-2 !important;
  border-radius: $br-sm;
  overflow: hidden;

  .el-aside {
    height: 100%;
    background-color: $color-gray-1 !important;
  }
  .el-menu {
    padding: 8px 0;
    border-right: none;
  }
  &__main {
    border-left: 1px solid $color-text-dividers;
    background-color: unset !important;

    .mian-header {
      margin-bottom: $space-a2;
    }

    &.is-vertical {
      .#{$prefix-cls}__main-list {
        -webkit-column-count: 3; /* 将列表分成两列 */
        -moz-column-count: 3;
        column-count: 3;
        -webkit-column-gap: $space-a2; /* 列之间的间隔 */
        -moz-column-gap: $space-a2;
        column-gap: $space-a2;

        .#{$prefix-cls}-group {
          position: relative;
          background-color: $color-gray-1;
          border-radius: $br-sm;

          ul {
            margin: 0;
          }

          &-header {
            padding: $space-b1 $space-b2;
          }
        }
      }
    }
    &:not(.is-vertical) {
      .#{$prefix-cls}-group-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        justify-items: start;
      }
    }
  }

  .el-menu-item {
    .has-children {
      position: absolute;
      right: 12px;

      .iconfont {
        font-size: 12px;
      }
    }
  }

  &-group {
    overflow: hidden;

    &-header {
      color: $color-text-secondary-text;
      border-bottom: 1px solid $color-text-border;
    }

    &-list {
      list-style: none;
      padding: 0;
    }

    &-item {
      width: 100%;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      text-align: left;
      color: $color-text-primary-text;
      cursor: pointer;
      border-radius: $br-sm;
      vertical-align: middle;
      padding: $space-b2 $space-a2 $space-b2 $space-b1;
      display: inline-block;
      position: relative;

      &:hover {
        background-color: $color-gray-4;
        color: $color-primary-500;
      }
    }
  }
}
</style>
