<template>
    <div class="left-menu">
        <a-menu style="width: 200px" mode="inline" v-model="current_route">
            <template v-for="item in menu_list">
                <a-menu-item
                    v-if="!item.children"
                    :key="item.key"
                >
                    <router-link :to="{path:item.path}">
                        <i :class="item.icon" style="margin-right: 6px"></i>
                        <span>{{ item.name }}</span>
                    </router-link>
                </a-menu-item>
                <a-sub-menu v-else :key="item.key">
                    <span slot="title">
                        <i :class="item.icon" style="margin-right: 6px"></i>
                        <span>{{ item.name }}</span>
                    </span>
                    <a-menu-item
                        v-for="child in item.children"
                        :key="child.key"
                    >
                        <router-link :to="{path:child.path}">
                            <span>{{ child.name }}</span>
                        </router-link>
                    </a-menu-item>
                </a-sub-menu>
            </template>
        </a-menu>
    </div>
</template>

<script>
import menu from "../../../config/menu"

export default {
    name: "leftMenu",
    data() {
        return {
            current_route: [],
            menu_list: [],
        };
    },
    created() {
        let currentRoute = this.$route;
        let menuKey = currentRoute.name;
        if (currentRoute.query.template_id) {
            //动态菜单的区别是参数
            menuKey += currentRoute.query.template_id
        }
        this.current_route = [menuKey];
        this.getMenuList();
    },
    computed: {
        currentRoute: {
            get() {
                return this.$store.state.currentRoute;
            },
            set(v) {
                this.$store.state.currentRoute = v;
            },
        },
    },
    methods: {
        //获取menu
        getMenuList() {
            let that = this;
            this.menu_list = menu;
            //追加动态菜单
            this.api.post('menu').then(result => {
                this.menu_list = this.menu_list.concat(result.result)
            });
        }
    },
};
</script>

<style lang="scss" scoped>
.left-menu :global {
    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
        background-color: rgba(53, 128, 242, 0.15) !important;
    }

    .ant-menu-item-selected > a,
    .ant-menu-item-selected > a:hover {
        color: #6b6c6e;
        font-weight: 500;
    }

    .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-active {
        background-color: rgba(53, 128, 242, 0.05) !important;
    }

    .ant-menu-item > a {
        font-weight: 700;
    }

    .ant-menu-item-active > a,
    .ant-menu-item-active > a:hover {
        color: #6b6c6e;
    }

    .ant-menu-vertical .ant-menu-item:not(:last-child),
    .ant-menu-vertical-left .ant-menu-item:not(:last-child),
    .ant-menu-vertical-right .ant-menu-item:not(:last-child),
    .ant-menu-inline .ant-menu-item:not(:last-child) {
        margin: 0 !important;
    }
}
</style>
