<template>
  <el-col class="horizontal" :span="12">
    <div class="move" @click="toLeftMove" v-show="isMove">
      <i class="el-icon-arrow-left" />
    </div>
    <div class="navsystemBar" ref="navsystemBar" id="swiperMenu">
      <el-menu id="navSystemMenu" class="nav-system-menu" :default-active="$route.path" mode="horizontal">
        <template v-for="(item, indexs) in sidebarRouters">
          <div v-if="!item.hidden" :key="indexs">
            <app-link v-if="!item.children && !item.alwaysShow" :to="item.path">
              <el-menu-item :title="item.menuName" :index="item.path">
                <span slot="title">{{ item.meta.title }}</span>
              </el-menu-item>
            </app-link>
            <el-menu-item v-else :title="item.menuName" :index="item.path" @click="toParentView(item)">
              <span slot="title">{{ item.meta.title }}</span>
            </el-menu-item>
            <!--  -->
            <!--            <menu-item v-else :item="item" :base-path="item.path"></menu-item>-->
          </div>
        </template>
        <!-- 超过4个时下拉显示 -->
        <!-- <sidebar-item-hori  v-if="sidebarRouters.length>4" :item="moreRouter" :base-path="moreRouter.path"></sidebar-item-hori> -->
      </el-menu>
    </div>
    <div class="move" @click="toRightMove" v-show="isMove">
      <i class="el-icon-arrow-right" />
    </div>
  </el-col>
</template>

<script>
import path from "path";
// import { constantRouterMap } from "@/router";
import { isExternal } from "@/utils";
// import MenuItem from "./MenuItem";
// import SidebarItemDown from './SidebarItemDown'
import AppLink from "./Link";
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      basePath: "/",
      onlyOneChild: null,
      navMenuFlag: false,
      moreRouter: {},
      menuList: [
        { menuName: "测试", menuUrl: "/index" },
        { menuName: "测试2", menuUrl: "/index" },
        { menuName: "测试3", menuUrl: "/index" },
      ],
      sidebarRouters: this.$router.getRoutes(),
      permissionRouters: [],
      isMove: false,
      allWidth: 0, // 菜单总宽度
      boxLength: 0, // 可视窗口宽度
      menuWidth: 114, // 移动宽度
    };
  },
  computed: {
    ...mapGetters(["sysUserInfo"]),
  },
  components: {
    // MenuItem,
    // SidebarItemDown,
    AppLink,
  },
  watch: {
    $route() {
      this.navMenuFlag = false;
      this.addView();
    },
  },
  created() {
    const platform = localStorage.getItem("platform");
    console.log("menu platform", platform);
    const dispatchRoute = this.sidebarRouters.find((x) => x.name === "dispatch");
    const businessRoute = this.sidebarRouters.find((x) => x.name === "business");
    if (platform) {
      switch (platform) {
        case "1":
          dispatchRoute.meta.title = "指挥调度";
          businessRoute.meta.title = "业务管理";
          break;
        case "2":
          dispatchRoute.meta.title = "内保调度";
          businessRoute.meta.title = "内保记录";
          break;
        default:
          dispatchRoute.meta.title = "指挥调度";
          businessRoute.meta.title = "业务管理";
      }
    }
    this.moreRouter = {
      path: "",
      meta: { title: "" },
      children: this.permissionRouters.slice(4),
    };
    this.initMenusWidth();
    // 监听页面窗口变化
    window.addEventListener("resize", () => {
      this.initMenusWidth();
    });
  },
  mounted() {
    this.addView();
  },
  methods: {
    generateRoute() {
      if (this.$route.name) {
        return this.$route;
      }
      return false;
    },
    addView() {
      const route = this.generateRoute();
      if (!route) {
        return false;
      }
      this.$store.dispatch("addVisitedViews", route);
    },
    changeMoreMenu() {
      this.navMenuFlag = !this.navMenuFlag;
    },
    hideNavContext() {
      this.navMenuFlag = 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) {
      if (isExternal(routePath)) {
        return routePath;
      }
      if (isExternal(this.basePath)) {
        return this.basePath;
      }
      return path.resolve(this.basePath, routePath);
    },

    // 菜单右侧移动按钮
    toRightMove() {
      const menuscrollLeft = document.getElementById("navSystemMenu").scrollLeft;
      if (this.allWidth > this.boxLength + menuscrollLeft) {
        document.getElementById("navSystemMenu").scrollLeft += this.menuWidth;
      } else {
        document.getElementById("navSystemMenu").scrollLeft = this.allWidth;
      }
    },
    // 菜单左侧移动按钮
    toLeftMove() {
      let menuscrollLeft = document.getElementById("navSystemMenu").scrollLeft;
      if (menuscrollLeft > 0) {
        document.getElementById("navSystemMenu").scrollLeft -= this.menuWidth;
      } else {
        document.getElementById("navSystemMenu").scrollLeft = 0;
      }
    },
    // 初始化目录栏
    initMenusWidth() {
      this.$nextTick(() => {
        // 可视窗口宽度
        this.boxLength = document.getElementById("swiperMenu").offsetWidth;
        // 菜单宽度
        this.allWidth = document.getElementById("navSystemMenu").scrollWidth;
        if (this.allWidth > this.boxLength) {
          this.isMove = true;
        } else {
          this.isMove = false;
        }
      });
    },
    toParentView({ path }) {
      this.$router.push({
        path,
      });
    },
  },
};
</script>

<style lang="scss">
.navsystemBar {
  .el-menu-item.is-active:before {
    content: "";
    background: none;
  }
  .el-menu-item:hover,
  .el-submenu__title:hover,
  .el-menu-item.is-active,
  .el-submenu__title.is-active {
    //background: linear-gradient(#022281, #0b44c6) !important;
    color: #0e70ff !important;
  }
  .columnMenu {
    .el-menu-item:hover,
    .el-submenu__title:hover,
    .el-menu-item.is-active,
    .el-submenu__title.is-active {
      background: #eee !important;
      color: #333 !important;
    }
    .el-menu-item,
    .el-submenu__title {
      text-align: left;
    }
  }
  .el-menu-item:hover,
  .el-submenu__title:hover {
    background: none;
    //color: none;
  }
  .el-menu--horizontal .el-submenu .el-submenu__title,
  .el-menu--horizontal .el-menu-item,
  .el-menu--horizontal .el-menu-item.is-active {
    border-top: 0px solid rgba(000, 000, 000, 0);
    padding-top: 5px;
    border-bottom: none;
    position: relative;
  }
  .el-menu--horizontal .el-menu-item.is-active::after {
    content: "";
    width: 38px;
    height: 4px;
    background: #0e70ff;
    border-radius: 4px 4px 4px 4px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  .el-menu-item * {
    vertical-align: inherit;
  }
  .el-menu-item {
    height: 64px !important;
    line-height: 64px;
  }
}

.nav-system-menu {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  align-items: center;
  .el-menu-item {
    float: none;
  }
  .el-submenu {
    height: 64px;
  }
}
.hori-item {
  & > .el-submenu.is-active > .el-submenu__title {
    //color: #fff;
    //background: linear-gradient(#022281, #0b44c6) !important;
  }
}
.el-menu--popup {
  background-color: #fff !important;

  .el-submenu__title,
  .el-submenu__icon-arrow,
  .el-menu-item {
    color: #333 !important;
  }
  .hori-item > .el-submenu.is-active > .el-submenu__title,
  .el-menu-item.is-active {
    border-top: none;
    background: #eee !important;
    border-left: 2px solid #06a8f9;
  }
}
.more > .el-submenu > .el-submenu__title:hover,
.more > .el-submenu.is-opened > .el-submenu__title:hover,
.more > .el-submenu.is-active > .el-submenu__title {
  background: none !important;
  color: #fff !important;
  .el-submenu__icon-arrow {
    color: #06a8f9;
  }
}
.theme-dark {
  .navsystemBar {
    .el-menu-item.is-active:before {
      content: "";
      background: none;
    }
    .hori-item {
      & > .el-submenu.is-active > .el-submenu__title,
      & > .el-submenu.is-opened > .el-submenu__title,
      & > .el-submenu > .el-submenu__title:hover {
        color: #fff;
        background: #1b294b !important;
        color: #06a8f9 !important;
        height: 64px;
        .el-submenu__icon-arrow {
          color: #06a8f9;
        }
      }
    }
    .more {
      & > .el-submenu > .el-submenu__title {
        border-top: none;
      }
      & > .el-submenu.is-active > .el-submenu__title,
      & > .el-submenu.is-opened > .el-submenu__title,
      & > .el-submenu > .el-submenu__title:hover {
        background: #141f39 !important;
        border-top: none;
        .el-submenu__icon-arrow {
          color: #06a8f9;
        }
      }
    }
  }
}

.horizontal {
  height: 64px;
  //width: fit-content;
  display: flex;
  .navsystemBar {
    width: calc(100vw - 900px);
    min-width: 480px;
    position: relative;
    overflow: hidden;
  }
  .move {
    width: 36px;
    height: 100%;
    background: #0444ae;
    color: #fff;
    cursor: pointer;
  }
}
</style>
