<template>
    <div class="second_menu">
        <a-layout-sider class="m-layout-left" width="180" @collapse="collapse" collapsible>
            <!-- v-model:collapsed="collapsed" -->
            <a-menu theme="dark" mode="inline" class="left-menu" @click="menuClick">
                <!-- v-model:selectedKeys="selectedKeys" v-model:openKeys="openKeys" -->
                <a-sub-menu v-for="item in menuList" :key="item.key">
                    <template #title>
                        <span v-if="item.code">
                            <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>
        </a-layout-sider>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';
import APP from '@/services';

interface Key {
    [propName: string]: string;
}
// 菜单栏
const handleMenu = () => {
    const collapsed = ref<boolean>(false);
    const selectedKeys = ref<string[]>(['1-1']);
    const openKeys = ref<string[]>(['1']);
    const preOpenKeys = ref<string[]>(['1']);
    // const menuList = APP.getRef('menus');
    const menuList = [
        {
            key: '1',
            title: '市场',
            code: 'market',
            children: [
                {
                    key: '1-1',
                    title: '现货贸易',
                    code: '',
                },
            ],
        },
        {
            key: '2',
            title: '查询',
            code: 'search',
            children: [
                {
                    key: '2-1',
                    title: '单据记录',
                    code: '',
                },
                {
                    key: '2-2',
                    title: '资金流水',
                    code: '',
                },
                {
                    key: '2-3',
                    title: '出入库',
                    code: '',
                },
                {
                    key: '2-4',
                    title: '登录日志',
                    code: '',
                },
            ],
        },
        {
            key: '3',
            title: '报表',
            code: 'report',
        },
    ];

    // 控制菜单是否隐藏
    function collapse(collapsed: boolean) {
        if (collapsed) {
            preOpenKeys.value = openKeys.value;
            openKeys.value = [];
        } else {
            openKeys.value = preOpenKeys.value;
        }
    }

    function menuClick(value: any) {}
    // 一级菜单图标
    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 { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick, fontIcon };
};

export default defineComponent({
    name: 'second_menu',
    props: {
        list: {
            default: [],
            type: Object as PropType<Key[]>,
        },
        value: {
            // 需要绑定的值得 key
            default: '',
            type: String,
        },
    },
    components: {},
    setup(props, context) {
        const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick, fontIcon } = handleMenu();
        const current = ref<string[]>(['0']);

        return {
            current,
            menuClick,
            collapsed,
            collapse,
            selectedKeys,
            openKeys,
            menuList,
            fontIcon,
        };
    },
});
</script>

<style lang="less">
.second_menu {
    height: 100%;
    .m-layout-left {
        height: 100%;
        background: @m-black4;
        .ant-layout-sider-children {
            ul.ant-menu.ant-menu-inline {
                li.ant-menu-submenu {
                    padding-bottom: 0;
                    .ant-menu-submenu-title {
                        color: @m-grey2;
                        font-size: 16px;
                        height: 60px;
                        line-height: 60px;
                        margin-top: 0;
                        margin-bottom: 0;
                        padding: 5px 0;
                        .icon {
                            font-size: 20px;
                        }
                        .menu-item_title {
                            display: inline-block;
                            font-size: 16px;
                            margin-left: 15px;
                        }
                    }
                    .ant-menu-sub {
                        .ant-menu-item {
                            padding-left: 60px !important;
                            margin-top: 5px;
                            margin-bottom: 5px;
                        }
                    }
                }
                li.ant-menu-submenu-open {
                    .ant-menu-submenu-title {
                        color: @m-white0;
                        .icon {
                            color: @m-white0;
                        }
                    }
                    .ant-menu-sub {
                        .ant-menu-item.ant-menu-item-selected {
                            background-color: @m-blue0;
                        }
                    }
                }
            }
        }
        .ant-layout-sider-trigger {
            width: 100%;
            height: 30px;
            line-height: 30px;
            background: @m-black0;
        }
    }
    .ant-menu-vertical {
        .ant-menu-submenu-vertical {
            height: 60px;
            line-height: 60px;
            padding: 5px 0;
            .ant-menu-submenu-title {
                height: 50px;
                line-height: 50px;
                .icon {
                    font-size: 20px;
                }
            }
        }
        .ant-menu-submenu {
            .ant-menu-submenu-title {
                .menu-item_title {
                    display: none;
                }
            }
        }
    }
}
</style>;
