<template>
  <div class="aside-menu">
    <!-- :width="menuShow ? '210px' : '0px'" -->
    <el-aside :width="menuShow ? '210px' : '64px'" class="aside-container">
      <el-scrollbar class="editScroll">
        <el-menu
          ref="sidemenu"
          unique-opened
          class="el-menu-vertical"
          :default-active="activeIndex"
          @select="handleSelect"
          :collapse="isCollapse"
        >
          <!--  style="min-width: 210px; max-width: 210px" -->
          <template v-for="menu in frontMenus">
            <div v-if="menu.showMenu" :key="menu.alias">
              <el-submenu
                :index="'/frontPlat/' + menu.alias"
                v-if="menu.children && menu.children.length > 0"
                class="firstLevel"
              >
                <template slot="title">
                  <svgIcon
                    icon-style="icon header-icon"
                    :icon-class="menu.menuIcon ? menu.menuIcon : ''"
                  />
                  <span slot="title" class="firstLevelTitle">
                    {{ menu.name }}
                  </span>
                </template>
                <el-menu-item
                  :index="'/frontPlat/' + submMenu.alias"
                  v-for="submMenu in menu.children"
                  :key="submMenu.alias"
                  class="subLevel"
                >
                  <template slot="title">
                    <svgIcon
                      icon-style="icon header-icon"
                      :icon-class="submMenu.menuIcon ? submMenu.menuIcon : ''"
                    />
                    <span slot="title" class="subLevelTitle">{{
                      submMenu.name
                    }}</span>
                  </template>
                </el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="'/frontPlat/' + menu.alias">
                <svgIcon
                  icon-style="icon header-icon"
                  :icon-class="menu.menuIcon ? menu.menuIcon : ''"
                />
                <span slot="title" class="firstLevelTitle">
                  {{ menu.name }}
                </span>
              </el-menu-item>
            </div>
          </template>
        </el-menu>
      </el-scrollbar>
      <!-- <div
        style="width: 30px; display: flex; align-items: center"
        class="sideImg"
        @click="handleMenuCollapse"
      >
        <img :src="imgUrl" alt="" style="width: 30px; height: 40px" />
      </div> -->
    </el-aside>
    <!-- <div
      style="width: 15px; display: flex; align-items: center"
      class="absideImg"
      @click="handleMenuCollapse"
      ref="img"
    >
      <span class="DH" style="width: 25px; height: 35px"></span>
    </div> -->

    <!-- 侧边栏导航栏缩放 -->
    <div
      :style="menuShow ? 'left:230px' : 'left: 84px'"
      class="navbar-menu-collapse"
      :class="activeHover ? 'activeHover' : 'activeRemove'"
      @click.capture="handleMenuCollapse"
      :title="menuShow ? '隐藏目录' : '显示目录'"
      ref="menuIcon"
    >
      <i
        v-if="activeHover"
        :class="{
          'el-icon-arrow-left': menuShow,
          'el-icon-arrow-right': !menuShow,
        }"
      />
    </div>
  </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: '',
      imgUrl: require('@/assets/img/left.png'),
      imgbool: '',
      activeHover: false,
      bol: true,
      isCollapse: false,
    }
  },
  watch: {
    // 监听路由，如果为首页等非菜单页面，取消菜单选中项
    $route(to, from) {
      if (to.meta.isHome) {
        this.activeIndex = ''
      }
    },
  },
  computed: {
    ...mapState({
      frontMenus: (state) => {
        // console.log(state.menu.frontMenus, 'dfsdsddf')
        return state.menu.frontMenus
      },
    }),
  },
  mounted() {
    this.activeIndex = this.$route.path
    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
    })
    this.$bus.$on('handleAsideBtn', (bol) => {
      this.bol = bol
    })
    window.addEventListener(
      'mousemove',
      (e) => {
        this.$nextTick(() => {
          this.handleMousemove(e)
        })
      },
      true
    )
  },

  methods: {
    handleMousemove(e) {
      let pageX = e.pageX
      let pageY = e.pageY
      // let dom = this.$refs.menuIcon
      if (this.bol) {
        if (this.menuShow) {
          if (pageX <= 245 && pageY > 60) {
            this.activeHover = true
          } else {
            this.activeHover = false
          }
        } else {
          if (pageX <= 100 && pageY > 60) {
            this.activeHover = true
          } else {
            this.activeHover = false
          }
        }
      }
    },
    // 菜单的收折
    handleMenuCollapse() {
      this.$emit('update:menuShow', !this.menuShow)
      this.isCollapse = !this.isCollapse
      // console.log(this.menuShow)
      // if (this.menuShow) {
      //   this.$refs.img.style.left = 0
      //   this.imgUrl = require('@/assets/img/right.png')
      // } else {
      //   this.$refs.img.style.left = '210px'
      //   this.imgUrl = require('@/assets/img/left.png')
      // }
    },
    // 选中菜单跳转 不启用el-menu router模式 否则无法选中 暂未查明原因，改用手动推路由
    handleSelect(path, isJump) {
      // console.log(path, "alias")
      let alias
      let _this = this
      if (path && path.indexOf('/frontPlat/href') == -1) {
        // url 菜单
        let i = path.lastIndexOf('/')
        alias = path.slice(i + 1)
      } else {
        alias = path.replace('/frontPlat/', '')
      }
      // console.log(alias, "alias")
      menu.getMenuByAlias(alias, (m) => {
        // debugger
        console.log(m)
        m && _this.$emit('menuChange', m)
        if (m && m.openType == '2' && isJump) {
          if (m.alias.indexOf('href/') == -1) {
            let openPath = '/newOpen/' + 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) {
          // console.log(path)
          this.$router.push(path)
          this.activeIndex = path
        }
      })
    },
    // // 筛选出选中菜单
    filterSubMenu() {
      this.alias = this.$route.path.split('/')[2].replace('/', '')
      console.log(this.alias)
      if (this.frontMenus) {
        this.currentMenu = this.frontMenus
        console.log(this.currentSubMenu, 'this.currentSubMenu')
        this.$refs.sidemenu.activeIndex = '/frontPlat/' + this.alias
      }
    },
  },
  destroyed() {
    window.removeEventListener('mousemove', this.handleMousemove)
  },
}
</script>

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

.el-menu-vertical:not(.el-menu--collapse) {
  width: 210px;
  & > div {
    padding: 5px 0;
  }
}
.el-menu-vertical.el-menu--collapse div {
  padding: 5px 0;
}

.aside-container {
  height: 100%;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
  display: flex;
  position: relative;
  // img{

  // }
}

.absideImg {
  position: absolute;
  top: 50%;
  left: 210px;
  z-index: 999;
  border-radius: 0 50px 50px 0;

  // span {
  //   // width: 25px;
  //   // height: 30px;
  //   background: url('../../assets/img/left.png') center no-repeat;
  //   background-size: 25px 30px;
  // }
}

// .absideImg:hover {
//   background: #fff;
//   span {
//     // width: 25px;
//     // height: 30px;
//     background: url('../../assets/img/left.png') center no-repeat;
//     background-size: 25px 30px;
//     cursor: pointer;
//   }
// }
// .absideImg:active{
//   left: 0;
// }
.aside-menu {
  padding: 10px;
  box-sizing: border-box;
  height: 100% !important;
  position: relative;
  background-color: #fff;
  box-shadow: 0 0px 12px 0 rgba($color: #000000, $alpha: 0.1);
}

.activeHover {
  width: 25px !important;
}

.activeRemove {
  width: 0 !important;
}

// .aside-menu:hover {
//   .navbar-menu-collapse {
//     width: 25px;
//   }
//   .navbar-menu-collapse > i {
//     display: block;
//   }
// }
/* 侧边栏导航栏缩放样式 */
.navbar-menu-collapse {
  height: 30px;
  width: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 50%;
  left: 210px;
  z-index: 999;
  transform: translateY(-50%);
  background-color: #e2e4eb;
  border-radius: 0 50px 50px 0;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
}

.navbar-menu-collapse > img {
  height: 30px;
}

.navbar-menu-collapse > i {
  font-size: 18px;
  /*margin: 13px;*/
  //color: $--color-primary;
  color: #333;
  transition: all 0.5s;
}

.navbar-menu-collapse > i:hover {
  color: #4c8bf2;
}

// .aside-menu:hover {
//   .absideImg {
//     background: #fff;
//     span {
//       // width: 25px;
//       // height: 30px;
//       background: url('../../assets/img/left.png') center no-repeat;
//       background-size: 25px 30px;
//     }
//   }
// }
.el-menu-vertical {
  height: 100% !important;

  .header-icon {
    margin-right: 10px;
    font-size: 18px;
    vertical-align: middle;
    margin-top: -1px;
    // color: #a6b2c5;
  }
}

/deep/ .el-submenu__title {
  padding: 0 20px !important;
  height: 46px;
  line-height: 46px;
  // color: #fff;
}

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

  // color: #fff;
  // background-color: #114066;
  span {
    font-size: 20px !important;
  }
}

/deep/ .el-submenu .el-menu-item {
  padding: 0 40px !important;
  height: 46px;
  line-height: 46px;
  // color: #fff;
  // background-color: rgba(226, 228, 235, 0.6);
}

/deep/ .el-menu {
  border-right: none;
  // background-color: #114066;
  // background-color: #144871;
}

/deep/ .el-submenu__title .firstLevelTitle {
  font-size: 20px !important;
}
.firstLevelTitle {
  // color: #a3a3a3;
  color: #000;
}

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

.subLevel .header-icon {
  font-size: 16px;
  margin-top: -4px;
  // color: #cedaee;
}
.subLevelTitle {
  // color: #a6b2c5;
  color: rgba(0,0,0,0.8);
  font-size: 18px;
}

.el-submenu__title *,
.el-menu-item * {
  vertical-align: baseline;
}

/deep/ .el-submenu__title:hover {
  // background-color: #0f304f !important;
  // color: #fff !important;
}

.aside-container /deep/ .el-menu-item.is-active,
.aside-container /deep/ .el-menu-item:hover,
.aside-container /deep/ .el-menu-item:focus {
  color: #4c8bf2 !important;
  // background-color: #3daeff !important;
  // background-color: rgba($color: #4c8bf2, $alpha: 1.0) !important;
}

.editScroll {
  height: 100% !important;
  overflow-x: hidden;
}

/deep/ .el-scrollbar__wrap {
  height: calc(100% + 17px) !important;
  // background-color: #114066;
}

/deep/ .el-submenu {
  // background-color: #114066;
}

.sideImg:hover {
  background: #eee;
}
/deep/ .el-submenu__title:hover,
.el-submenu__title:focus,
.el-menu-item:hover,
.el-menu-item:focus,
.aside-container .el-menu-item.is-active  {
  background: #3a77fd;
  border-radius: 6px 6px 6px 6px;
  .firstLevelTitle,
  .subLevelTitle,
  .header-icon,
  .el-submenu__icon-arrow {
    color: #fff;
  }
}
/deep/ .el-submenu .el-menu-item:hover,
.aside-container .el-menu-item.subLevel.is-active{
  background: rgba(58,119,253, 0.8);
  border-radius: 6px 6px 6px 6px;
  .subLevelTitle {
    color: #ffffff;
  }
}
</style>
<style>
/* 解决element-ui 菜单文字不隐藏问题 */
/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
.el-menu--popup {
  padding: 10px;
}
.el-menu--popup .el-menu-item:hover,
.el-menu--popup .el-menu-item:focus {
  background: #a7d0ff;
}
.el-menu--popup .el-menu-item:hover .subLevelTitle {
  color: #ffffff;
}
.el-tooltip__popper.is-dark{
  background-color: #fff !important;
  color:#000; ;
}
</style>
