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

<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/logo.png"
              style="margin-bottom:5px;margin-left: 24px;"
              height="40"
              alt=""
            />
            <b style="color:white;font-size:20px;">
              &nbsp;&nbsp;&nbsp;智慧政务绩效管理系统
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </b>
          </router-link>
        </div>
        <!-- 一级菜单 -->
        <ul class="menu-list flex">
          <li v-for="item in menu" :key="item.id">
            <span
              @click="RouterTo(item.path)"
              :class="{ active: activePath === item.path }"
            >
              <i :class="'el-icon-' + item.icon"></i>
              {{ item.name }}
            </span>
          </li>
        </ul>
      </div>

      <!-- <div class="controllBar">
        <el-badge :value="12" class="item">
          <i class="el-icon-bell" style="font-size: 15px;margin-right: 10px">
            消息</i
          >
        </el-badge>
      </div> -->
      <div class="controllBar" @click="returnHome">
        <i class="el-icon-s-home" style="font-size: 15px;margin-right: 10px">
          首页</i
        >
      </div>

      <div class="layout-profile">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link" style="color:white">
            {{ userData.currUserName }}
            <i class="el-icon-arrow-down el-icon&#45;&#45;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" @click="RouterTo(item.path)">
        <span :class="{ active: activePath === item.path }">
          <i :class="'el-icon-' + item.icon"></i>
          {{ item.name }}
        </span>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Header",
  methods: {
    // 导航栏路由跳转
    RouterTo(path) {
      window.sessionStorage.CurrentSecondPath = path;
      this.$store.commit("setCurrentSecondPath", path);
      this.$store.commit("setThirdPath", path);
      this.$router.push({ path });
      let thirdArr = this.headBar.children.find((item) => item.path === path);
      let arr = [];
      if (thirdArr.children.length === 0) {
        arr.push({
          children: [],
          id: thirdArr.id,
          name: thirdArr.name,
          path: thirdArr.path,
        });
      } else {
        arr = thirdArr.children;
      }
      this.$store.commit("setCurrentThirdArr", arr);
      this.$emit("changePath", path); //触发点击事件
    },
    returnHome() {
      this.$router.replace({ path: "/" });
    },
    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");
  },
  mounted() {
    console.log(this.menu);
  },
  computed: {
    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.headBar.children) {
        return [];
      } else {
        return this.headBar.children;
      }
    },
    // 二级菜单数据
    headBar() {
      return this.$store.state.headBar;
    },
    userData() {
      return this.$store.state.userData;
    },
    // 二级路径
    activePath() {
      return this.$store.state.CurrentSecondPath;
    },
  },
  data() {
    return {
      showMobileMenu: false,
    };
  },
  created() {},
};
</script>

<style lang="less">
.layout-header {
  .mobile-menu-list {
    display: none;
  }
  .layout-menu-wrapper {
    height: 72px;
    line-height: 72px;
    font-size: 14px;
    color: #eee;
    background: linear-gradient(90deg, #1845c6, #2999ff) !important;
    .layout-logo {
      height: 50px;
      .el-icon-menu {
        display: none;
      }
      a {
        margin: auto;
      }
      img {
        vertical-align: middle;
      }
    }

    .menu-list {
      li {
        span {
          display: block;
          padding: 0 6px;
          height: 100%;
          color: #eee;
          cursor: pointer;
          margin-right: 10px;
        }
        .active {
          color: #fff;
          list-style-type: none;
          // border-bottom: 3px solid #fff;
          // padding-bottom: 2px;
          background-color: #1890ff;
        }
      }
    }
    .layout-profile {
      padding-right: 30px;
    }
  }
  .controllBar {
    background-color: rgba(170, 170, 170, 0.4);
    width: 120px;
    height: 44px;
    line-height: 44px;
    margin-top: 34px;
    transform: translateY(-50%);
    text-align: center;
    border-radius: 5px;
    margin-right: 15px;
    cursor: pointer;
  }
  .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: 10px;
      li {
        span {
          display: block;
          padding: 0 12px;
          height: 100%;
          color: #eee;
          cursor: pointer;
        }
        .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>
