<template>
  <div
    class="Menu-wrapper tabMenu"
    style="display: flex; justify-content: space-around; align-items: center"
    @mouseleave.stop="handleMouseOut"
  >
    <!-- @mouseenter.prevent.stop="handleMouseOver" -->
<!--     <el-menu-->
<!--      :default-active="activeMenu"-->
<!--      :text-color="'black'"-->
<!--      :unique-opened="true"-->
<!--      :active-text-color="settings.theme"-->
<!--      :collapse-transition="false"-->
<!--      mode="horizontal"-->
<!--      ref="menus"-->
<!--    >-->
<!--      <menu-item-->
<!--        v-for="(route, index) in sidebarRouters"-->
<!--        :key="route.path + index"-->
<!--        :item="route"-->
<!--        :base-path="route.path"-->
<!--      ></menu-item>-->
<!--    </el-menu> -->
    <template v-for="(item, index) of sidebarRouters">
      <div
        v-if="!item.hidden"
        :key="index"
        :class="[tabMenuActive == item.meta.title ? `tabMenuItemActive` : ``]"
        class="tabMenuItem"
      >
        <svg-icon
          :icon-class="item.meta.icon"
          class-name="icon"
          style="height: 25px; width: 16px"
        />
        <span
          @mouseover.stop="handleMouseOver(item)"
          @click.stop="handleTabRoute2(item)"
        >
          {{ item && item.meta && item.meta.title }}
        </span>

        <div
          class="dropMenu"
          v-if="item && item.meta && item.meta.title !== '首页' && isOut"
        >
          <div
            class="dropMenuContent"
            v-if="secondChildMenu && secondChildMenu.meta.title !== '首页'"
          >
            <div class="dropLeMenu">
              <el-scrollbar class="dropMenuScrollbar">
                <div
                  class="dropLeMenuItem"
                  v-for="(item2, index2) of secondChildMenu.children"
                  :key="index2"
                  @mouseover.stop="handleTabMenu(item2)"
                >
                  <span style="width: 70%">{{
                    item2 && item2.meta && item2.meta.title
                  }}</span>
                  <span class="el-icon-arrow-right"></span>
                </div>
              </el-scrollbar>
            </div>
            <!-- 下拉菜单右侧 -->
            <div class="dropRaMenu" v-if="dropChildMenu">
              <template>
                <div
                  v-if="!(dropChildMenu && dropChildMenu.children)"
                  class="dropRaMenuHead"
                  @click.stop="handleTabRoute(dropChildMenu)"
                >
                  <span>{{ dropChildMenu.meta.title }}</span>
                </div>
                <div class="dropRaMenuScrollbar" v-else>
                  <div
                    class="dropRaMenuItem dropChildMenuActive"
                    v-for="(item3, index3) of dropChildMenu &&
                    dropChildMenu.children"
                    :key="index3"
                    v-if="!item3.hidden"
                    @click.stop="handleTabRoute(item3)"
                  >
<!--                    <span>{{ item3 && item3.meta&& item3.meta.title }}</span>-->
                    <span v-if="!item3.hidden">{{item3.meta.title }}</span>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { mapGetters, mapState } from "vuex";
import variables from "@/assets/styles/variables.scss";
import MenuItem from "./MenuItem/Index.vue";

export default {
  name: "SidebarItem",
  components: { MenuItem },
  data() {
    return {
      isOut: false,
      dropChildMenu: null,
      secondChildMenu: null,
      tabMenuActive: "",
    };
  },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo;
    },
    variables() {
      return variables;
    },
  },
  mounted() {
    console.log(this.sidebarRouters, "route");
  },
  methods: {
    handleMouseOver(item) {
      this.tabMenuActive = item.meta.title;
      this.isOut = true;
      this.secondChildMenu = item;
      this.dropChildMenu = null;
    },
    handleMouseOut() {
      this.secondChildMenu = null;
      this.dropChildMenu = null;
      // this.isOut = false;
    },
    handleTabMenu(item) {
      this.dropChildMenu = item;
    },
    handleTabRoute2(item) {
      if (item.meta.title === "首页") {
        this.$router.push({
          name: item.children[0].name,
        });
      } else {
        return;
      }
    },
    handleTabRoute(item) {
      this.$router.push({
        name: item.name,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Menu-wrapper {
  width: 100%;
  height: 50px;
  background-color: #fff;

  .el-menu {
    height: 100%;
    display: flex;
    justify-content: space-between;
  }
}
// .tabMenuItemActive {
// border-bottom: 2px solid #118590;
// color: #118590;
// }
.tabMenu {
  display: flex;
  justify-content: space-evenly;
  line-height: 50px;
}
.tabMenu {
  // height: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  border-bottom: 1px solid rgba(17, 133, 156, 0.16);
  .tabMenuItem {
    position: relative;
    width: 150px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .dropMenu {
      position: fixed;
      top: 120px;
      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.22);
        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;
                // 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: 22px !important;
              margin: 0 10px 0 0;
            }
            span {
              // font-size: 24px;
              font-size: 20px;
              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: 18px;
              }
              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;
    }
  }
}
@keyframes menuMove {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
