<template>
    <div class="dsy-three-menu">
        <Menu id="slider-menu" theme="primary" @on-select="handleSelect" style="width: 100%">
            <template v-for="(item, index) in menuList">
                <Submenu :name="JSON.stringify(item)"
                         v-show="item.children && item.children.length >= 1" :key="index">
                    <template slot="title" v-if="item.children && item.children.length >= 1">
                        <Icon :type="item.icon"/>
                        {{ item.name }}
                    </template>
                    <template v-if="item.children && item.children.length >= 1" >
                      <div v-for="item1 in item.children" :key="item1.id">
                        <template v-if="item1.children && item1.children.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.children"
                                          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>
                      </div>
                    </template>
                </Submenu>
                <MenuItem :name="JSON.stringify(item)" v-if="!item.children" :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: {
    changetheme (color) {
      console.log('ccoloe', color)
      var obj = document.getElementById('slider-menu')
      obj.style.backgroundColor = color
    },
    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)
    }
  },
  mounted () {
    console.log(this.menuList, '菜单')
  }
}
</script>

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

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

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

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

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

    .dsy-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;
    }
</style>
