<template>
    <div class="menu-module">
        <div class="menu-trigger" @click="handleMenutTrigger">
            <el-tooltip class="box-item" effect="dark" trigger="hover" :content="tipContent" placement="right">
                <img src="@/assets/images/layout/menu-module-icon.png" alt="" class="menu-module-icon">
            </el-tooltip>
        </div>
        <div :class="['menu-content', showMenus ? 'show' : 'hide']" @blur="allMenuBlur" ref="menuContent" tabindex="0">
            <div v-for="menuTopic in menuList" :key="menuTopic.id" class="menuItem">
                <div class=" menuTopic-item">{{ menuTopic.name }}</div>
                <div v-if="menuTopic.children" class="menu-sub-item">
                    <div v-for="subMenu in menuTopic.children" :key="subMenu.id" @click="handelGoSys(subMenu)">
                        <div class="menu-item">{{ subMenu.name }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onBeforeMount, nextTick, onMounted } from 'vue'
import {
    generateKey,
    getMenuLists,
} from "@/api/operation";
import router from "@/router";

// 菜单展示收起提示内容等
const tipContent = ref('展示菜单')
console.log(tipContent.value)

const showMenus = ref(false)
const menuContent = ref<any>(null)

const handleMenutTrigger = () => {
    showMenus.value = !showMenus.value
    tipContent.value = showMenus.value ? '收起菜单' : '展示菜单'
    nextTick(() => {
        menuContent.value && menuContent.value.focus() //获得焦点
    })
}

// 菜单弹出层失焦 隐藏菜单
const allMenuBlur = () => {
    nextTick(() => (showMenus.value = false))
}

// 菜单数据操作
const menuList = ref(null); // 一级菜单
const dataset = reactive({
    value: "", // token
    menuList: [],
    oldotherMenu: [],
});

onMounted(() => {
    getMenuList();
})

// 获取菜单数据
const getMenuList = () => {
    getMenuLists()
        .then((res: any) => {
            menuList.value = res.dataList || [];
        })
        .catch(() => { });
};

// 跳转是获取token
const getTokenkey = () => {
    generateKey().then((res) => {
        dataset.value = res.data;
    });
};

const linkRouter = ["BI", "QXGL", "YHYWXT", "JDYWXT", "SFYWXT", "GIS", "GS", "YHCY", "JKJC", "AQSC"]

// 跳转页面
const handelGoSys = async (menu: any) => {
    const { code, url, externalLink } = menu;
    if (!linkRouter.includes(code)) {
        router.push(url);
    } else {
        const { data: tokenKey } = await generateKey();
        if (!tokenKey) return
        if (code == "BI") {
            window.open(
                `http://183.64.175.153:15180/view/user/sso.do?tokenKey=${tokenKey}`
            );
        }
        // 权限管理
        if (code == "QXGL") {
            window.open(`http://183.64.175.153:28880/#/QXGL`);
        }
        // 养护业务系统
        if (code == "YHYWXT") {
            window.open(
                ` http://183.64.175.153:8888/fvue/login?tokenKey=${tokenKey}`
            );
        }
        // 机电业务系统
        if (code == "JDYWXT") {
            window.open(
                `http://183.64.175.153:8891/?tokenKey=${tokenKey}#/personal-center/progress-sign`
            );
        }
        // 收费业务系统
        if (code == "SFYWXT") {
            window.open(
                `http://183.64.175.153:6005/platform.html?tokenKey=${tokenKey}`
            );
        }
        // 营运系统
        if (code == "GIS") {
            window.open(`http://183.64.175.153:28882/#/?tokenKey=${tokenKey}`);
        }
        // 服务区
        if (code == "GS") {
            window.open(
                `http://183.64.175.153:21080/servicearea/index.html#/cqHome?tokenKey=${tokenKey}`
            );
        }
        // 桥梁监控监测系统
        if (code == "YHCY") {
            window.open(
                `http://111.9.41.17:9004/#/cqjlLogin?tokenKey=${tokenKey}`
            );
        }
        // 桥梁监测系统
        if (code == "JKJC") {
            window.open(
                `http://183.64.175.153:8888/fvue/loginjkjc?tokenKey=${tokenKey}`
            );
        }

        // 安全生产驾驶舱
        if (code == "AQSC") {
            window.open(`${externalLink}?tokenKey=${tokenKey}`);
        }
    }
    setTimeout(() => {
        showMenus.value = false;
    }, 1000);
}

</script>
<style style="scss" scoped>
.menu-module {
    margin: 15px;
    position: relative;

    .menu-module-icon {
        width: 30px;
        height: 30px;
    }

    .menu-content {
        width: 480px;
        height: 0px;
        background-color: #fff;
        position: absolute;
        top: 32px;
        bottom: 0;
        left: 0px;
        z-index: 99;
        transition: height 0.3s ease-in-out, bottom 0.3s ease-in-out, opacity 0.3s ease-in-out;
        opacity: 0;
        background: linear-gradient(rgba(12, 38, 65, 0.9), rgba(21, 40, 61, 0.9));
        border: 2px solid rgba(0, 188, 241, 0.4);
        border-radius: 10px;
        padding: 6px 16px 16px 6px;
        box-sizing: border-box;
    }

    .menu-content.show {
        bottom: -360px;
        height: 360px;
        opacity: 1;
    }

    .menuTopic-item {
        font-size: 16px;
        display: inline-block;
        padding: 0 10px;
        text-shadow: 2px 2px 2px #000;
        margin-top: 16px;
        margin-bottom: 6px;
        color: #badeff;
        background: linear-gradient(to right, transparent, rgba(0, 72, 137, 1), transparent);
    }

    .menuItem:hover {
        .menuTopic-item {
            color: #ffce5a;
            background: linear-gradient(to right, transparent, rgba(255, 192, 0, 0.45), transparent);
        }
    }

    .menu-sub-item {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 0 10px;
        font-size: 15px;
    }

    .menu-item {
        flex: 1;
        cursor: pointer;
        padding: 2px 8px;
        /* border-bottom: 2px solid transparent; */
    }

    .menu-item:hover {
        color: #ffce5a;
        background: rgba(236, 166, 56, 0.6);
        /* border-bottom: 2px solid #ffecb0; */
    }
}
</style>
