<template>
  <el-menu
    :default-active="store.state.currentMenuItem"
    style="height: 100%"
    background-color="#141B29"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
    :collapse="true"
  >
    <el-sub-menu
      v-for="(item, index) in store.state.menuData"
      :key="item"
      :index="`${index}`"
    >
      <template v-slot:title>
        <img
          :style="{
            width: '30px',
            height: '30px',
            background: store.state.currentMenuItem.includes(item.path)
              ? '#fff'
              : ' #adacac',
            padding: '1px',
          }"
          :src="item.icon"
          alt=""
        />
        <span>{{ item.title }}</span>
      </template>
      <el-menu-item v-for="son in item.items" :index="son.path" :key="son">
        {{ son.name }}
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script setup>
import store from "../store";
</script>
