<template>
  <div v-if="!item.hidden">
    <el-sub-menu v-if="showChildren(item)" :index="item.name">
      <template #title>
        <svg class="icon-font svg-icon-custom" aria-hidden="true" v-if="item.meta.icon">
          <use :xlink:href="item.meta.icon"></use>
        </svg>
        <!-- <i v-if="item.meta.icon" :class="item.meta.icon"></i> -->
        <span>{{ item.meta.title }}</span>
      </template>
      <aside-item v-for="(subItem, subIdx) in item.children" :key="subIdx" :item="subItem" />
    </el-sub-menu>

    <el-menu-item v-else :index="item.name" @click="handleOpenPage(item)" style="background-color:#1f2d3d">
      <i :class="item.meta.icon"></i>
      <template #title>{{ item.meta.title }}</template>
    </el-menu-item>
  </div>
  <div v-else>
    <aside-item v-for="(subItem, subIdx) in item.children" :key="subIdx" :item="subItem" />
</div>
</template>
<style lang="css">
/* 该样式scoped下不生效，为不污染全局，固采用'>'选择器固定层级选取，不要删除 */
.el-menu--collapse>div>.el-submenu>.el-submenu__title>.el-submenu__icon-arrow.el-icon-arrow-right {
  display: none;
}
</style>
<style lang="scss" scoped>
.el-menu--collapse .el-submenu__title span {
  height: 0;
  width: 0;
  overflow: hidden;
  visibility: hidden;
  display: inline-block;
}

::v-deep([class*=" el-icon-"]),
::v-deep([class^="el-icon-"]) {
  color: #fff;
}

::v-deep(.el-menu-item-group__title) {
  // background-color: #38b48b;
  color: #fff;
  height: 38px;
  font-size: 16px;
  line-height: 38px;
}

::v-deep(.el-submenu__title) {
  font-size: 16px;
  height: 50px;
  line-height: 50px;
}

::v-deep(.el-submenu .el-menu-item) {
  padding-left: 40px !important;
  background-color: #1f2d3d !important;
  color: rgb(191, 203, 217);
}

::v-deep(.el-menu .el-menu-item:hover) {
  padding-left: 40px !important;
  background-color: #4178d5 !important;
  color: rgb(191, 203, 217);
}

::v-deep(.el-menu-item.submenu-title-noDropdown) {
  padding-left: 20px !important;
}

::v-deep(.el-menu-item.is-active) {
  color: #fff !important;
  background-color: #4178d5 !important;
}

::v-deep(.el-sub-menu__title) {
  border-bottom: 1px solid #1f2d3d;
  background-color: rgb(48, 65, 86) !important;
}

::v-deep(.el-sub-menu.is-active .el-sub-menu__title) {
  border-bottom: 1px solid #1f2d3d;
}

::v-deep(.is-active .el-sub-menu .el-menu) {
  background-color: rgb(48, 65, 86) !important;
}
</style>
<script>

export default {
  name: 'AsideItem',
  data () {
    return {
      isShowLanguage: false,
      models: [
        '/index/category',
        '/index/brand',
        '/index/productList',
        '/index/editSpu',
        '/index/addSpu',
        '/index/editSku',
        '/index/opdTeam',
        '/index/propSetting',
        '/download/instructions',
        '/download/editInstruct',
        '/download/drive',
        '/download/editDrive',
        '/index/language',
        '/index/logInfo'
      ]
    }
  },
  props: {
    item: {
      type: Object,
      required: true,
      default: () => {
        return {}
      }
    }
  },
  created () {
    this.isShowLanguage = this.$store.state.leftAside.isShowLanguage
  },
  methods: {
    showChildren (menu) {
      if (typeof menu.children === 'undefined' || menu.children.length <= 0) return false
      if (menu.children.length === 1 && menu.children[0].hidden) return false
      return true
    },
    submenuTitleNoDropdown (menu) {
      if (typeof menu.children === 'undefined' || menu.children.length <= 0) return false
      if (menu.children.length === 1 && menu.children[0].hidden) return true
      return false
    },
    handleOpenPage (item) {
      // console.log(item.path)
      this.ShowLanguage(item.path)
      this.$router.push({
        path: item.path
      })
    },
    ShowLanguage (path) {
      // console.log('click path', path)
      let newPath = path.indexOf('?') != -1 ? path.substring(0, path.indexOf('?')) : path;
      if (this.models.indexOf(newPath) != -1) {
        this.isShowLanguage = true
        this.$store.dispatch('leftAside/changeLanguage', this.isShowLanguage)
      } else {
        this.isShowLanguage = false
        this.$store.dispatch('leftAside/changeLanguage', this.isShowLanguage)
      }
    },
  }
}
</script>
