import { defineAsyncComponent, shallowRef, computed } from 'vue'
import { OperationTabMenu } from '@/services/go/commonService/interface'
import { initData } from '@/common/methods'
import { DynamicComponent } from './interface'
import { getClassName } from '@/common/setup/table/button'
import APP from '@/services'

/**
 * 路由菜单
 */
export function useMenu() {
    const menus = computed<OperationTabMenu[]>(() => APP.getRef('menus').value);

    // 通过code获取对应的子菜单
    const getChildrenMenus = (items: OperationTabMenu[], name: string) => {
        let result: OperationTabMenu[] = [];
        for (let i = 0; i < items.length; i++) {
            const { code, children } = items[i];
            if (code === name) return children ?? result;
            if (children) {
                result = getChildrenMenus(children, name)
                if (result.length) return result;
            }
        }
        return result;
    }

    return {
        menus,
        getChildrenMenus
    }
}

/**
 * 底部动态组件
 */
export function useDynamicComponent(code?: string) {
    const { menus, getChildrenMenus } = useMenu();
    const components = shallowRef<DynamicComponent[]>([]);
    const currentComponent = shallowRef<DynamicComponent>(); // 当前选中的组件

    // 切换组件
    const componentChange = (selected: DynamicComponent) => {
        currentComponent.value = selected;
    }

    // 处理动态组件
    const parseComponent = (treeMenu: OperationTabMenu[]) => {
        let result: DynamicComponent[] = [];

        treeMenu.forEach((menu) => {
            const { title, code, component, children, auth } = menu;
            if (component) {
                let asyncComponent;

                if (component === 'Main') {
                    asyncComponent = defineAsyncComponent(() => import('@/@next/components/layout/footer-main/index.vue'));
                } else {
                    const componentString = component.replace(/^\/+/, ''); // 过滤字符串前面所有 '/' 字符
                    const componentPath = componentString.replace(/\.\w+$/, ''); // 过滤后缀名，为了让 import 加入 .vue ，不然会有警告提示...
                    asyncComponent = defineAsyncComponent(() => import('@/' + componentPath + '.vue'));
                }

                const dynamicComponent: DynamicComponent = {
                    title: title,
                    code: code,
                    buttons: auth?.map((e) => ({
                        lable: e.label,
                        code: e.code,
                        className: getClassName(e.code)
                    })) ?? [],
                    component: asyncComponent
                }

                if (children?.length) {
                    dynamicComponent.children = parseComponent(children);
                }

                result = [...result, dynamicComponent];
            }
        })

        return result;
    }

    initData(() => {
        const bottom = menus.value.find((e) => e.code === 'bottom');
        const bottomMenus = bottom?.children;

        if (bottomMenus) {
            const children = code ? getChildrenMenus(bottomMenus, code) : bottomMenus;
            const result = parseComponent(children);

            if (result.length) {
                components.value = result;
                currentComponent.value = result[0];
            }
        }
    })

    return {
        components,
        currentComponent,
        componentChange,
    }
}