<template>
    <div class="menu-title">主菜单</div>
    <!-- 侧边栏菜单区域 -->
    <el-menu active-text-color="#409Eff" background-color="#fff" text-color="#000" :router="true" unique-opened>
        <!-- 一级菜单 -->
        <el-sub-menu :index="item.id" v-for="item in menuList" :key="item.id">
            <!-- 一级菜单模板区域 -->
            <template #title>
                <el-icon>
                    <component :is="item.iconValue"></component>
                </el-icon>
                <span>{{ item.labelName }}</span>
            </template>
            <!-- 二级菜单 -->
            <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.id"
                @click="clickMenu(subItem)">
                <template #title>
                    <span>{{ subItem.labelName }}</span>
                </template>
            </el-menu-item>
        </el-sub-menu>
    </el-menu>
</template>

<script setup>
import store from '@/store'
// import { mapState, mapMutations } from 'vuex';
</script>

<script>
export default {
    name: 'side-menu',
    data() {
        return {
            menuList: []
        }
    },
    mounted() {
        this.getMenuList()
    },
    methods: {
        getMenuList() {
            // this.menuList = this.$store.state.menuList
            this.menuList = store.getters.getMenuList
        },
        // 点击菜单
        clickMenu(value) {
            //通过vuex将数据存储在store中
            store.commit('mutationSelectTags', value)
        }
    }
}
</script>
<style scoped>
.menu-title {
    margin-top: 5px;
}
</style>