<template>
  <div class="bp-management-navigator">
    <!-- 左部logo 标题 -->
    <div class="logo">
      <img src="./img/title.png" />
      <!-- <span>{{ title }}</span> -->
    </div>
    <!-- 中部 -->
    <div class="menu">
      <!-- <div class="stms-framework-head-menu"  >
        <div class="menu-item" v-for="item in appList" :key="item.id" >
          <a @click="linkTo(item)" @dblclick="dblclickLinkTo(item)" aria-current="page" class="router-link-exact-active">
            <img :src="item.image" class="navIcon">
            <span>{{item.name}}</span>
          </a>
        </div>
      </div> -->
      <el-menu
        :default-active="pathActive"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#0c2c53"
        text-color="#e1e1e4"
        active-text-color="#fff"
        @select="handleSelect"
      >
        <template v-for="item in appList">
          <el-menu-item
            :class="[{ demo11: true }]"
            v-if="item.children.length == 0"
            :index="item.url"
            :key="item.id"
          >
            <!-- <img :src="item.image" class="navIcon" /> -->
            <span>{{ item.name }}</span>
          </el-menu-item>
          <el-submenu v-else :index="item.url" :key="item.id">
            <template slot="title">
              <!-- <img :src="item.image" class="navIcon" /> -->
              <span>{{ item.name }}</span>
            </template>
            <template v-for="w in item.children">
              <el-menu-item :index="w.url" :key="w.id">
                <!-- <img :src="w.image" class="navIcon" /> -->
                <span>{{ w.name }}</span>
              </el-menu-item>
              <!-- <el-submenu v-else :index="w" :key="w.id">
                <template slot="title">
                  <img :src="w.image" class="navIcon">
                  <span>{{w.name}}</span>
                </template>
                <el-menu-item v-for="i in w.children" :index="i" :key="i.id">
                  <img :src="i.image" class="navIcon">
                  <span>{{i.name}}</span>
                </el-menu-item>
              </el-submenu> -->
            </template>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <!-- 弹窗按钮 -->
    <!-- <el-button
      class="switch el-button--text el-button--small"
      @click="portalSwitchOpen"
      type="primary"
      icon="el-icon-menu"
    ></el-button> -->
    <!-- 头部退出登录操作 -->
    <div class="loginBox">
      <div class="tool">
        <div class="off" @click="logout">
          <span class="fa fa-power-off"></span>
          <span>退出</span>
        </div>
        <span id="username">
          <marquee direction="left" class="marquee" scrollamount="4"
            >欢迎登录，{{ userInfo.username }}</marquee
          >
        </span>
      </div>
    </div>
    <!-- 门户选择框弹框 -->
    <portalSelect ref="portalSelect" @messageType="messageType" />
    <!-- 服务器异常提示弹框 -->
    <div class="message active" v-if="show">× 服务器异常，请稍后重试</div>
  </div>
</template>

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

import portalSelect from "@/components/portalSelect";

let timer = null;

export default {
  name: "stms-navigator",
  components: {
    portalSelect,
  },
  props: {
    title: {
      type: String,
      required: false,
      default: "",
    },
  },
  data() {
    return {
      show: false,
      userInfo: {
        username: "",
      },
      appList: [],
    };
  },
  computed: {
    pathActive() {
      return this.$store.state.menudata.pathActive || "/servicePortal";
    },
  },
  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();
  },
  methods: {
    back() {
      window.location.href = "/#/navigation";
    },
    async login() {
      try {
        const response = await AuthDao.autoLogin();
        const { content, status } = response.data;
        if (status === "success") {
          this.userInfo = content;
          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();
      }
    },
    messageType(state) {
      this.show = state;
    },
    portalSwitchOpen() {
      let pathActive = "/servicePortal";
      let pathdata = this.acquirePathData(this.appList, pathActive);
      this.$router.push(
        { path: pathActive, query: {} },
        (success) => {
          this.$store.commit("setPathData", pathdata);
          this.$store.commit("setPathActive", pathActive);
        },
        (error) => {
          this.$store.commit("setPathData", pathdata);
          this.$store.commit("setPathActive", pathActive);
        }
      );
    },
    async queryApp() {
      const resp = await AuthDao.queryMenu({
        params: {
          parentId: "0",
          isRecursion: true,
        },
      });
      try {
        const {
          data: { status, content, message },
        } = resp;
        if (status === "success") {
          // console.log(content)
          //过滤指挥调度和移动中台俩菜单，不显示
          let appList = content.filter((item) => {
            return item.url !== "/dispatch" && item.url !== "/mobile";
          });
          let parentApp = [];
          appList.forEach((item) => {
            if (item.parentId == "0") {
              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.portalSwitchOpen();
        }
      } 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 lang='less' scoped>
.bp-management-navigator{
background-color: #09112b;
}
.el-menu{
  li{
    background-color: transparent !important;
    ::v-deep .el-submenu__title{
      background-color: transparent !important;
    }
  }
}
.el-menu-item{
  font-size: 20px;
}

</style>
<style  lang="less">
.marquee{
  width: 150px
}
@import "./index.less";
body{
  min-width: auto;
}
.stms-framework-head-menu .menu-item a{text-decoration:none;}
.bp-management-navigator{
  .switch{
    margin: 0;
    padding: 19px;
    position: relative;
    // z-index: 99;
    // background: #268aed;
  }
  .loginBox{
    .tool{
      // background: #268aed;
    }
  }
  .el-menu{
    font-size: 20px;
    font-weight: 700;
    height: 100%;
    color:white;
    background-color: transparent !important;
  }
  .el-menu.el-menu--horizontal{
    border-bottom: none;
    display: flex;
  }
  .el-menu--horizontal>.el-menu-item{
    height: 100%;
    line-height: 70px;
  }
  .el-menu--horizontal>.el-submenu .el-submenu__title{
    height: 100%;
    line-height: 70px;
    // border-bottom:none;
  }
  .el-menu--horizontal>.el-menu-item.is-active{
    // border-bottom:none;
    background-color: #0c3058;
  }
  .el-submenu__title i{
    color:#e1e1e4;
  }
  
} 
.navIcon{
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 18px;
}
// .el-submenu__title i{
//   color:#e1e1e4;
// }
</style>
