<template>
    <div class="mz-three-menu">
        <Menu theme="primary" @on-select="handleSelect" style="width: 100%">
            <template v-for="(item, index) in menuList">
                <Submenu :name="JSON.stringify(item)"
                         v-show="item.list && item.list.length >= 1" :key="index">
                    <template slot="title" v-if="item.list && item.list.length >= 1">
                        <Icon :type="item.icon"/>
                        {{ item.name }}
                    </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">
                                    <Icon :type="item1.icon"/>
                                    {{item1.name}}
                                </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' : ''">
                                    <Icon :type="item2.icon"/>
                                    {{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' : ''">
                            <Icon :type="item1.icon" :key="item1.type_id"/>
                            {{item1.name}}
                        </MenuItem>
                    </template>
                </Submenu>
                <MenuItem :name="JSON.stringify(item)" v-if="!item.list" :key="item.type_id" v-show="!item.hidden"
                          :class="item.audit_state_yingshang == '1' ? 'mz-gray' : ''">
                    <Icon :type="item.icon" :key="item.type_id"/>
                    {{item.name}}
                </MenuItem>
            </template>
        </Menu>
    </div>
</template>
<script>
export default {
  name: 'yiqing-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: #205091;
        font-weight: bold;
    }

    .mz-three-menu .ivu-menu-item:hover {
        color: #235CA7;
        font-weight: bold;
    }

    .mz-three-menu .mz-gray {
        color: darkgray;
    }

    .mz-three-menu .mz-gray:hover {
        color: darkgray;
        font-weight: bold;
    }
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
        color: #205091;
        background: white;
        z-index: 2;
    }
    .mz-three-menu .ivu-menu-child-item-active {
        background-color: '';
        color: #fff;
    }
    .ivu-menu-child-item-active {
        background-color: #f0f4fb;
        color: #fff;
    }
    .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
        color: #205091;
        background: #fff;
        z-index: 2;
    }
</style>
