<template>
  <div class="top">
    <div class="title">
      <div class="logo">智能综合分析系统</div>
      <div class="title_y">
        <menuZj :menu="menu" :menuIndex="menuIndex"></menuZj>
        <span
          style="
            height: 40px;
            line-height: 40px;
            margin-top:9px;
            font-size: 20px;
            font-weight: bold;
            color:#fff;
          "
          >{{this.username == ""?this.name:this.username}}</span
        >
        <headPortrait style="margin: 8px"></headPortrait>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import menuData from "@jsonData/menu.json"; //动态导入
import menuZj from "@components/common/menu";
import headPortrait from "@views/headPortrait";
export default {
  data() {
    return {
      menuIndex: "1", // 菜单默认选中项
      menu: [], // 菜单数据
      name:localStorage.getItem('username'),
    };
  },
  created(){
  },
  components: {
    menuZj,
    headPortrait,
  },
  mounted() {
    window.onload=function() {
       this.name = localStorage.getItem('username');
    },
    this.getMenu();
  },
  computed: {
    // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters(["username"]),
  },
  methods: {
    ...mapMutations("user", ["SET_NAME"]),
    // 获取菜单
    getMenu() {
      //   this.API.requestData({
      //     subUrl: "admin/usermenu",
      //     success (res) {
      //       console.log("getMenu", res);
      //     }
      //   });
      //   return;
      this.menu = menuData.menu;
      this.API.get("/powercompare/windfarmAjax").then((res) => {
        console.log(res);
        if (res.code === 200) {
          this.eqType = this.BASE.cascaderBugRepair(res.data.result);
        }
      });
    },
  },
};
</script>

<style>
.top {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 60px;
  background-color: #545c64;
}
.logo {
  height: 40px;
  line-height: 40px;
  font-size: 35px;
  font-weight: bold;
  margin: 6px 0 0 8px;
  color: rgb(252, 249, 250);
}
.title {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.title_y {
  display: flex;
  flex-direction: row;
}
</style>
