<template>
    <div :class='["v-menu", {collapseTransition: !collapseTransition}]' ref='menu'>
        <v-submenu :singleOpen='singleOpen' :collapse='collapse' :options='options'></v-submenu>
    </div>
</template>

<script>
import { provide, ref, watchEffect, onMounted } from 'vue';
import VairMenu from '../../types/menu';
import vSubmenu from './components/Submenu';
export default {
    name: 'menu',
    props: VairMenu,
    components: {
        vSubmenu
    },
    setup(props, ctx) {
        const recordSingleOpen = ref('');
        const activeItem = ref('');
        const openIndex =  ref(null);
        const closeIndex =  ref(null);
        const menu = ref(null);
        const defaultActive = ref(null);
        const collapse = ref(props.collapse);

        const handleChangeRecordSingleOpen = (value) => {
            recordSingleOpen.value = value;
        };

        const handleChangeActiveItem = (props) => {
            if (activeItem.value === props.upperIndex) return
            activeItem.value = props.upperIndex;
            ctx.emit('change', props.config);
        };

        const open = (index) => {
            openIndex.value = null,
            setTimeout(() => {
                openIndex.value = index;
            }, 0);
        };

        const close = (index) => {
            closeIndex.value = null;
            setTimeout(() => {
                closeIndex.value = index;
            }, 0);
        };

        const deepMenu = (options, indexList) => {
            let indexArr = indexList || [];
            options.forEach(item => {
                if (item.index) {
                    if (indexArr.includes(item.index)) {
                        throw new Error('The index attribute value cannot be duplicated');
                    } else {
                        indexArr.push(item.index);
                    }
                }
                if (item.type === 'group' && Array.isArray(item.children)) {
                    deepMenu(item.children, indexArr);
                } 
            });
        };

        const initStyle = () => {
            if (props.backgroundImage) {
                menu.value.style.backgroundImage = props.backgroundImage;
            } else if (props.backgroundColor) {
                menu.value.style.backgroundColor = props.backgroundColor;
            }
        };

        const init = () => {
            initStyle();
            if (props.singleOpen) {
                if (Array.isArray(props.defaultActive)) {
                    const len = props.defaultActive.length;
                    defaultActive.value = props.defaultActive[len - 1] || undefined;
                    if (Array.isArray(defaultActive.value)) {
                        throw new TypeError('You cannot nest arrays');
                    }
                } else {
                    defaultActive.value = props.defaultActive;
                }
            } else {
                defaultActive.value = props.defaultActive;
            }
        };

        watchEffect(() => {
            if (Array.isArray(props.options)) {
                deepMenu(props.options);
            } else {
                throw new TypeError(`options wants to receive an array, but received a ${typeof props.options}`);
            }
        });

        onMounted(() => {
            init();
            watchEffect(() => {
                setTimeout(() => {
                    collapse.value = props.collapse;
                }, 100);
                menu.value.style.minWidth = props.collapse? '70px' : '260px';
                menu.value.style.width = props.collapse? '70px' : '100%';
            });
        });


        provide('handleChangeRecordSingleOpen', handleChangeRecordSingleOpen); // 记录当前打开的目录
        provide('handleChangeActiveItem', handleChangeActiveItem); // 点击事件
        provide('recordSingleOpen', recordSingleOpen); // 记录目前打开的分组 (单开时有效)
        provide('activeItem', activeItem); // 记录目前打开的item 
        provide('textColor', props.textColor); // 文字颜色
        provide('activeBackgroundColor', props.activeBackgroundColor); // 激活时背景颜色
        provide('router', props.router); // 是否开启路由跳转
        provide('activeTextColor', props.activeTextColor); // 激活时文字颜色
        provide('collapseTransition', props.collapseTransition); // 是否开启默认动画
        provide('backgroundImage', props.backgroundImage); // 是否开启默认动画
        provide('backgroundColor', props.backgroundColor); // 是否开启默认动画
        provide('openIndex', openIndex); // 开启菜单
        provide('closeIndex', closeIndex); // 关闭菜单
        provide('defaultActive', defaultActive); // 默认选中 1 / N   group / item

        return {
            open,
            close,
            menu,
            collapse
        }
    }
}
</script>

<style lang='less' scoped>
@import url('../../assets/css/scrollbar.css');
.v-menu {
    width: 100%;
    min-width: 260px;
    transition: .3s;
    font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
}
.collapseTransition {
    transition: 0s !important;
}
</style>