<template>
  <div class="p-re">
    <div class="logo">
      <router-link to="/">
        <img :src="logoSrc" style="height:40px;" />
      </router-link>
    </div>
    <div class="nav-header" style="margin: 0 auto">
      <a-menu
        class="nav-bar"
        mode="horizontal"
        theme="light"
        :defaultSelectedKeys="active"
        v-model="active"
      >
        <template v-for="item in menuList">
          <a-menu-item :key="item.code" class="menu-shi-ti"
                       v-if="!item.children || item.children.length==0 ">
            <a v-if="item.link.indexOf('http')>-1" :href="item.link" target="_blank">
              <a-icon :type="item.icon" />
              <span class="menu-shi-zi">{{ item.name }}</span>
            </a>
            <router-link v-else :to="item.link ? item.link.replace('/#', '') : ''">
              <a-icon :type="item.icon" />
              <span class="menu-shi-zi">{{ item.name }}</span>
            </router-link>
          </a-menu-item>
          <a-sub-menu :key="item.code" v-if="!!item.children && item.children.length>0">
            <span slot="title" class="submenu-title-wrapper">
              <a-icon :type="item.icon" />{{ item.name }}</span>
            <a-menu-item :key="v.code" v-for="v in item.children">
              <a v-if="v.link.indexOf('http')>-1" :href="v.link" target="_blank">
                <span class="menu-shi-zi">{{ v.name }}</span>
              </a>
              <router-link v-else :to="v.link ? v.link.replace('/#', '') : ''">
                <span class="menu-shi-zi">{{ v.name }}</span>
              </router-link>
            </a-menu-item>
          </a-sub-menu>
        </template>
      </a-menu>
    </div>
    <a-dropdown class="logout">
      <a class="ant-dropdown-link" href="#">
        {{ username }}
        <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item>
          <a href="javascript:;" @click="logout">退出登录</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>

<script>
var logoSrc = "";
// var version = window.global.const.version;
var version = "base"
if (version === "base") {
  logoSrc = require("@/assets/knowledge/logo-base.svg");
} else if (version === "bf") {
  logoSrc = require("../../../../public/logo-bf.svg");
}
// const api = require('@/api/index')
export default {
  name: "Navibar",
  data() {
    return {
      logoSrc,
      active: [],
      menuList: this.menus,
      username: this.login_username,
      hideText: false
    };
  },
  watch: {
    "$route.path": function(newPath, oldPath) {
      if (this.$route.meta.code) {
        this.active = [this.$route.meta.code];
      }
    }
  },
  created() {
    // api.login.Mlogin().then(data => {
    //   if (data) {
    //     this.username = data.name || data.username
    //     Vue.prototype.login_username = this.username
    //     Vue.prototype.menus = data.menus
    //     this.menuList = data.menus
    //   } else {
    //     // 返回登录页
    //     window.location.href = 'http://10.10.12.85:2004/graph/#/mng/class'
    //   }
    // })
    this.$nextTick(() => {
      // ant-menu-vertical
      const width = document.getElementsByTagName("body")[0].offsetWidth;
      const userWidth = 85 + 20;
      const logoWidth = 215 + 20 + 20;
      const navWidth = document.getElementsByClassName("nav-header")[0];
      navWidth.style.width = width - userWidth - logoWidth + "px";
      window.onresize = function() {
        let resizeWidth = document.getElementsByTagName("body")[0].offsetWidth;
        navWidth.style.width = resizeWidth - userWidth - logoWidth + "px";
      };
    });
  },
  methods: {
    logout() {
      try {
        var elemIF = document.createElement("iframe");
        elemIF.src = window.global.logOutUrl();
        elemIF.style.display = "none";
        document.body.appendChild(elemIF);

      } catch (e) {
        alert(e);
      }
      window.location.href = window.global.logOutUrl();
      localStorage.removeItem("localDatat");
    }
  }
};
</script>

<style scoped>
.menu-shi-ti {
  min-height: 60px;
}

.ant-menu-horizontal {
  line-height: 60px;
}

.logo {
  width: 215px;
  padding: 10px;
  position: absolute;
  left: 20px;
}

.p-re {
  position: relative;
}

.logout {
  position: absolute;
  right: 20px;
  top: 18px;
}
</style>
