<template>
  <div
    class="top-menu"
    style="display: flex; background-color: #409eff; height: 59px"
  >
    <el-menu
      :active-text-color="'#FFFFFF'"
      :background-color="'#409eff'"
      :collapse-transition="false"
      :default-active="$route.path"
      :text-color="'#ffffff'"
      :unique-opened="true"
      mode="horizontal"
      style="flex: 1"
      @select="handleSelect"
    >
      <template v-for="(item, i) in routers">
        <template v-if="!item.hidden">
          <template v-if="item.path === '/'">
            <el-menu-item
              :key="item.path + i"
              :index="item.path + item.children[0].name"
              :style="{ '--theme': theme }"
            >
              <svg-icon :icon-class="item.children[0].meta.icon" />
              {{ item.children[0].meta.title }}
            </el-menu-item>
          </template>
          <el-submenu v-else-if="item.children" :index="item.path">
            <template slot="title">{{ item.meta.title }}</template>
            <template v-for="(child, childIndex) in item.children">
              <template v-if="!child.hidden">
                <template v-if="child.children">
                  <el-submenu :index="item.path + '/' + child.path">
                    <template slot="title">{{ child.meta.title }}</template>
                    <template v-for="threeChild in child.children">
                      <template v-if="!threeChild.hidden">
                        <el-menu-item
                          :index="
                            item.path + '/' + child.path + '/' + threeChild.path
                          "
                          >{{ threeChild.meta.title }}
                        </el-menu-item>
                      </template>
                    </template>
                  </el-submenu>
                </template>
                <template v-else>
                  <el-menu-item :index="item.path + '/' + child.path">
                    <svg-icon :icon-class="child.meta.icon" />
                    {{ child.meta.title }}
                  </el-menu-item>
                </template>
              </template>
            </template>
          </el-submenu>
        </template>
      </template>

      <!-- 顶部菜单超出数量折叠 -->
      <!--    <el-submenu :style="{'&#45;&#45;theme': theme}" index="more" v-if="topMenus.length > visibleNumber">-->
      <!--      <template slot="title">更多菜单</template>-->
      <!--      <template v-for="(item, index) in topMenus">-->
      <!--        <el-menu-item-->
      <!--          :index="item.path"-->
      <!--          :key="index"-->
      <!--          v-if="index >= visibleNumber"-->
      <!--        >-->
      <!--          <svg-icon :icon-class="item.meta.icon"/>-->
      <!--          {{ item.meta.title }}-->
      <!--        </el-menu-item-->
      <!--        >-->
      <!--      </template>-->
      <!--    </el-submenu>-->
    </el-menu>
    <el-button style="margin: 0 8px;color: #FFFFFF" type="text" @click="downloadEvt">
      打印插件下载
    </el-button>
  </div>
</template>

<script>
import { constantRoutes } from "@/router";
import { mapGetters, mapState } from "vuex";
import path from "path";
import { isExternal } from "@/utils/validate";
import variables from "@/assets/styles/variables.scss";

export default {
  data() {
    return {
      // 顶部栏初始数
      visibleNumber: 5,
      // 是否为首次加载
      isFrist: false,
      // 当前激活菜单的 index
      currentIndex: undefined,
    };
  },
  computed: {
    ...mapState(["settings"]),
    ...mapGetters(["sidebarRouters", "sidebar"]),
    theme() {
      return this.$store.state.settings.theme;
    },
    variables() {
      return variables;
    },
    // 顶部显示菜单
    topMenus() {
      let topMenus = [];
      this.routers.map((menu) => {
        if (menu.hidden !== true) {
          // 兼容顶部栏一级菜单内部跳转
          if (menu.path === "/") {
            topMenus.push(menu.children[0]);
          } else {
            topMenus.push(menu);
          }
        }
      });
      return topMenus;
    },
    // 所有的路由信息
    routers() {
      return this.$store.state.permission.topbarRouters;
    },
    // 设置子路由
    childrenMenus() {
      var childrenMenus = [];
      this.routers.map((router) => {
        for (var item in router.children) {
          if (router.children[item].parentPath === undefined) {
            if (router.path === "/") {
              router.children[item].path =
                "/redirect/" + router.children[item].path;
            } else {
              if (!this.ishttp(router.children[item].path)) {
                router.children[item].path =
                  router.path + "/" + router.children[item].path;
              }
            }
            router.children[item].parentPath = router.path;
          }
          childrenMenus.push(router.children[item]);
        }
      });
      return constantRoutes.concat(childrenMenus);
    },
    // 默认激活的菜单
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      return path;
    },
  },
  beforeMount() {
    window.addEventListener("resize", this.setVisibleNumber);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.setVisibleNumber);
  },
  mounted() {},
  methods: {
    downloadEvt() {
      const el = document.createElement("a");
      el.style.display = "none";
      el.setAttribute("target", "_blank");
      /**
       * download的属性是HTML5新增的属性
       * href属性的地址必须是非跨域的地址，如果引用的是第三方的网站或者说是前后端分离的项目(调用后台的接口)，这时download就会不起作用。
       * 此时，如果是下载浏览器无法解析的文件，例如.exe,.xlsx..那么浏览器会自动下载，但是如果使用浏览器可以解析的文件，比如.txt,.png,.pdf....浏览器就会采取预览模式
       * 所以，对于.txt,.png,.pdf等的预览功能我们就可以直接不设置download属性(前提是后端响应头的Content-Type: application/octet-stream，如果为application/pdf浏览器则会判断文件为 pdf ，自动执行预览的策略)
       */
      el.setAttribute('download', 'Lodop6.226_Clodop6.569.zip')
      el.href = `${location.origin}/download/Lodop6.226_Clodop6.569.zip`
      document.body.appendChild(el)
      el.click();
      document.body.removeChild(el);
    },
    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);
    },
    // 根据宽度计算设置显示栏数
    setVisibleNumber() {
      const width = document.body.getBoundingClientRect().width / 3;
      this.visibleNumber = parseInt(width / 85);
    },
    // 默认激活的路由
    defaultRouter() {
      let router;
      Object.keys(this.routers).some((key) => {
        if (!this.routers[key].hidden) {
          router = this.routers[key].path;
          return true;
        }
      });
      return router;
    },
    // 菜单选择事件
    handleSelect(key, keyPath) {
      // this.currentIndex = key;
      // if (this.ishttp(key)) {
      //   // http(s):// 路径新窗口打开
      //   window.open(key, "_blank");
      // } else if (key.indexOf("/redirect") !== -1) {
      //   // /redirect 路径内部打开
      //   this.$router.push({path: key.replace("/redirect", "")});
      // } else {
      //   // 显示左侧联动菜单
      //   this.activeRoutes(key);
      // }
      if (key === "/DataMonitor") {
        window.open("/singleMonitor", "_blank");
      } else {
        this.$router.push({ path: key });
      }
    },
    // 当前激活的路由
    activeRoutes(key) {
      var routes = [];
      if (this.childrenMenus && this.childrenMenus.length > 0) {
        this.childrenMenus.map((item) => {
          if (key == item.parentPath || (key == "index" && "" == item.path)) {
            routes.push(item);
          }
        });
      }
      if (routes.length > 0) {
        this.$store.commit("SET_SIDEBAR_ROUTERS", routes);
      }
      return routes;
    },
    ishttp(url) {
      return url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.top-menu {
  ::v-deep {
    .el-submenu__title i {
      color: #FFFFFF;
    }

    .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
      background-color: #0d84ff !important;
    }
  }

  ::v-deep {
    .el-menu {
      height: 60px;
      overflow-x: hidden; //x轴出现滚动条
      overflow-y: hidden; //y轴进行隐藏
      white-space: nowrap;
      display: flex;
    }

    &::-webkit-scrollbar-track-piece {
      background: rgb(48, 65, 86);
    }

    &::-webkit-scrollbar {
      height: 0;
    }

    &::-webkit-scrollbar-thumb {
      background: rgb(48, 65, 86);
      border-radius: 0;
    }
  }
}

.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}

.topmenu-container.el-menu--horizontal > .el-menu-item.is-active,
.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid #{"var(--theme)"} !important;
  color: #303133;
}

/* submenu item */
.topmenu-container.el-menu--horizontal > .el-submenu .el-submenu__title {
  float: left;
  height: 50px !important;
  line-height: 50px !important;
  color: #999093 !important;
  padding: 0 5px !important;
  margin: 0 10px !important;
}
</style>
