<template>
  <div class="aside-menu">
    <el-aside :width="menuShow ? '100%' : '0'" class="aside-container">
      <el-scrollbar class="editScroll">
        <el-menu
          ref="sidemenu"
          :default-active="activeIndex"
          class="el-menu-vertical"
          unique-opened
          @select="handleSelect"
        >
          <div class="title">训练数据库管理系统</div>
          <div
            v-for="menu in currentSubMenu"
            :key="menu.alias"
            active-text-color="#000"
          >
            <el-submenu
              v-if="menu.children && menu.children.length > 0"
              :index="'/frontPlat/' + alias + '/' + menu.alias"
              class="firstLevel"
            >
              <template slot="title">
                <svgIcon
                  :icon-class="menu.menuIcon ? menu.menuIcon : ''"
                  icon-style="icon header-icon"
                />
                <span class="firstLevelTitle" style="font-size: 16px">{{
                  menu.name
                }}</span>
              </template>
              <el-menu-item
                v-for="submMenu in menu.children"
                :key="submMenu.alias"
                :index="
                  '/frontPlat/' +
                  alias +
                  '/' +
                  menu.alias +
                  '/' +
                  submMenu.alias
                "
                class="subLevel"
              >
                <template slot="title">
                  <svgIcon
                    :icon-class="submMenu.menuIcon ? submMenu.menuIcon : ''"
                    icon-style="icon header-icon"
                  />
                  <span class="subLevelTitle">{{ submMenu.name }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
            <el-menu-item
              v-else
              :index="'/frontPlat/' + alias + '/' + menu.alias"
            >
              <svgIcon
                :icon-class="menu.menuIcon ? menu.menuIcon : ''"
                icon-style="icon header-icon"
              />
              <span slot="title" class="firstLevelTitle">{{ menu.name }}</span>
            </el-menu-item>
          </div>
        </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import menu from '@/api/menu.js'

export default {
  props: {
    menuShow: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      currentSubMenu: [],
      activeIndex: '',
    }
  },
  watch: {
    // 监听路由，如果为首页等非菜单页面，取消菜单选中项
    $route(to, from) {
      if (to.meta.isHome) {
        this.activeIndex = ''
      } else {
        this.filterSubMenu()
      }
    },
  },
  computed: {
    ...mapState({
      frontMenus: (state) => {
        // console.log(state.menu.frontMenus, 'dfsdsddf')
        return state.menu.frontMenus
      },
    }),
  },
  mounted() {
    this.activeIndex = this.$route.path
    // console.log(this.activeIndex, 'this.activeIndex')
    // const this_ = this
    // setTimeout(function () {
    //     !this_.currentUser &&
    //         this_.$store.dispatch('user/loadCurrentUserDetail')
    // }, 2000)
    const currentUser = this.$store.state.login.currentUser
    if ((!this.frontMenus || this.frontMenus.length == 0) && currentUser) {
      let this_ = this
      this.$store.dispatch('menu/actionFrontMenus').then((data) => {
        this.filterSubMenu()
      })
    } else {
      this.filterSubMenu()
    }
    this.$bus.$on('frontMenuShow', () => {
      this.handleMenuCollapse()
    })
    this.$bus.$on('roterPush', (path) => {
      console.log('监听到了')
      this.activeIndex = path
    })
  },
  created() {},
  methods: {
    // 菜单的收折
    handleMenuCollapse() {
      this.$emit('update:menuShow', !this.menuShow)
    },
    // 选中菜单跳转 不启用el-menu router模式 否则无法选中 暂未查明原因，改用手动推路由
    handleSelect(path, isJump) {
      // this.$router.push(path) //梁
      // console.log(path, 'alias')
      let alias, alias1
      let _this = this
      if (path && path.indexOf('/href') == -1) {
        let i = path.lastIndexOf('/')
        alias = path.slice(i + 1)
      } else {
        // url 菜单
        let i = path.indexOf('/href')
        alias = path.slice(i + 1)
      }
      menu.getMenuByAlias(alias, (m) => {
        // console.log(m, 3333)
        m && _this.$emit('menuChange', m)
        // 外部打开
        if (m && m.openType == '2' && isJump) {
          if (m.alias.indexOf('href/') == -1) {
            let openPath = '/frontPlat/' + m.alias
            let routeUrl = this.$router.resolve({path: openPath})
            // let token = JSON.parse(window.sessionStorage.getItem('currentUser')).token
            window.open(routeUrl.href, '_blank')
            // window.open(
            //   window.context.yhxt + `${routeUrl.href}` + '?token=' + token,
            //   '_blank'
            // )
          } else {
            let tempwindow = window.open()
            tempwindow.location = m.href
          }
        } else if (m && m.parent) {
          // 内部打开
          this.$router.push(path)
          this.activeIndex = path
        }
      })
    },
    // 筛选出选中菜单
    filterSubMenu() {
      this.alias = this.$route.path.split('/')[2].replace('/', '')
      if (this.frontMenus) {
        let currentMenu = this.frontMenus.filter(
          (item) => item.alias === this.alias
        )[0]
        if (currentMenu) {
          this.currentSubMenu = currentMenu.children
        }
        this.$refs.sidemenu.activeIndex = this.$route.path
      }
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.title {
  height: 75px;
  color: #fff;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  line-height: 75px;
}

.aside-container {
  height: 100%;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.aside-menu {
  height: 100% !important;
  position: relative;
  // background-color: #fff;
  background-image: linear-gradient(223deg, #2d2e32 0%, #2d2e32 100%);
  box-shadow: 0 0px 12px 0 rgba($color: #23294c, $alpha: 0.1);
}

.el-menu-vertical {
  height: 100% !important;

  .header-icon {
    margin-right: 10px;
    font-size: 14px;
    vertical-align: middle;
    margin-top: -1px;
  }
}

::v-deep .el-submenu__title {
  padding: 0 20px !important;
  height: 56px !important;
  line-height: 56px !important;
}

::v-deep .el-menu-item {
  padding: 0 20px !important;
  height: 56px !important;
  line-height: 56px !important;

  svg {
    font-size: 17px !important;
    color: $--biz-text-color;
  }

  span {
    font-size: 17px !important;
    color: $--biz-text-color;
  }
}

::v-deep .el-submenu .el-menu-item {
  padding: 0 40px !important;
  height: 46px;
  line-height: 46px;
}

::v-deep .el-menu {
  border-right: none;
  background-color: transparent;
}

::v-deep .el-menu--inline {
  background-color: #3c3c3c;
}

::v-deep .el-submenu__title .firstLevelTitle {
  color: $--biz-text-color !important;
}

.firstLevel .header-icon {
  font-size: 18px;
  margin-top: -4px;
}

.subLevel .header-icon {
  font-size: 16px;
  margin-top: -4px;
}

.el-submenu__title *,
.el-menu-item * {
  font-size: 17px !important;
  vertical-align: baseline;
}

.aside-container ::v-deep .el-submenu__title {
  span,
  svg {
    color: rgba(#fff, 0.65) !important;
    font-size: 14px;
  }
}

.aside-container ::v-deep .el-submenu__title:hover {
  background-color: #4d4c50 !important;

  span,
  svg {
    color: #fff !important;
  }
}

.aside-container ::v-deep .el-submenu.is-opened .el-submenu__title {
  span,
  svg {
    color: #fff !important;
  }
}

.aside-container ::v-deep .el-menu-item {
  span,
  svg {
    color: rgba(#fff, 0.65) !important;
    font-size: 14px;
  }
}

.aside-container ::v-deep .el-menu-item.is-active,
.aside-container ::v-deep .el-menu-item:focus,
.aside-container ::v-deep .el-menu-item:hover {
  background-color: #4d4c50 !important;
  // background-color: transparent;
  span,
  svg {
    color: #fff !important;
    font-size: 14px;
  }
}

// .aside-container  ::v-deep  .el-menu-item:hover{
//     background-color: #4275E8 !important;
// }
.editScroll {
  height: 100% !important;
  overflow-x: hidden;
}

::v-deep .el-scrollbar__wrap {
  // height: calc(100% + 17px) !important;

  height: 100% !important;
}
</style>
