<template>

  <el-submenu
    v-if="item.childrens.length > 0"
    :ref="item.id"
    :index="item.id"
    :id="item.id"
    popper-class="lx-collapse">

    <template slot="title">
      <img :src="menuPhoto(item)"/>
      <span>{{ item.name }}</span>
    </template>

    <!-- 第二层 -->
    <el-menu-item
      v-for="(item2, index2) in item.childrens"
      :key="index2"
      :ref="item2.id"
      :id="item2.id"
      :index="item2.id"
      @click.native="clickMenu(item2)">
        <img :src="menuPhoto(item2)" style="width: 10px; " />
        <span>{{ item2.name}}</span>
    </el-menu-item>
  </el-submenu>

  <el-menu-item
    v-else
    :ref="item.id"
    :id="item.id"
    :index="item.id"
    @click.native="clickMenu(item)"
    class="my-single-menu">
      <img :src="menuPhoto(item)"/>
      <span>{{ item.name }}</span>
  </el-menu-item>

</template>

<script>
  export default {
    name: 'my-menu',
    components: {},
    mounted: function () { // vue 生命周期，加载完成
      //console.log('my-menu-mounted');
    },
    methods: {
      menuPhoto: function (item) {
        if (item && item.icon16 && item.icon16.length > 0) {
          return '/portal/r/' + item.icon16;
        } else {
          return '/portal/apps/com.actionsoft.apps.skins.mportal/img/mhflag.png';
        }
      },
      clickMenu: function (item) {
        this.$store.commit('sub');
        this.$store.dispatch('addplus');
        // if(item.target == 'mainFrame') {
        //    this.$store.commit('put_iframe_url', item.url);
        // } else {
        //    window.open(item.url);
        // }
        this.$emit('click-menu', item);
      }
    },
    computed: {},
    props: {
      item: {
        type: Object,
        default: {childrens: [], id: '', name: ''},
        required: false
      }
    },
    data: function () {
      return {}
    }
  }
</script>

<style scoped>
  .my-single-menu{
    font-weight: bold;
  }
  .el-menu  img{
    width: 18px;
    height: auto;
    padding: 2px;
    margin-right: 3px;
  }
</style>
