<template>
  <div class="jczl-menu-v2">
    <Menu theme="light" width="auto" :class="menuitemClasses" @on-select="clickMenu">
      <template v-for="(item, index) in siderMenus">
        <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" v-for="item1 in item.children">
                <template v-if="item1.children && item1.children.length >= 1">
                    <Submenu :name="JSON.stringify(item1)" :key="item1.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' : ''" style="height:auto;">
                            <Icon :type="item2.icon"/>
                            {{item2.name}}
                        </MenuItem>
                    </Submenu>
                </template>
                <MenuItem :name="JSON.stringify(item1)" v-else :key="item1.id" v-show="!item1.hidden">
                    <Icon :type="item1.icon" :key="item1.type_id"/>
                    {{item1.name}}
                </MenuItem>
            </template>
        </Submenu>
        <MenuItem :name="JSON.stringify(item)" v-if="item.children.length == 0" :key="item.id" v-show="!item.hidden">
            <Icon :type="item.icon" :key="item.type_id"/>
            {{item.name}}
        </MenuItem>
      </template>
      <!-- <div v-for="(item, index) in minZhengMenus2" v-bind:key="index">
        <Submenu :name="item.name">
          <template slot="title">
              <Icon :type="item.icon"></Icon>
              {{item.name}}
          </template>
          <div v-for="(item1, index1) in item.list" v-bind:key="index1">
            <MenuItem :name="item1.path">
              <Icon :type="item1.icon"></Icon>
              <span>{{item1.name}}</span>
            </MenuItem>
          </div>
        </Submenu>
      </div> -->
    </Menu>
  </div>
</template>
<script>
import '../index-copy.less'
export default {
  name: 'qstb-menu',
  data () {
    return {}
  },
  props: {
    siderMenus: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {},
  computed: {
    menuitemClasses: function () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  watch: {},
  mounted () {
    console.log(this.siderMenus, '菜单')
  },
  methods: {
    clickMenu (item) {
      let data = JSON.parse(item)
      if (data.href && data.href !== '' && !data.path) {
        location.href = data.href
      } else {
        this.$router.push({
          path: JSON.parse(item).path
        })
      }
    }
  }
}
</script>
<style scoped>
  mz-gray {
      color: darkgray;
  }
</style>
