<template>
    <!-- 二级菜单 -->
    <ul v-if="$route.name === 'business'">
        <!-- 一级 -->
        <li v-for="(item, index) in menuList" :key="index" @mouseenter.stop="enter(item.name, index)"
            @mouseleave.stop="Leave" @click="handelGoFirstMenu(item, index)" id="hide">
            <a @click="tonewPath(item.name, index)" :class="index == Numberindex ? 'menuItem-active' : 'menuItem'">
                {{ item.name }}
            </a>
        </li>
    </ul>
    <ul v-else>
        <li :class="(currentAlias === item.url || index == Numberindex) ? 'menuItem-active' : 'menuItem'"
            v-for="(item, index) in subMenus" @mouseenter.stop="enter(item.name, index)" @mouseleave.stop="Leave"
            @click="handelGoHtml(item, index)" :key="index">
            {{ item.name }}
        </li>
    </ul>
</template>
<script lang="ts" setup>
import { computed, onBeforeMount, reactive, ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import {
    generateKey,
    getMenuLists,
} from "@/api/operation";
import { routes } from "@/router/index";
import router from "@/router";
import { useStore } from "vuex";
import { key } from "@/store";
const store = useStore(key);
const userCode = computed(() => store.state.auth?.userInfo.userCode);
const secondRouterNameList = [
    "curingManageCopy",
    "curingBusinessCopy",
    "electromechanicalMange",
    "electromechanicalOverview",
];
const menuList = ref(null); // 一级菜单
const newMenuList = ref(null); // 二级菜单
const display = ref(false);
const Numberindex = ref(null); // 一级菜单active
const towMenuListIndex = ref(""); // 二级菜单active


const subMenus = ref(null); // 二级菜单
const currentAlias = ref('')
const route = useRoute();

// onBeforeMount(() => {
//     getMenuList();
// });





// //一级移入
const enter = async (name: any, item: any) => {
    Numberindex.value = item;
    towMenuListIndex.value = "";
    display.value = true;
};

const Leave = async (event) => {
    Numberindex.value = null;
    towMenuListIndex.value = "";
    display.value = false;
};


const handelGoFirstMenu = (item: any, index: any) => {
    if (!item) {
        return;
    } else {
        subMenus.value = item.children || []
        if (item.code === 'ZHFW') {
            const zhfw = subMenus.value.filter((menu) => menu.code === 'JYGK' || menu.code === 'GS')
            zhfw.forEach((menu) => {
                if (menu.code === 'JYGK') {
                    menu.url.indexOf('/') > -1 ? null : menu.url = `/${menu.url}`
                }
            })
            subMenus.value = zhfw
        } else if (item.code === 'ZHYH') {
            getYHMenu()
        } else if (item.code === 'ZHYX') {
            const targetIndex = subMenus.value.findIndex((menu) => menu.code === "LDJSC")
            // 如果找到了目标项
            if (targetIndex !== -1) {
                const target = subMenus.value[targetIndex]
                // 从数组中移除目标项
                subMenus.value.splice(targetIndex, 1);
                // 将目标项添加到数组的开头

                subMenus.value.unshift(target);
            }
        }
        if (subMenus.value && subMenus.value.length) {
            router.push(subMenus.value[0].url || subMenus.value[0].path);
            currentAlias.value = subMenus.value[0].url;
        }

    }
}

const getYHMenu = () => {
    const root = routes.find((e) => e.path === "/");
    let newroute: any[] = [];

    if (root && root.children?.length > 0) {
        root.children?.forEach((ele) => {
            if (secondRouterNameList.includes(ele.name)) {
                let newroute1 = { ...ele }
                newroute1.url = ele.path
                newroute1.code = ele.name
                newroute1.name = ele.title
                newroute.push(newroute1);
            }
        });
    }
    subMenus.value = [...newroute, {
        name: '桥梁监测',
        code: 'JKJC',
    }]
}

const handelGoHtml = async (item: any, index: any) => {
    if (!item) {
        return;
    }
    const { name, code, url, externalLink } = item;
    towMenuListIndex.value = index;

    const linkCodes = ['BI', 'QXGL', "YHYWXT", "JDYWXT", "SFYWXT", "GIS", "GS", "YHCY", "JKJC", "AQSC"]
    if (linkCodes.includes(code)) {
        generateKey().then((res) => {
            // 机电系统
            // if (name == "机电系统") { window.open(`http://183.64.175.153:8891/?tokenKey=${res.data}#/m-datav/management`) }
            // BI平台
            if (code == "BI") {
                window.open(
                    `http://183.64.175.153:15180/view/user/sso.do?tokenKey=${res.data}`
                );
            }
            // 权限管理
            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=${res.data}`
                );
            }
            // 机电业务系统
            if (code === "JDYWXT") {
                window.open(
                    `http://183.64.175.153:8891/?tokenKey=${res.data}#/personal-center/progress-sign`
                );
            }
            // 收费业务系统
            if (code === "SFYWXT") {
                window.open(
                    `http://183.64.175.153:6005/platform.html?tokenKey=${res.data}`
                );
            }
            // 营运系统
            if (code === "GIS") {
                window.open(`http://183.64.175.153:28882/#/?tokenKey=${res.data}`);
            }
            // 服务区
            if (code === "GS") {
                window.open(
                    `http://183.64.175.153:21080/servicearea/index.html#/cqHome?tokenKey=${res.data}`
                );
            }
            // 养护业务系统
            if (code === "YHCY") {
                window.open(
                    // `http://171.221.208.77:9004/#/cqjlLogin?tokenKey=${res.data}`
                    `http://111.9.41.17:9004/#/cqjlLogin?tokenKey=${res.data}`
                );
            }
            // 桥梁监测系统
            if (code === "JKJC") {
                window.open(
                    `http://183.64.175.153:8888/fvue/loginjkjc?tokenKey=${res.data}`
                );
            }

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

const tonewPath = async (val: any, index: number) => {
    Numberindex.value = null;
    Numberindex.value = index;
    towMenuListIndex.value = "";
    menuList?.value.forEach((item) => {
        if (item.name == val) {
            newMenuList.value = { ...item.children };
        }
    });

    display.value = true;
};
const getMenuList = () => {
    if (menuList.value && menuList.value.length) {
        getSubMenu()
    } else {
        getMenuLists()
            .then((res) => {
                menuList.value = res.dataList;
                getSubMenu()
            })
            .catch(() => { });
    }
};

const getSubMenu = (code: any) => {
    if (route.name === "business") {
        subMenus.value = [];
    } else if (secondRouterNameList.includes(route.name)) {
        getYHMenu()
    } else {
        const isFind = menuList.value.find((item) => {
            if (item.children) {
                return item.children.some((child) => {
                    return child.url === route.path || child.url === route.path.split('/')[1];
                })
            } else {
                return false
            }
        })
        if (isFind) {
            if (isFind.code === 'ZHFW') {
                const zhfw = isFind.children.filter((menu) => menu.code === 'JYGK' || menu.code === 'GS')
                zhfw.forEach((menu) => {
                    if (menu.code === 'JYGK') {
                        menu.url.indexOf('/') > -1 ? null : menu.url = `/${menu.url}`
                    }
                })
                subMenus.value = zhfw
            } else if (isFind.code === 'ZHYX') {
                const targetIndex = isFind.children.findIndex((menu) => menu.code === "LDJSC")
                // 如果找到了目标项
                if (targetIndex !== -1) {
                    // 从数组中移除目标项
                    const target = isFind.children[targetIndex]
                    isFind.children.splice(targetIndex, 1);
                    // 将目标项添加到数组的开头
                    isFind.children.unshift(target);
                }
                subMenus.value = isFind.children;
            } else {
                subMenus.value = isFind.children;
            }
        } else {
            subMenus.value = [];
        }
    }

}

watchEffect(() => {
    currentAlias.value = route.path;
    getMenuList()
});

//二级移入
const twoEnter = async () => {
    display.value = true;
};
//二级移出
const twoLeave = async (event) => {
    display.value = false;
};
</script>

<style lang="postcss" scoped>
ul {
    @apply flex relative h-full items-end mx-auto;
}

li {
    @apply relative z-10 h-full;
    margin: 0 4px;
}

.menuItem {
    position: relative;
    top: -5px;
    font-weight: 600;
    font-size: 16px;
    line-height: 45px;
    white-space: nowrap;
    text-shadow: 2px 2px 2px #000;

    @apply px-8 h-full flex justify-center text-gray-300;
    z-index: 999;
    cursor: pointer;
    background: linear-gradient(transparent, rgb(39, 94, 196, 0.6));
    border-bottom: 4px solid #3061bd;
}

.router-link-active {
    color: #ffce5a;
    border-bottom: 4px solid #ffecb0;
    background: linear-gradient(transparent, rgba(236, 166, 56, 0.6));
    /* color: rgb(var(--active)); */
}

.menuItem-active {
    position: relative;
    top: -5px;
    font-weight: 600;
    font-size: 16px;
    line-height: 45px;
    white-space: nowrap;
    text-shadow: 2px 2px 2px #000;
    @apply px-8 h-full flex justify-center text-gray-300;
    z-index: 999;
    cursor: pointer;
    color: #ffce5a;
    border-bottom: 4px solid #ffecb0;
    background: linear-gradient(transparent, rgba(236, 166, 56, 0.6));
    /* color: rgb(var(--active)); */
}

.stressLine {
    border-color: rgb(var(--active));
    background: rgba(0, 0, 0, 0.3);

    @apply absolute z-0 h-full left-0 w-32 transition-all border-b-4 duration-300;
}

.sfli {
    width: 250px;
}

.el-menu-demo {
    display: flex;
    justify-content: space-evenly;
    width: 600px;
    height: 45px !important;
    line-height: 45px !important;
    border: 0px solid #fff !important;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

.el-menu-item {
    width: 200px;
    height: 45px !important;
    line-height: 45px !important;
    text-align: center;
    padding-top: 6px;
    border: 0px solid #fff !important;
    font-size: 18px;
    font-weight: 800;
    color: #d1d5db !important;
    z-index: 9999;
}

.el-menu-item:hover {
    background: transparent !important;
    border-bottom: 0px solid #009bff !important;
    z-index: 9999;
}

.el-menu-item.is-active {
    background: linear-gradient(transparent,
            rgba(236, 166, 56, 0.6)) !important;
    border-bottom: 2px solid #009bff !important;
    z-index: 9999;
}

.towMenu {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    height: 50px;
    line-height: 50px;
    text-align: center;
    margin-bottom: 50px;
    cursor: pointer;
    z-index: 9999;
}

.towMenu-new-0 {
    position: absolute;
    left: 0px;
    display: flex;
    flex-wrap: wrap;
    width: 120px !important;
    line-height: 50px;
    text-align: center;
    margin-bottom: 50px;
    cursor: pointer;
    border: 1px solid rgb(255, 206, 90, 0.2);
    z-index: 9999;
}

.towMenu-new-0:hover {
    position: absolute;
    left: 0px;
    display: flex;
    flex-wrap: wrap;
    width: 120px !important;
    line-height: 50px;
    text-align: center;
    margin-bottom: 50px;
    cursor: pointer;
    border: 1px solid rgb(255, 206, 90, 0.2);
    z-index: 9999;
}

.towMenu-new-1 {
    position: absolute;
    left: 120px;
    display: flex;
    flex-wrap: wrap;
    width: 120px !important;
    line-height: 50px;
    text-align: center;
    margin-bottom: 50px;
    cursor: pointer;
    border: 1px solid rgb(255, 206, 90, 0.2);
    z-index: 9999;
}

.towMenu-new-2 {
    position: absolute;
    left: 240px;
    display: flex;
    flex-wrap: wrap;
    width: 120px !important;
    line-height: 50px;
    text-align: center;
    margin-bottom: 50px;
    cursor: pointer;
    border: 1px solid rgb(255, 206, 90, 0.2);
    z-index: 9999;
}

.towMenu-new-3 {
    position: absolute;
    left: 360px;
    display: flex;
    flex-wrap: wrap;
    width: 120px !important;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 50px;
    border: 1px solid rgb(255, 206, 90, 0.2);
    z-index: 9999;
}

.span {
    width: 120px !important;
    height: 35px;
    line-height: 35px;
    font-weight: 700;
    color: #fff;
    background-color: #ffce5a;
    background-size: 100% 100%;
    z-index: 9999;
}

.span-pitch {
    width: 120px !important;
    height: 35px;
    line-height: 35px;
    color: rgb(255, 255, 255, 0.9);
    background-color: rgb(6, 5, 5, 0.7);
    font-weight: 600;
    z-index: 9999;
}

.span:hover {
    width: 120px !important;
    height: 35px;
    line-height: 35px;
    font-weight: 700;
    color: #fff;
    background-color: #ffce5a;
    background-size: 100% 100%;
    z-index: 9999;
}

.span-pitch:hover {
    width: 120px !important;
    height: 35px;
    line-height: 35px;
    color: #fff;
    background-color: #ffce5a;
    background-size: 100% 100%;
    z-index: 9999;
}
</style>
