<template>
  <div class="mz-three-menu">
    <Menu theme="primary" @on-select="handleSelect" style="width: 100%">
      <Submenu :name="JSON.stringify(item)" v-for="(item, index) in menuList" v-show="!item.hidden && item.count > 0" :key="index">
        <template slot="title">{{ item.name }}（{{item.count}}）</template>
        <template v-if="item.list && item.list.length >= 1" v-for="item1 in item.list">
          <template v-if="item1.list && item1.list.length >= 1">
            <Submenu :name="JSON.stringify(item1)" :key="item1.type_id" v-show="!item1.hidden">
              <template slot="title">{{item1.name}}（{{item1.count}}）
              </template>
              <MenuItem :name="JSON.stringify(item2)" v-for="item2 in item1.list" v-show="!item2.hidden"
                        :key="item2.type_id" :class="item2.audit_state_yingshang == '1' ? 'mz-gray' : ''" >{{item2.name}}
              </MenuItem>
            </Submenu>
          </template>
          <MenuItem :name="JSON.stringify(item1)" v-else :key="item1.type_id" v-show="!item1.hidden"
                    :class="item1.audit_state_yingshang == '1' ? 'mz-gray' : ''">{{item1.name}}
          </MenuItem>
        </template>
      </Submenu>
    </Menu>
  </div>
</template>
<script>
export default {
  name: 'three-menu',
  props: {
    menuList: {
      type: Array,
      default () {
        return []
      }
    }
  },
  methods: {
    handleSelect (name) {
      this.$emit('on-select', evil(name))
    },
    getMenuId (q, name) {
      return q + name
    },
    showTitle (item) {
      return item
    },
    showlist (item) {
      return item.list && (item.list.length > 0)
    },
    getNameOrHref (item, list0) {
      return item.href ? `isTurnByHref_${item.href}` : (list0 ? item.list[0].name : item.name)
    }
  }
}
</script>

<style>
  .mz-three-menu .ivu-menu-item-group-title {
    color: #f3f3f3;
  }

  .mz-three-menu .ivu-menu {
    color: #f3f3f3;
  }

  .mz-three-menu .ivu-menu-submenu-title:hover {
    color: #f3f3f3;
    font-weight: bold;
  }

  .mz-three-menu .ivu-menu-item:hover {
    color: #f3f3f3;
    font-weight: bold;
  }
  .mz-three-menu .mz-gray {
    color: darkgray;
  }
  .mz-three-menu .mz-gray:hover {
    color: darkgray;
    font-weight: bold;
  }
</style>
