<template>
  <div>正在开发中.....</div>
  <!--<div class="tabMenu" @mouseleave.stop="handleMouseOut">
    <template v-for="(item, index) of sidebarRouters">
     
      <div v-if="!item.hidden" :key="index" class="tabMenuItem">
        <template
          v-if="
            hasOneShowingChild(item.children, item) &&
            (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
            !item.alwaysShow
          "
        >
          <div
            style="text-align: center"
            @mouseenter.stop="handleMouseOut"
            @click.stop="handleIndex(onlyOneChild || item)"
          >
            <svg-icon
              :icon-class="
                onlyOneChild.meta.icon || (item.meta && item.meta.icon)
              "
            />
            <span>{{ onlyOneChild.meta.title }}</span>
          </div>
        </template>
        <template v-else>
          <div
            style="text-align: center"
            @mouseenter.stop="handleMouseOver(item)"
          >
            <svg-icon :icon-class="item.meta && item.meta.icon" />
            <span>{{ item.meta.title }}</span>
          </div>
        </template>
        
        <div
          v-if="isOut"
          class="dropMenu"
          :class="[activeMenu == item.path ? 'dropMenuAniam' : '']"
          @click.stop="handleStop(item)"
        >
          <div class="dropMenuContent">
           
            <div class="dropLeMenu">
              <el-scrollbar class="dropMenuScrollbar">
                <div
                  class="dropLeMenuItem"
                  v-for="(item2, index2) of leftMenuObj.children"
                  :key="index2"
                  @mouseenter.stop="handleDropMenu(item2)"
                >
                  <span style="width: 150px">{{ item2.meta.title }}</span>
                  <span class="el-icon-arrow-right"></span>
                </div>
              </el-scrollbar>
            </div>
           
            <div class="dropRaMenu">
              <template v-if="rightMenuObj">
                <div class="dropRaMenuHead">
                  <span
                    class="pointer"
                    v-if="!(rightMenuObj && rightMenuObj.children)"
                    @click.stop="handleTabRoute(rightMenuObj)"
                    >{{ rightMenuObj.meta && rightMenuObj.meta.title }}</span
                  >
                  <span v-else>{{
                    rightMenuObj.meta && rightMenuObj.meta.title
                  }}</span>
                </div>
                <div
                  class="dropRaMenuScrollbar"
                  v-if="rightMenuObj && rightMenuObj.children"
                >
                  <div
                    class="dropRaMenuItem pointer"
                    v-for="(item3, index3) of rightMenuObj.children"
                    :key="index3"
                    @click.stop="handleTabRoute(item3)"
                  >
                    <span>{{ item3.meta && item3.meta.title }}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div> -->
</template>

<script>
import variables from "@/assets/styles/variables.scss";
import { isExternal } from "@/utils/validate";
import path from "path";
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      isOut: false,
      leftMenuObj: {},
      rightMenuObj: {},
    };
  },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    variables() {
      return variables;
    },
  },
  methods: {
    handleIndex(val) {
      this.$router.push({ path: "/" }).catch(() => {});
    },
    handleTabRoute(item) {
      this.$router.push({ path: item.path }).catch(() => {});
    },
    handleDropMenu(item) {
      this.rightMenuObj = item;
    },
    handleStop(item) {
      console.log(item, "handleStop");
    },
    handleMouseOver(item) {
      this.isOut = true;
      this.leftMenuObj = item;
    },
    handleMouseOut() {
      this.isOut = false;
    },
    hasOneShowingChild(children = [], parent) {
      if (!children) {
        children = [];
      }
      const showingChildren = children.filter((item) => {
        if (item.hidden) {
          return false;
        } else {
          // Temp set(will be used if only has one showing child)
          this.onlyOneChild = item;
          return true;
        }
      });

      // When there is only one child router, the child router is displayed by default
      if (showingChildren.length === 1) {
        return true;
      }

      // Show parent if there are no child router to display
      if (showingChildren.length === 0) {
        this.onlyOneChild = { ...parent, path: "", noShowingChildren: true };
        return true;
      }

      return false;
    },
    resolvePath(routePath, routeQuery) {
      if (isExternal(routePath)) {
        return routePath;
      }
      if (isExternal(this.basePath)) {
        return this.basePath;
      }
      if (routeQuery) {
        let query = JSON.parse(routeQuery);
        return { path: path.resolve(this.basePath, routePath), query: query };
      }
      return path.resolve(this.basePath, routePath);
    },
  },
};
</script>

<style lang="scss" scoped>
.tabMenu {
  display: flex;
  // justify-content: space-evenly;
  line-height: 50px;
}
.tabMenuItem {
  width: 25%;
  position: relative;
}
.dropMenu {
  position: fixed;
  // top: 130px;
  left: 20px;
  width: 100%;
  z-index: 9999;
  .dropMenuContent {
    // width: 550px;
    width: 95%;
    height: 300px;
    transform: translateY(10px);
    display: flex;
    background: #fff;
    box-shadow: 0px 7px 20px 0px rgba(3, 0, 0, 0.03);
    z-index: 10000;
    overflow: hidden;
    .dropLeMenu {
      //width: 250px;
      min-width: 250px;
      height: 100%;
      // background: #ebebeb;
      background: #fff;
      box-shadow: 3px 2px 7px 0 rgba(0, 0, 0, 0.15);
      .dropMenuScrollbar {
        height: 100%;
        .dropLeMenuItem {
          width: 100%;
          height: 60px;
          display: flex;
          align-items: center;
          color: #333;
          span {
            // font-size: 20px;
            font-size: 16px;
            // margin: 0 0 0 49px;
            margin: 0 0 0 20px;
          }
        }
      }
    }
    .dropRaMenu {
      width: calc(100% - 250px);
      .dropRaMenuHead {
        width: calc(100% - 40px);
        margin: 0 auto;
        padding: 15px 0 10px 0;
        // border-bottom: solid 1px rgb(219, 217, 217);
        color: #333;
        i {
          font-size: 16px;
          margin: 0 10px 0 0;
        }
        span {
          font-size: 16px;
          border-bottom: 2px solid #118590;
        }
      }
      .dropRaMenuScrollbar {
        width: 100%;
        height: calc(100% - 57.87px);
        margin: 0 auto;
        padding-bottom: 10px;
        padding-top: 10px;
        overflow-y: scroll;
        .dropRaMenuItem {
          width: calc(100% - 40px);
          height: 45px;
          display: flex;
          align-items: center;
          margin: 0 auto;
          color: #333;
          span {
            font-size: 16px;
            // margin: 0 0 0 39px;
          }
          span:hover {
            border-bottom: 2px solid #118590;
          }
        }
      }
      ::-webkit-scrollbar {
        width: 8px; /* 纵向滚动条*/
        height: 12px; /* 横向滚动条 */
        background-color: #fff;
        cursor: pointer;
      }

      /*定义滚动条轨道 内阴影*/
      ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        background-color: #fff;
        cursor: pointer;
      }

      /*定义滑块 内阴影*/
      ::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
        background-color: #ddd;
        border-radius: 10px;
        cursor: pointer;
      }
    }
  }
}
.dropMenuAniam {
  animation: menuMove 0.2s linear forwards;
  border-bottom: 2px solid #118590;
  color: #118590;
}
.pointer {
  cursor: pointer;
}
</style>
