// 管理后台通用头部导航

<template>
  <div class="layout-header">
    <div class="layout-menu-wrapper flex">
      <div class="layout-menu flex flex-1">
        <!-- logo -->
        <div class="layout-logo flex">
          <i class="el-icon-menu" @click="showMobileMenu = !showMobileMenu">
          </i>
          <router-link to="/">
            <img
              src="../assets/images/logo2.png"
              style="margin-bottom: 5px"
              height="27"
              width="27"
            />
            <b style="color: white; font-size: 18px; margin-right: 42px">
              AIOT智慧边缘物联网系统</b
            >
          </router-link>
        </div>
        <!-- 站点选择 -->
        <div>
          <HeaderSite></HeaderSite>
        </div>
        <!-- 一级菜单 -->
        <ul class="menu-list flex">
          <li v-for="item in menu" :key="item.id">
            <router-link
              :to="item.path"
              :active="submenu.path === item.path"
              :title="item.name"
            >
              <i :class="`iconfont ${item.icon}`"></i>
              <span>
                {{ item.name }}
              </span>
            </router-link>
          </li>
        </ul>
      </div>
      <div class="layout-profile">
        <!-- <span class="el-dropdown-link">
             {{userData.currUserName}}
             <i class="el-icon-arrow-down el-icon--right"></i>
          </span> -->

        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" style="color: white">
            {{ userData.currUserName }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="update">修改密码</el-dropdown-item>
            <el-dropdown-item command="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>

    <!-- 一级菜单 -->
    <ul class="mobile-menu-list flex flex-pack-justify" v-if="showMobileMenu">
      <li v-for="item in menu" :key="item.id">
        <router-link
          :to="item.path"
          :active="submenu.path === item.path"
          :title="item.name"
        >
          <i :class="'el-icon-' + item.icon"></i>
          {{ item.name }}
        </router-link>
      </li>
    </ul>

    <!-- 二级菜单 -->
    <div
      class="layout-submenu-wrapper flex"
      v-if="submenu.children && submenu.children.length"
    >
      <div class="layout-submenu">
        <ul class="submenu-list flex">
          <li v-for="item in submenu.children" :key="item.id">
            <a :href="item.path" target="blank" v-if="item.isOut">{{
              item.name
            }}</a>
            <router-link :to="item.path" :active="group === item.path" v-else>{{
              item.name
            }}</router-link>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderSite from "./HeaderSite.vue";
export default {
  name: "Header",
  components: {
    HeaderSite,
  },
  methods: {
    handleCommand(key) {
      if (key === "update") {
        this.$router.push("/login/updatePwd");
      }
      if (key === "logout") {
        this.logout();
      }
    },
    // 退出登录
    logout() {
      this.$post("/login/logout")
        .then((data) => {})
        .catch((error) => {})
        .then(() => {
          this.$message.success("已退出登录");
          this.$store.commit("logout");
          this.$router.replace("/login");
        });
    },
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    //window.removeEventListener("message", this.getsocketData, false);
  },
  mounted() {
    // console.log("mounted");
    // this.$nextTick(function () {
    //   console.log("login websocket:"+"ws://"+process.env.VUE_APP_WEBSOCKET_API +"/ws?accessToken="+ this.$store.state.userData.id)
    //   createSocket(
    //     "ws://" +
    //       process.env.VUE_APP_WEBSOCKET_API +
    //       "/ws?accessToken=" +
    //       this.$store.state.userData.id
    //   );
    // });
    //    let _this = this;
    // const getsocketData = (e) => {i
    //   // 创建接收消息函数
    //   const data = e && e.detail.data;
    //   let obj = JSON.parse(data);
    //   if (obj.type == "SEND_TO_ALL_REQUEST") {
    //     vm.refreshData();
    //     let content = JSON.parse(obj.body.content);
    //     _this.$notify({
    //       title: "警告",
    //       message: content,
    //       type: "warning",
    //       duration: 8000,
    //     });
    //   }
    // };
    // this.getsocketData = getsocketData;
    // // 注册监听事件
    // window.addEventListener("onmessageWS", getsocketData,false);
  },
  computed: {
    activeMenu() {
      return this.$route.path;
    },
    group() {
      const relativeGroup = this.$store.state.group;
      if (relativeGroup) {
        return relativeGroup;
      }
      let groupArray = this.$route.path.split("/");
      let group = this.$route.path;
      let type = groupArray.pop();
      if (
        ["add", "edit", "view", "new", "importView", "resetPwdView"].indexOf(
          type
        ) > -1
      ) {
        groupArray.push("list");
        group = groupArray.join("/");
      }
      return group;
    },
    relativeGroup() {
      return this.$store.state.group;
    },
    flat() {
      return this.userData.flat;
    },
    menu() {
      if (!this.userData.barList) return [];
      return this.userData.barList.map((item) => {
        const url = item.url
          ? item.url
          : item.childList[0]
          ? item.childList[0].url || ""
          : "";
        return {
          name: item.name,
          path: url,
          id: item.id,
          icon: item.imgPath,
          children: item.childList.map((sub) => {
            return {
              name: sub.name,
              path: sub.url
                ? sub.url
                : sub.childList[0]
                ? sub.childList[0].url || 0
                : "",
              id: sub.id,
              parentId: sub.parentId,
              icon: sub.imgPath,
              isOut: /^https?\:\/\//.test(sub.url),
            };
          }),
        };
      });
    },
    submenu() {
      if (!this.menu.length) return {};
      let matchMenu = {};
      this.menu.forEach((item) => {
        const menu = item;
        item.children.forEach((item) => {
          if (item.path === this.group) {
            matchMenu = menu;
            return;
          }
        });
      });
      return matchMenu;
    },
    userData() {
      return this.$store.state.userData;
    },
  },
  data() {
    return {
      showMobileMenu: false,
    };
  },
};
</script>

<style lang="less">
.layout-header {
  .mobile-menu-list {
    display: none;
  }
  .layout-menu-wrapper {
    height: 66px;
    line-height: 66px;
    font-size: 14px;
    color: #eee;
    background: #2681e8;
    .layout-logo {
      height: 50px;
      .el-icon-menu {
        display: none;
      }
      a {
        margin: auto;
      }
      img {
        vertical-align: middle;
      }
    }

    .menu-list {
      li {
        a {
          display: block;
          padding: 0 12px;
          height: 100%;
          color: #c7e1ff;
          &.router-link-active,
          &[active] {
            //background: #1890ff;
            color: #fff;
            list-style-type: none;
            border-bottom: 3px solid #fff;
            padding-bottom: 2px;
          }
        }
      }
    }
    .layout-profile {
      padding-right: 30px;
    }
  }

  .layout-submenu-wrapper {
    padding-left: 20px;
    background: #fff;
    height: 42px;
    border-bottom: 1px solid #ededed;
    .layout-title {
      font-size: 18px;
      height: 40px;
      line-height: 40px;
      color: #333;
    }
    .layout-submenu {
      margin-left: 15px;
      white-space: nowrap;
      overflow: auto;
      li {
        a {
          display: block;
          padding: 0 10px;
          height: 40px;
          line-height: 40px;
          font-size: 14px;
          color: #666;
          &.router-link-active,
          &[active] {
            color: #1890ff;
            border-bottom: 2px solid #1890ff;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 800px) {
  .layout-header {
    .mobile-menu-list {
      display: flex;
      background: #222333;
      padding: 0 10px;
      li {
        padding: 8px 5px;
        a {
          width: 1em;
          display: block;
          color: #eee;
          font-size: 14px;
          word-break: break-all;
          &.router-link-active,
          &[active] {
            color: #1890ff;
          }
        }
      }
    }
    .layout-submenu-wrapper {
      padding-left: 0;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .layout-menu-wrapper {
      width: 100%;
      .layout-logo {
        width: 40px;
        .el-icon-menu {
          margin: auto;
          display: inline-block;
        }
        a {
          display: none;
        }
      }
      .menu-list {
        display: none;
      }
      li {
        width: 100%;
      }
    }
  }
}
</style>