<template>
  <div class="menu-wrapper">
    <el-sub-menu
      popper-class="menu-popper"
      v-if="item.children && item.children.length > 0"
      class="subMenu"
      :index="item.path"
    >
      <template #title>
        <div class="menu-second-title">
          <i
            class="menu-color cimfont"
            v-if="item.meta.level === 1"
            :class="[
              item.meta.activeIcon ? `${item.meta.icon}-active cimfont activeMenuIcon coll-active` : ` `,
              `${item.meta.icon} `
            ]"
          ></i>
          <span :class="[item.meta.activeIcon ? 'menu-text-color' : '']">
            <span v-if="item.meta.title.indexOf('BIM') > -1">
              <span class="sName">BIM</span>数据<span class="sName">GIS</span>加载
            </span>
            <span v-else>{{item.meta.title}}</span>
          </span>
        </div>
      </template>
      <!--children 进行递归调用自身组件-->
      <sidebar-item
        v-for="(child, index) in item.children"
        :key="index"
        :item="child"
        class="nest-menu"
      />
    </el-sub-menu>
    <!--only on child show el-menu -->
    <template v-else>
      <el-menu-item
        :class="[
          item.meta.level === 1 ? 'menu-item' : '',
          item.meta.level === 3 ? 'menu-item-last' : ''
        ]"
        :index="item.path"
      >
        <i
          class="menu-color cimfont"
          v-if="item.meta.level === 1"
          :class="[
            item.meta.activeIcon ? `${item.meta.icon}-active cimfont activeMenuIcon coll-active` : '',
            `${item.meta.icon}`
          ]"
        ></i>
        <template #title>
          <div class="menu-item-label">
            <!-- <span :class="[item.meta.level === 3 ? 'menuPoint' : '']"></span> -->
            <span v-if="item.meta.title.indexOf('BIM') > -1 && item.meta.title.indexOf('结构化BIM数据加载解析') === -1"><span class="sName">BIM</span>{{item.meta.title.slice(3,7)}}</span>
            <span v-else-if="item.meta.title.indexOf('BIM') > -1 && item.meta.title.indexOf('结构化BIM数据加载解析') > -1">结构化<span class="sName">BIM</span>数据加载解析</span>
            <span v-else>{{item.meta.title}}</span>
          </div>
        </template>
      </el-menu-item>
    </template>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, toRef } from 'vue'
interface childType {
  path: string
  name?: string
  component: void
  meta: {
    title: string
    icon: string
    hidden?: boolean
    [key: string]: any
  }
}
export default defineComponent({
  name: 'SidebarItem',
  props: {
    // route object
    item: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    // 是否只有一个孩子
    const onlyOneChild = ref()
    const handleItemClick = (obj: any) => {
      obj.meta.activeIcon = true
    }
    // methods
    /**
     * @description 展示只有一个孩子的情况
     */
    const hasOneShowingChild = (children: childType[] = [], parent: any) => {
      const showingChildren = children.filter(item => {
        onlyOneChild.value = item
        return true
      })

      // 判断当前路由，是否有孩子children，以及孩子个数；
      if (showingChildren.length === 1) {
        return true
      }

      // 如果没有孩子，则展示父级路由；
      if (showingChildren.length === 0) {
        onlyOneChild.value = { ...parent, noShowingChildren: true }
        return true
      }
      return false
    }

    return {
      onlyOneChild,
      handleItemClick,
      hasOneShowingChild
    }
  }
})
</script>
<style scoped lang="scss">
:deep(i.menu-color) {
  font-size: 20px;
  margin-right: 8px;
  color: #9da2ab;
  position: relative;
  z-index: 2;
}
// :deep(i.activeMenuIcon) {
//   color: $--color-white;
// }
.menuPoint {
  display: block;
  width: 4px;
  height: 4px;
  background: #f2f3f5;
  border-radius: 100%;
  position: absolute;
  left: 34px;
  top: 15px;
}

.menu-item {
  &-last {
    padding-left: 50px !important;
  }
  .menu-item-label {
    position: absolute;
    left: 0;
    right: 8px;
    padding-left: 48px;
    border-radius: 2px;
    z-index: 1;
    width: 100%;
    &:hover {
      background: #f2f3f5;
    }
  }
}
.menu-item.is-active .menu-item-label:hover {
  background: #e8eaee;
}
:deep(.el-sub-menu .el-sub-menu__title), :deep(.el-menu-item) {
  color: rgba(0, 0, 0, 0.7);
  font-family: 'ROBOTO_REGULAR';
  font-size: 20px;
  height: 64px;
  line-height: 64px;
  .menu-color {
    font-size: 24px;
  }
  .sName {
    font-family: 'ROBOTO_REGULAR';
  }
  &:hover {
    background: #f2f3f5;
    font-family: 'ROBOTO_REGULAR';
    color: #1d3359;
  }
  &.is-active {
    font-family: 'ROBOTO_BOLD';
    background: #f2f3f5;
    color: #1d3359;
    font-size: 20px;
    border-left: 3px solid #253a64;
  }
}
// .el-menu--collapse .el-sub-menu.is-active .el-sub-menu__title {
//   background: #fff;
// }
:deep(.el-menu--collapse) {
  color: #f00;
  .el-sub-menu .el-sub-menu__title:hover {
    background: #fff;
    color: #0f0;
  }
}
.menu-text-color, .cim-yuanshujuguanli-active {
  color: rgba(0, 0, 0, 0.7) !important;
}
.el-menu--collapse .menu-second-title {
  position: absolute;
  left: 8px;
  padding-left: 12px;
  border-radius: 2px;
  right: 8px;
  // &:hover {
  //   background: #f2f3f5;
  // }
}
.nest-menu {
  .menu-second-title {
    left: 0;
    // padding-left: 40px;
  }
}
.el-menu--collapse {
  .menu-second-title {
    left: 0;
    right: 15px;
    padding-left: 0;
    width: 64px;
    .menu-color {
      padding: 20px;
      left: 3px;
    }
  }
  .el-sub-menu__title:hover {
    background: #fff;
  }
  .el-sub-menu.is-opened {
    .menu-second-title {
      background: #f2f3f5;
    }
  }
  .el-sub-menu__title span {
    display: none;
  }
  
}
.menu-popper {
  .menu-second-title {
    left: 0;
    padding-left: 0;
    color: #fff;
  }
}
// :deep(.el-menu-item) {
//   height: 64px;
//   line-height: 64px;
//   color: rgba(0, 0, 0, 0.7);
// }
:deep(.el-menu-item.is-disabled) {
  color: #ccc;
  opacity: 1;
}
</style>
<style lang="scss">
.menu__containt .el-menu--collapse .el-sub-menu__icon-arrow {
  display: none;
}
.menu-popper {
  &.is-light {
    border-color: #232324 !important;
  }
  svg {
    stroke-width: 60px;
    stroke: white;
  }
}
.el-menu--collapse {
  .coll-active {
    padding: 0 8px;
    position: relative;
    left: -8px;
    background: #f2f3f5;
    border-radius: 2px;
  }
}
.subMenu {
  svg {
    stroke-width: 60px;
    stroke: white;
  }
}
</style>
