<template>
  <header class="header">
    <h1 class="name">智管青山湖驾驶舱</h1>
    <!-- <div @click="open" class="target"><img src="@/assets/logo.png" style="margin-right: 10px;" alt="" />数智治理引擎平台</div> -->
    <el-dropdown trigger="click" class="dropdown" @command="handleCommand">
        <span class="el-dropdown-link">
          {{ userInfo.username ? userInfo.username : "admin" }}
          <i class="el-icon-caret-bottom el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item icon="el-icon-switch-button" command="logout"
            >退出登录</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
  </header>
</template>

<script>
export default {
  name: "Header",
  data() {
    return {
      userInfo: "",
    };
  },
  created() {
    this.userInfo = JSON.parse(localStorage.getItem("accountInfo"));
  },
  methods: {
    handleCommand(command) {
      if (command === "logout") {
        this.logout();
      }
    },
    logout() {
      localStorage.clear();
      this.$router.push("/");
    },
    open() {
      console.log(this.userInfo.id);
      let userId = this.userInfo.id ? this.userInfo.id : '';
      // var url = "http://81.69.231.72:8015/#/?userId=" + userId
      // var url = "http://1.15.3.38:8015/#/?userId=" + userId
      var url = "http://218.108.67.198:9020/#/?userId=" + userId
      window.open(url)
    }
  },
};
</script>

<style lang="stylus" scoped>
.header {
  position: relative;
  height: 92px;
  display: flex;
  justify-content: center;
  border-radius: 4px;
  background: url('~@/assets/index/header_bg.png') no-repeat;
  z-index: 9;

  .name {
    margin-top 16px
    text-align: center;
    font-size: 46px;
    font-family: YouSheBiaoTiHei;
    color: #FFFFFF;
    letter-spacing: 4px;
  }
}
  .target{
    position: absolute;
    left: 30px;
    top: 26px;
    color: #fff !important;
    font-size: 16px;
    margin-right: 20px; 
    color: blue;
    cursor: pointer;
  }

.dropdown {
  position: absolute;
  display: flex;
  align-items: center;
  right: 30px;
  top: 26px;
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
}
</style>
<style>
  .dropdown .el-dropdown{
    color: #fff;
  }
</style>
