<template>
  <template v-for="subItem in menuList" :key="subItem.path">
    <el-menu-item-group v-if="subItem.children?.length && subItem.meta.hasOwnProperty('isGroup') && subItem.meta.isGroup">
      <template #title>
        <span class="ml-20 text-border">{{ t(`menu.${subItem.name}`) }}</span>
      </template>
      <slot name="submenu" :menu-list="subItem.children">
        <SubMenu :menuList="subItem.children" :is-collapse="isCollapse" :collapse="collapse" />
      </slot>
    </el-menu-item-group>
    <el-sub-menu v-else-if="subItem.children?.length && (!isCollapse || !subItem.meta?.isSubMenu)" :index="subItem.path">
      <template #title>
        <slot name="subtitle" :sub-item="subItem">
          <i class="iconfont flx-shrink" :class="subItem.meta.icon" v-if="!subItem.meta.isSubMenu"></i>
          <span class="sle text-h5-b" :class="{ 'ml-20': subItem.meta.isSubMenu }">{{ t(`menu.${subItem.name}`) }}</span>
        </slot>
      </template>
      <slot name="submenu" :menu-list="subItem.children">
        <SubMenu :menuList="subItem.children" :is-collapse="isCollapse" :collapse="collapse" />
      </slot>
    </el-sub-menu>
    <el-menu-item v-else :index="subItem.path" :disabled="subItem.meta?.isDisabled" @click="handleClickMenu(subItem)">
      <!-- <i class="iconfont flx-shrink" :class="subItem.meta.icon" v-if="!subItem.children"></i> -->
      <template #title>
        <slot name="menutitle" :sub-item="subItem">
          <div class="flx-justify-between flx-1 subitem-box">
            <span class="sle text-secondary-text">{{ t(`menu.${subItem.name}`) }}</span>
            <el-icon
              v-if="collapse"
              class="add-btn ml-4"
              :class="{ 'is-del': currentCommonMenu.includes(subItem.name) }"
              :title="currentCommonMenu.includes(subItem.name) ? $t('sys.layout.removeMenu') : $t('sys.layout.addMenu')"
              @click.stop="handleClickAdd(subItem)"
            >
              <component :is="currentCommonMenu.includes(subItem.name) ? RemoveFilled : CirclePlusFilled" />
            </el-icon>
          </div>
        </slot>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { computed, inject } from "vue";
import { useRouter } from "vue-router";
import type { Menu } from "@/typings/global";
import { useI18n } from "vue-i18n";
import { CirclePlusFilled, RemoveFilled } from "@element-plus/icons-vue";
import { useAuthStore } from "@/stores/modules/auth";

const authStore = useAuthStore();
const { t } = useI18n();

defineProps<{ menuList: Menu.MenuOptions[]; isCollapse: Boolean; collapse?: Boolean }>();
const router = useRouter();
// const currentRouterName = computed(() => router.currentRoute.value.name);
const currentCommonMenu = computed(() => authStore.commonMenu.map(item => item.funid));

// 子传父
const changeRightMenu = inject("changeRightMenu", Function, true);

const handleClickMenu = (subItem: Menu.MenuOptions) => {
  console.log("subItem :>>>", subItem);
  if (subItem.meta?.isSubMenu) {
    changeRightMenu(subItem);
    return;
  }
  if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
  router.push(subItem.path);

  changeRightMenu(null);
};

const addMenuToHome = inject("addMenuToHome", Function, true);
const handleClickAdd = (data: any) => {
  addMenuToHome(data);
};
</script>

<style lang="scss">
.lj-menu_list {
  --el-menu-level-padding: 10px;
}
.el-sub-menu {
  .el-sub-menu__title {
    margin: 0 $space-b1;
    &:hover {
      border-radius: $br-sm;
      // color: $color-gray-1 !important;
      // background-color: $color-primary-500 !important;
      // color: $color-gray-1 !important;
      background-color: $color-primary-000 !important;
    }
    .iconfont {
      margin-right: 5px;
      width: var(--el-menu-icon-width);
      text-align: center;
      font-size: 18px;
      vertical-align: middle;
    }
  }
}
// .lj-menu_list {
//   .el-sub-menu {
//     &.is-active {
//       position: relative;
//       &::before {
//         position: absolute;
//         top: 0;
//         right: 0;
//         bottom: 0;
//         width: 4px;
//         content: "";
//         background-color: var(--el-color-primary);
//       }
//       // & > .el-sub-menu__title {
//       //   border-radius: $br-sm;
//       //   background-color: $color-primary-000;
//       // }
//     }
//   }
// }
.el-menu--vertical.el-menu--popup-container {
  .el-sub-menu {
    &.is-active {
      & > .el-sub-menu__title {
        border-radius: $br-sm;
        background-color: $color-primary-000;
      }
    }
  }
  .el-sub-menu__title {
    span {
      margin-left: unset !important;
    }
  }
  .el-menu-item {
    .subitem-box {
      margin-left: 0;
    }
  }
}
.el-menu-item {
  margin: 0 $space-b1;
  border-radius: $br-sm;
  overflow: hidden;
  &:hover {
    // color: var(--el-menu-hover-text-color);
    // color: $color-gray-1 !important;
    background-color: $color-primary-400 !important;
    .add-btn {
      opacity: 1;
    }
    span {
      color: $color-text-primary-text;
    }
  }
  &.is-active {
    // color: var(--el-menu-active-color) !important;
    background-color: var(--el-menu-active-bg-color) !important;
    &::before {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      content: "";
      background-color: var(--el-color-primary);
    }
    span {
      color: $color-primary-500 !important;
      font-weight: 600;
    }
  }
  .iconfont {
    margin-right: 5px;
    width: var(--el-menu-icon-width);
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
  }
  .add-btn {
    opacity: 0.2;
    color: $color-polar-green-5;

    &:hover {
      opacity: 1;
    }

    &.is-del {
      color: $color-dust-red-5;
    }
  }

  .subitem-box {
    margin-left: 20px;
  }
}
.el-menu--collapse {
  .el-sub-menu .el-sub-menu__title,
  .el-menu-item {
    margin: 0;
  }
  .is-active {
    .el-sub-menu__title {
      color: #ffffff !important;
      background-color: var(--el-color-primary) !important;
    }
  }
}
.vertical,
.classic,
.transverse {
  .el-menu-item {
    &.is-active {
      &::before {
        right: 0;
      }
    }
  }
}
.columns {
  .el-menu-item {
    &.is-active {
      &::before {
        right: 0;
      }
    }
  }
}
.classic,
.transverse {
  #driver-highlighted-element-stage {
    background-color: #606266 !important;
  }
}

.aside-box.small {
  .el-menu--collapse {
    .el-sub-menu .el-sub-menu__title,
    .el-menu-item {
      --el-menu-base-level-padding: 10px;
      --el-menu-level-padding: 10px;
    }
  }
  .menu-collapse-icon {
    .el-menu-item {
      margin: 0;
    }
  }

  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title,
  .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
    --el-menu-base-level-padding: 10px;
    --el-menu-level-padding: 10px;
  }
  .el-sub-menu .el-sub-menu__title {
    margin: 0;
  }
}
</style>
