<template>
  <header class="header">
    <div class="header-left">
      <em class="iconfont icon-jiance"></em>
      <span>iCubes</span>
    </div>
    <el-menu
      :default-active="activeIndex"
      mode="horizontal"
      background-color="transparent"
      text-color="#ffffff"
      active-text-color="#ffffff"
    >
      <template v-for="(menu, index) in menuList">
        <el-submenu
          v-if="menu.children && menu.children.length != 0"
          :index="index + ''"
          :key="index + ''"
        >
          <template slot="title">
            <em :class="menu.icon"></em>
            <span>{{ menu.label }}</span>
          </template>
          <el-menu-item
            v-for="childMenu of menu.children"
            :key="childMenu.path"
            :index="childMenu.path"
          >
            <template slot="title">
              <router-link :to="childMenu.path">
                {{ childMenu.label }}
              </router-link>
            </template>
          </el-menu-item>
        </el-submenu>
        <el-menu-item v-else :key="menu.path" :index="menu.path">
          <router-link :to="menu.path">
            <em :class="menu.icon"> </em>
            <span>{{ menu.label }}</span>
          </router-link>
        </el-menu-item>
      </template>
    </el-menu>
    <div class="header-right">
      <!-- <el-select
        :value="selectNamespace"
        style="width: 140px"
        size="small"
        placeholder="请选择空间"
        value-key="id"
        @change="setSelectNamespace"
      >
        <el-option
          v-for="item in namespaceList"
          :key="item.id"
          :label="item.name"
          :value="item"
        ></el-option>
      </el-select> -->
      <!-- <el-dropdown @command="handleCommand" trigger="hover">
        <span class="header-right-user">
          <em :class="userInfo.avatar"></em>
          {{ userInfo.displayName ? userInfo.displayName : userInfo.username }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item class="outlogin" command="outlogin">
            <strong>退出登录</strong>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
    </div>
  </header>
</template>

<script>
// import API from "@/axios/api";
import { menuList } from "@/assets/js/constants.js";
import { mapState, mapMutations } from "vuex";
// import Cookies from "js-cookie";
// import { getCookieDomain } from "@/util/util.js";

export default {
  name: "base-header",
  data() {
    return {
      activeIndex: "/",
      menuList
    };
  },
  computed: {
    ...mapState({
      namespaceList: state => state.commonStore.namespaceList,
      // selectNamespace: state => state.commonStore.selectNamespace,
      userInfo: state => state.commonStore.userInfo
    })
  },
  watch: {
    $route(to) {
      let paths = this.menuList.map(menu => {
        return menu.path;
      });
      if (paths.includes(to.path)) {
        this.activeIndex = to.path;
      }
    }
  },
  created() {
    this.activeIndex = this.$route.path;
    // this.getNameSpaceList().then(() => {
    //   this.initNamespace();
    // });
  },
  methods: {
    // ...mapActions(["getNameSpaceList"]),
    ...mapMutations(["setSelectNamespace"])

    // async handleCommand(op) {
    //   if (op === "outlogin") {
    //     let result = await API.outLogin();
    //     if (result.code === 0) {
    //       Cookies.remove("OO-access_token", {
    //         path: "/",
    //         domain: getCookieDomain()
    //       });
    //       Cookies.remove("OO-refresh_userInfo", {
    //         path: "/",
    //         domain: getCookieDomain()
    //       });
    //       location.replace(
    //         `${location.origin}/#/login/?r_url=${location.href}`
    //       );
    //     }
    //   }
    // }

    // // 初始化选中的空间
    // initNamespace() {
    //   if (0 === this.namespaceList.length) {
    //     this.setSelectNamespace({});
    //     return;
    //   }
    //   const index = this.namespaceList.findIndex(
    //     item => item.id === this.selectNamespace.id
    //   );
    //   if (-1 === index) {
    //     this.setSelectNamespace(this.namespaceList[0]);
    //   }
    // }
  }
};
</script>

<style lang="scss">
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: $header-height;
  color: #ffffff;
  padding-left: 48px;
  background-color: $header-bg-color;
  z-index: 99;
  padding: 0 16px;
  .header-left {
    display: flex;
    align-items: center;
    .icon-jiance {
      margin-right: 16px;
      font-size: 24px;
    }
    span {
      font-size: 18px;
    }
  }
  .el-menu.el-menu--horizontal {
    border-bottom: none;
    display: flex;
    align-items: center;
    .el-menu-item,
    .el-submenu {
      height: $header-height;
      line-height: $header-height;
      border-bottom: none;
      font-size: 16px;
      .menu-icon {
        width: 22px;
        height: 22px;
        margin-right: 12px;
      }
      a {
        display: block;
        height: $header-height;
        line-height: $header-height;
        text-decoration: none;
      }
      em {
        margin-right: 3px;
      }
      .el-submenu__title {
        height: $header-height;
        line-height: $header-height;
        font-size: 16px;
        border-bottom: none !important;
        i {
          color: #ffffff;
        }
      }
      &:hover {
        background-color: #004dc3 !important;
        .el-submenu__title {
          background-color: #004dc3 !important;
        }
      }
      &.is-active {
        border-bottom: none;
        background-color: #004dc3 !important;
        .el-submenu__title {
          border-bottom: none !important;
        }
      }
    }
  }

  .header-right {
    display: flex;
    justify-content: space-around;
    align-items: center;
    .header-right-user {
      display: flex;
      align-items: center;
      color: #ffffff;
      cursor: pointer;
      i {
        font-size: 18px;
        margin-right: 4px;
      }
    }
    .el-dropdown {
      margin-left: 16px;
    }
  }
}
.el-menu--horizontal {
  background-color: #004dc3;
  .el-menu-item {
    color: #ffffff;
    &:hover {
      background-color: $header-bg-color !important;
    }
    a {
      display: block;
      width: 100%;
      color: #ffffff;
      text-decoration: none;
    }
  }
}
</style>
