<template>
  <div class="bp-management-navigator">
    <div class="top-back" id="holo_main_header_title">
      <img  alt="" src="../../assets/images/holo/logo.svg"/>
      {{ title }}
    </div>
    <div class="move-light"></div>
    <!--    <div class="user">-->
    <!--      <div class="user-icon"></div>-->
    <!--      <div class="user-text">{{ userInfo.name }}</div>-->
    <!--    </div>-->

    <el-dropdown @command="handleCommand" class="user">
      <div class="el-dropdown-link">
        <div class="user-icon"></div>
        <div class="user-text">{{ userInfo.name }}</div>
      </div>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="changePwd">修改密码</el-dropdown-item>
        <el-dropdown-item command="logout">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-menu
      :default-active="pathActive"
      class="el-menu-demo"
      mode="horizontal"
      background-color="transparent"
      text-color="white"
      active-text-color="#fff"
      @select="handleSelect"
    >
      <template v-for="(item, index) in appList">
        <!-- <el-menu-item :class="`demo${index}`" :index="item.url" :key="item.id"> -->
        <el-menu-item
          :class="[index > 3 ? 'fz' : 'norm', `demo${index}`]"
          :index="item.url"
          :key="item.id"
        >
          <span>{{ item.name }}</span>
        </el-menu-item>
      </template>
    </el-menu>
    <!-- 新建页面 -->
    <!-- 门户选择框弹框 
        <portalSelect ref="portalSelect" @messageType="messageType"/>-->
    <!-- 服务器异常提示弹框 -->
    <div class="message active" v-if="show">× 服务器异常，请稍后重试</div>
    <editpwd ref="editpwd_Form"></editpwd>
  </div>
</template>

<script>
import AuthDao from "@/dao/auth";

import portalSelect from "@/components/portalSelect";
import editpwd from "./editpwd";

let timer = null;

export default {
  name: "stms-navigator",
  components: {
    portalSelect,
    editpwd,
  },
  props: {
  },
  data() {
    return {
      show: false,
      userInfo: {
        username: "",
      },
      appList: [],
    };
  },
  computed: {
    title() {
      return map_config.SYS_TITLE;
    },
    pathActive() {
      return this.$store.state.menudata.pathActive
    },
  },
  mounted() {
    localStorage.removeItem("pathdata");
    localStorage.removeItem("pathActive");
    localStorage.removeItem("pathList");
    this.$store.state.menudata.pathdata = {};
    this.$store.state.menudata.pathActive = "";
    this.$store.state.menudata.pathList = [];
    this.login();
    this.queryApp();
    this.$nextTick(() => {
      document.getElementById(
        "holo_main_header_title"
      ).style.fontSize = `${map_config.titleFontSize}`;
    });
  },
  methods: {
    handleCommand(e) {
      if (e === "logout") {
        this.logout();
      } else {
        this.changePwd();
      }
    },
    back() {
      window.location.href = "/#/navigation";
    },
    async login() {
      try {
        const response = await AuthDao.autoLogin();
        const { content, status } = response.data;
        if (status === "success") {
          this.userInfo = content;
          // console.log(this.userInfo);
          localStorage.setItem("userId", content.id);
          localStorage.setItem("username", content.username);
          localStorage.setItem("role", content.role);
          localStorage.setItem("adCode", content.adCode);
          this.$emit("init");
        } else {
          __.url.redirectToLogin();
        }
      } catch {
        __.url.redirectToLogin();
      }
    },
    async logout() {
      try {
        const response = await AuthDao.logout();
        const { content, status } = response.data;
        if (status === "success") {
          localStorage.removeItem("role");
          localStorage.removeItem("adCode");
          localStorage.removeItem("pathdata");
          localStorage.removeItem("pathActive");
          localStorage.removeItem("pathList");
          __.url.redirectToLogin();
        }
      } catch {
        __.url.redirectToLogin();
      }
    },
    async changePwd() {
      this.$refs.editpwd_Form.getPage("");
    },
    messageType(state) {
      this.show = state;
    },
    async queryApp() {
      const resp = await AuthDao.queryMenu({
        params: {
          parentId: "0",
          isRecursion: true,
        },
      });
      try {
        const {
          data: { status, content, message },
        } = resp;
        if (status === "success") {
          //过滤指挥调度和移动中台俩菜单，不显示
          let appList = content.filter((item) => {
            return item.url !== "/dispatch" && item.url !== "/mobile";
          });
          let parentApp = [];
          appList.forEach((item) => {
            if (item.parentId == map_config.SYS_ID) {
              item.hierarchy = 1;
              item.children = [];
              parentApp.push(item);
            }
          });
          parentApp.forEach((i) => {
            appList.forEach((item) => {
              if (i.id == item.parentId) {
                item.hierarchy = 2;
                item.children = [];
                i.children.push(item);
              }
            });
          });
          parentApp.forEach((i) => {
            i.children.forEach((w) => {
              appList.forEach((item) => {
                if (w.id == item.parentId) {
                  item.hierarchy = 3;
                  item.children = [];
                  w.children.push(item);
                }
              });
            });
          });
          parentApp.forEach((i) => {
            i.children.forEach((w) => {
              w.children.forEach((q) => {
                appList.forEach((item) => {
                  if (q.id == item.parentId) {
                    item.hierarchy = 4;
                    item.children = [];
                    q.children.push(item);
                  }
                });
              });
            });
          });
          this.appList = parentApp;
          this.$store.commit("setPathList", this.appList);
          this.$store.commit("setPathActive", location.href.replace(location.origin,'').replace(location.pathname+'#',''));
          console.log(this.$store)
        }
      } catch (err) {
        if (err) {
          setTimeout(() => {
            this.messageType(true);
          }, 1000);
        }
        setTimeout(() => {
          this.messageType(false);
        }, 4000);
      }
    },
    // 单击点击跳转路由
    linkTo(item) {
      // console.log(item);
      clearTimeout(timer);
      timer = setTimeout(() => {
        const { url } = item;
        window.location.href = url;
      }, 300);
    },
    // 双击打开新窗口
    dblclickLinkTo(item) {
      clearTimeout(timer);
      const { url } = item;
      window.open(url);
    },
    handleSelect(url, keyPath) {
      if (this.$route.path != url) {
        let pathdata = this.acquirePathData(this.appList, url);
        //这里反显左侧列表得高亮
        let pathActive = pathdata.url;
        //这里判断当前路由是否被重定向
        this.$router.options.routes.forEach((item) => {
          if (item.path == url) {
            if (item.redirect) {
              pathActive = item.redirect;
            }
          }
        });
        this.$router.push(
          { path: url, query: {} },
          (success) => {
            this.$store.commit("setPathData", pathdata);
            this.$store.commit("setPathActive", pathActive);
          },
          (error) => {
            this.$store.commit("setPathData", pathdata);
            this.$store.commit("setPathActive", pathActive);
          }
        );
      }
    },
    acquirePathData(datas, url) {
      for (var i = 0; i < datas.length; i++) {
        let item = datas[i];
        if (item.url == url) {
          return item;
        }
        if (item.children && item.children.length > 0) {
          let res = this.acquirePathData(item.children, url);
          if (res) return res;
        }
      }
    },
  },
};
</script>
<style>
/*.el-popper[x-placement^=bottom] .popper__arrow::after{*/
/*    border-bottom-color: #031e2a;*/
/*}*/
/*.el-popper[x-placement^=bottom] .popper__arrow{*/
/*    border-bottom-color: rgba(46, 131, 215,0.5);*/
/*}*/
/*.el-dropdown-menu{*/
/*    background-color: #031e2a !important;*/
/*    border: 1px solid rgba(46, 131, 215,0.5) !important;*/
/*    margin: 0 0 !important;*/
/*}*/
/*.el-dropdown-menu__item{*/
/*    color: #f5f5f5;*/
/*}*/
/*.el-dropdown-menu__item:hover{*/
/*    background-color: rgba(3, 25, 35,0.7) !important;*/
/*}*/
/*.el-popper[x-placement^=bottom]{*/
/*    margin: 0 !important;*/
/*}*/
</style>
<style lang="less" scoped>
.el-menu-demo {
  pointer-events: auto;
  height: 31px;
  //margin-top: 22px;
  //margin-left: 190px;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

.bp-management-navigator {
  pointer-events: none;
  //box-shadow: 0px 0px 22px 20px #030916;
  z-index: 13;

  .el-dropdown-link {
    display: flex;
    color: white;
    align-items: center;
  }

  .user {
    position: absolute;
    pointer-events: auto;
    right: 50px;
    top: 12px;
    display: flex;
    cursor: pointer;
    align-items: center;

    .user-icon {
      width: 47px;
      height: 47px;
      background: url("../../assets/images/holo/user-icon.svg");
      background-size: 100% 100%;
    }

    .user-text {
      padding-top: 2px;
    }
  }

  height: 82px;
  display: unset;
  background:transparent;
  background-image: url("../../assets/images/holo/topIndex2.png");
  background-size: 100% auto;
  background-clip: border-box;
  position: relative;
  background-repeat: no-repeat;

  .top-back {
    letter-spacing: 2px;
    padding-left: 22px;
    position: absolute;
    width: 100%;
    font-size: 32px;
    //text-align: center;
    line-height: 60px;
    img{
      width: 48px;
      height: 47px;
    }
  }
  .move-light{
    position: absolute;
    top: 61px;
    height: 7px;
    width: 120px;
    background: radial-gradient(rgb(192, 238, 249), rgba(77, 217, 248, 0.5), rgba(19, 159, 250,0.2), transparent);
    animation: moveToRight 15s linear infinite;

    @keyframes moveToRight {
      0%{
        left: -120px;
        opacity: 1;
      }
      75%{
        opacity: 1;
      }
      100%{
        left: 300px;
        opacity: 0;
      }
    }
  }
}

.el-menu.el-menu--horizontal {
  border-bottom: none;
}

.el-menu--horizontal > .el-menu-item {
  line-height: 31px;
  height: 31px;
  border-bottom: none;
  // text-align: center;
}

.norm {
  background-image: url("../../assets/images/holo/menuUnSelect.png");
  background-size: 100% 100%;
}

.fz {
  background-image: url("../../assets/images/holo/menuUnSelectR.png");
  background-size: 100% 100%;
}

.el-menu--horizontal > .el-menu-item.is-active.norm {
  background-image: url("../../assets/images/holo/menuSelect.png");
  border-bottom: none;
}

.el-menu--horizontal > .el-menu-item.is-active.fz {
  background-image: url("../../assets/images/holo/menuSelectR.png");
  border-bottom: none;
}

.el-menu {
  //position: unset;

  li {
    background-color: transparent !important;

    ::v-deep .el-submenu__title {
      background-color: transparent !important;
    }
  }
}

.el-menu-item {
  font-size: 20px;
  position: absolute;
  width: 157px;
  height: 31px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
}

.demo0 {
  left: 35px + 500px;
}

.demo1 {
  left: 192px + 500px;
}

.demo2 {
  left: 349px + 500px;
}

.demo3 {
  left: 506px + 500px;
}

.demo4 {
  right: 506px + 500px;
}

.demo5 {
  right: 349px + 500px;
}

.demo6 {
  right: 192px + 500px;
}

.demo7 {
  right: 35 + 500pxpx;
}
</style>
