<template>
  <div>
    <el-submenu :index="sumMenu.index">
      <template slot="title">
        <div class="menu-item-box-c flex-column-center">
          <div class="menu-icon-c flex-center">
            <img :src="pgName + sumMenu.icon" alt="">
          </div>
          <div><span>{{ language === 'zh' ? sumMenu.title : sumMenu.nameEn || sumMenu.title }}</span></div>
        </div>
      </template>
      <div v-for="(menu,index) in sumMenu.children" :key="index">
        <div v-if="menu.children.length">
          <SubmenuItem :sum-menu="menu"></SubmenuItem>
        </div>
        <div v-else>
          <MenuItem :menu="menu"></MenuItem>
        </div>
      </div>
    </el-submenu>
  </div>
</template>

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

@Component({
  components: {
    MenuItem,
    SubmenuItem
  },
  props: {
    sumMenu: {
      type: Object,
      required: true
    }
  }
})
export default class SubMenuTemp extends Vue {
  private pgName = window.localStorage.getItem('pgName') ? '/' + window.localStorage.getItem('pgName') : location.origin
  private language = window.localStorage.getItem('language')

  public mounted() {
    window.addEventListener("setItemEvent", (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    });
  }
}
</script>

<style scoped lang="scss">

</style>
