<template>
  <div>
    <el-menu :background-color="bg"
             :collapse="isCollapse"
             :text-color="color"
             :active-text-color="actColor"
             :default-active="defaultAct"
             :unique-opened="keepOne">
      <div v-for="(menu) in menuList" :key="menu.index">
        <MenuItem v-if="!menu.children.length" :menu="menu"></MenuItem>
        <SubmenuItem v-else :sum-menu="menu"></SubmenuItem>
      </div>
    </el-menu>
  </div>
</template>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator'
import {Language, MenuType} from "@/module/menu";
import MenuItem from "@/components/menu/menu-item/index.vue";
import SubmenuItem from "@/components/menu/submenu-item/index.vue";

const menus = require('./analysis')

@Component({
  components: {
    MenuItem,
    SubmenuItem
  },
  props: {
    bg: {
      type: String,
      required: false,
      default: ''
    },
    color: {
      type: String,
      required: false,
      default: ''
    },
    actColor: {
      type: String,
      required: false,
      default: ''
    },
    defaultAct: {
      type: String,
      required: false,
      default: ''
    },
    keepOne: {
      type: Boolean,
      required: false,
      default: true
    },
    isCollapse: {
      type: Boolean,
      required: false,
      default: false
    }
  }
})
export default class Menu extends Vue {
  private menuList: MenuType[] = menus.menuList
}
</script>
<style src="./style.css">
</style>
