<template>
  <div class="menu-wrapper">
    <div class="logo">
      <img
        v-if="showLogo(project)"
        src="~imgs/logo.png">
      <div
        class="title"
        v-else>{{ pageTitle }}</div>
    </div>
    <template
      v-for="item in routes.filter(item => !item.hidden && item.children)">
      <router-link
        v-if="hasOneShowingChildren(item.children) && !item.children[0].children&&!item.alwaysShow"
        :to="item.path+'/'+item.children[0].path"
        :key="item.children[0].name">
        <el-menu-item
          :index="item.path+'/'+item.children[0].path"
          :class="{'submenu-title-noDropdown':!isNest}">
          <!-- <svg-icon
            class="side-icon"
            v-if="item.children[0].meta&&item.children[0].meta.icon"
            :icon-class="item.children[0].meta.icon"/> -->
          <i
            v-if="item.children[0].meta&&item.children[0].meta.icon"
            class="iconfont svg-icon"
            :class="`icon-${item.children[0].meta.icon}`"
          />
          <span
            v-if="item.children[0].meta&&item.children[0].meta.title"
            slot="title">{{ item.children[0].meta.title }}</span>
        </el-menu-item>
      </router-link>
      <el-submenu
        v-else
        :index="item.name||item.path"
        :key="item.name">
        <template slot="title">
          <i
            v-if="item.meta.icon"
            class="side-icon iconfont svg-icon"
            :class="`icon-${item.meta.icon}`"
          />
          <span
            v-if="item.meta&&item.meta.title"
            slot="title">{{ item.meta.title }}</span>
        </template>

        <template
          v-for="child in item.children.filter(child => !child.hidden)">
          <sidebar-item
            :is-nest="true"
            class="nest-menu"
            v-if="child.children&&child.children.length>0"
            :routes="[child]"
            :key="child.path"/>

          <router-link
            v-else
            :to="item.path+'/'+child.path"
            :key="child.name">
            <el-menu-item :index="item.path+'/'+child.path">
              <!-- <i
                v-if="item.meta.icon"
                class="side-icon iconfont svg-icon"
                :class="`icon-${item.meta.icon}`"
              /> -->
              <span
                v-if="child.meta&&child.meta.title"
                slot="title">{{ child.meta.title }}</span>
            </el-menu-item>
          </router-link>
        </template>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'SidebarItem',
  data () {
    return {

    }
  },
  props: {
    routes: {
      type: Array,
      default: () => { return [] }
    },
    isNest: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 测试方法：localStorage.setItem("project", "YINXIANGMAZU");
    showLogo (project) {
      const projectsToHideLogo = ['YINXIANGMAZU'] // 印象妈祖等项目需要隐藏cleatv的logo
      if (projectsToHideLogo.includes(project)) { return false }
      return project
    },
    hasOneShowingChildren (children) {
      const showingChildren = children.filter(item => {
        return !item.hidden
      })
      if (showingChildren.length === 1) {
        return true
      }
      return false
    }
  }
}
</script>

<style lang="scss" scoped>
.logo {
  text-align: center;

  img {
    height: 30px;
    padding: 10px 0;
  }

  &:after {
    content: '';
    display: block;
    height: 0;
    border-bottom: 1px solid #0075ff;
  }

  .title {
    font-size: 20px;
    padding: 20px 0;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    opacity: 0.9;
  }
}

.side-icon {
  font-size: 24px;
  vertical-align: middle !important;
}
</style>
