<template>
    <a-menu
        theme="dark"
        mode="inline"
        :class="['left-menu', isBottom ? 'left-menu_bottom' : 'left-menu_no_bottom']"
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        @click="menuClick"
    >
        <a-sub-menu v-for="item in filterMenu()" :key="item.code">
            <template #title>
                <span>
                    <svg class="icon svg-icon" aria-hidden="true">
                        <use :xlink:href="fontIcon(item.code)" />
                    </svg>
                    <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
                </span>
            </template>
            <a-menu-item :key="subItem.code" v-for="subItem in item.children">
                <span>{{ subItem.title }}</span>
            </a-menu-item>
        </a-sub-menu>
    </a-menu>
</template>

<script lang="ts">
import { defineComponent, ref, SetupContext, unref, watchEffect } from 'vue';
import APP from '@/services';
import { initData } from '@/common/methods';
import { OperationTabMenu } from '@/services/go/commonService/interface';
import { getHasBottom } from '@/common/setup/order/orderData';
import { useRoute } from 'vue-router';

function handleMenu(context: SetupContext) {
    const selectedKeys = ref<string[]>(['1-1']);
    const openKeys = ref<string[]>(['1']);
    const preOpenKeys = ref<string[]>(['1']);
    const menuList = APP.getRef('menus');
    function menuClick(value: any) {
        const arr = value.keyPath.reverse();
        if (arr.length > 1 && arr[1] !== selectedKeys.value[0]) {
            const first = menuList.value.find((e: OperationTabMenu) => e.code === arr[0]);
            if (first) {
                const seconde = first.children.find((e: OperationTabMenu) => e.code === arr[1]);
                seconde && context.emit('chooseMenu', seconde);
            }
        }
    }
    // 一级菜单图标
    function fontIcon(code: string): string {
        let result = 'icon-jinrongfenxi';
        switch (code) {
            case 'market':
                result = 'icon-jinrongfenxi';
                break;
            case 'info':
                result = 'icon-zhangdan';
                break;
            case 'business':
                result = 'icon-renwu';
                break;
            case 'manage':
                result = 'icon-quanxian';
                break;
            case 'search':
                result = 'icon-chazhaojilu';
                break;
            case 'report':
                result = 'icon-bingtu';
                break;
        }
        return '#' + result;
    }
    return { selectedKeys, menuList, openKeys, preOpenKeys, menuClick, fontIcon };
}

export default defineComponent({
    props: {
        collapsed: {
            default: true,
            type: Boolean,
        },
    },
    setup(props, context) {
        const isBottom = getHasBottom();
        const { selectedKeys, openKeys, menuList, menuClick, preOpenKeys, fontIcon } = handleMenu(context);
        watchEffect(() => {
            if (props.collapsed) {
                preOpenKeys.value = openKeys.value;
                openKeys.value = [];
            } else {
                openKeys.value = preOpenKeys.value;
            }
        });
        const filterMenu = () => menuList.value.filter((e: OperationTabMenu) => e.type === 1);
        const route = useRoute();
        initData(() => {
            // 处理路由跳转到菜单栏里第一个对应的页面
            const list = filterMenu();
            if (list.length && list[0].children && list[0].children.length) {
                const matched = route.matched;
                // 处理修改具体某个菜单栏，主要处理页面刷新
                let firstIndex = 0,
                    secondeIndex = 0;
                for (let i = 0; i < list.length; i++) {
                    for (let j = 0; j < list[i].children.length; j++) {
                        if (matched[1].name === list[i].children[j].code) {
                            firstIndex = i;
                            secondeIndex = j;
                            break;
                        }
                    }
                }
                const temp = list[firstIndex].children[secondeIndex];
                const code = temp.code;
                // warn: Set operation on key "default" failed: target is readonly
                selectedKeys.value = [code];
                openKeys.value = [list[firstIndex].code];
                context.emit('chooseMenu', temp);
            }
        });
        return { selectedKeys, openKeys, filterMenu, menuClick, fontIcon, isBottom };
    },
});
</script>
<style lang="less">
.left-menu_no_bottom {
    height: calc(100vh - 86px) !important;
}
.left-menu_bottom {
    height: calc(100vh - 316px) !important;
}
</style>
