<template>
  <ul class="te-sub-menu" :class="show ? 'show' : 'hd'">
    <li class="title" v-if="showLogo">
      <a>{{ main_menu.name }}</a>
    </li>

    <li v-for="item in menus" :key="item.id">
      <div class="te-sub-menu-item" :class="(item.children || []).length > 0
          ? item.selected
            ? 'active'
            : ''
          : item.selected
            ? 'active f-level'
            : 'f-level'
        "  :title="item.name"  @click="menuItemChanged(item)">
        <span @click="toggleGroup(item)" >
          <i class="f-icon drop" :class="item.icon"  aria-hidden="true"></i>
          <a>{{ item.name }}</a>
        </span>
        <i class="iconfont drop " @click="toggleGroup(item)" :class="item.hideChildren ? 'te-i-jiantou2' : 'te-i-jiantou'"
        v-if="!item.icon && (item.children || []).length > 0"></i>
      </div>
      
      <ul class="te-menu-group" :class="item.hideChildren ? 'hide' : ''" v-if="(item.children || []).length > 0">
        <template v-for="k in item.children" :key="k.id" >
          <li v-if="(k.path||'').indexOf('://')>=0" class="te-group-menu-item" :class="k.selected ? 'active' : ''"
          :title="k.name">
           <i v-if="k.icon" class="f-icon drop" :class="k.icon"></i>
           <i v-if="!k.icon" class="f-icon drop"></i>
           <a target="_blank" :href="k.path">{{ k.name }}</a>
         </li>

         <li @click="menuItemChanged(k)" v-if="(k.path||'').indexOf('://')<0" class="te-group-menu-item" :class="k.selected ? 'active' : ''"
          :title="k.name">
           <i v-if="k.icon" class="f-icon drop" :class="k.icon"></i>
           <i v-if="!k.icon" class="f-icon drop"></i>
           <a>{{ k.name }}</a>
         </li>

        </template>

        

      </ul>
    </li>


    <div class="open">
      <i class="fa fa-angle-left" aria-hidden="true"></i>
    </div>
  </ul>
</template>
<script src="./script.js"></script>
<style  src="./css.css"></style>