<template>
    <template v-for="menu in props.menus">
        <template v-if="menu.children && menu.children.length > 0">
            <el-sub-menu @click="onClickSubMenu(menu)" :index="getMenuKey(menu)" :key="getMenuKey(menu)">
                <template #title>
                    <Icon :color="config.getColorVal('menuColor')" :name="menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon" />
                    <span>{{ menuTitle(menu) }}</span>
                </template>
                <MenuTree :extends="{ ...props.extends, level: props.extends.level + 1 }" :menus="menu.children" />
            </el-sub-menu>
        </template>
        <template v-else>
            <el-menu-item @click="onClickMenuItem(menu)" :index="getMenuKey(menu)" :key="getMenuKey(menu)">
                <Icon :color="config.getColorVal('menuColor')" :name="menu.meta?.icon ? menu.meta?.icon : config.layout.menuDefaultIcon" />
                <span>{{ menuTitle(menu) }}</span>
            </el-menu-item>
        </template>
    </template>
</template>

<script setup lang="ts">
import { ElNotification } from 'element-plus'
import { useI18n } from 'vue-i18n'
import type { RouteRecordRaw } from 'vue-router'
import { adminBaseRoutePath } from '/@/router/static/adminBase'
import { useConfig } from '/@/stores/config'
import { getFirstRoute, getMenuKey, onClickMenu, routePush } from '/@/utils/router'

const { t, te } = useI18n()
const config = useConfig()

interface Props {
    menus: RouteRecordRaw[]
    extends?: {
        level: number
        [key: string]: any
    }
}
const props = withDefaults(defineProps<Props>(), {
    menus: () => [],
    extends: () => {
        return {
            level: 1,
        }
    },
})

const menuTitle = (menu: RouteRecordRaw) => {
    const title = menu.meta?.title
    if (typeof title !== 'string' || !title) return t('noTitle')
    return te(title) ? t(title) : title
}

const reportMenuPaths: Record<string, string> = {
    'Annual Report': '/user/moneyLog/annualReport',
    年度报表: '/user/moneyLog/annualReport',
    'Daily Report': '/user/moneyLog/dailyReport',
    日报表: '/user/moneyLog/dailyReport',
    'Customer Report': '/user/moneyLog/customerReport',
    客户报表: '/user/moneyLog/customerReport',
}

const embedMenuPaths: Record<string, string> = {
    'Domain Status': '/embed/domainStatus',
    域名状态: '/embed/domainStatus',
    'Program Widget': '/embed/programWidget',
    程序组件: '/embed/programWidget',
    'Game RTP': '/embed/gameRtp',
    '游戏 RTP': '/embed/gameRtp',
    Partnership: '/embed/partnership',
    合作伙伴: '/embed/partnership',
}

const onClickMenuItem = (menu: RouteRecordRaw) => {
    const title = typeof menu.meta?.title === 'string' ? menu.meta.title : ''
    const normalizedPath = reportMenuPaths[title] || embedMenuPaths[title]
    if (normalizedPath) {
        routePush(adminBaseRoutePath + normalizedPath)
        return
    }
    onClickMenu(menu)
}

/**
 * sub-menu-item 被点击 - 用于单栏布局和双栏布局
 * 顶栏菜单：点击时打开第一个菜单
 * 侧边菜单（若有）：点击只展开收缩
 *
 * sub-menu-item 被点击时，也会触发到 menu-item 的点击事件，由 el-menu 内部触发，无法很好的排除，在此检查 level 值
 */
const onClickSubMenu = (menu: RouteRecordRaw) => {
    if (props.extends?.position == 'horizontal' && props.extends.level <= 1 && menu.children?.length) {
        const firstRoute = getFirstRoute(menu.children)
        if (firstRoute) {
            onClickMenu(firstRoute)
        } else {
            ElNotification({
                type: 'error',
                message: t('utils.No child menu to jump to!'),
            })
        }
    }
}
</script>

<style scoped lang="scss">
.el-sub-menu .icon,
.el-menu-item .icon {
    vertical-align: middle;
    margin-right: 8px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}
.is-active > .icon {
    color: var(--el-menu-active-color) !important;
}
.el-menu-item.is-active {
    background-color: v-bind('config.getColorVal("menuActiveBackground")');
    box-shadow: inset 3px 0 0 v-bind('config.getColorVal("menuActiveColor")');
}
</style>
