<template>
  <div class="idx-top">
    <div class="idx-top-wrap">
      <div class="idx-top-left">
        <img class="img-logo" src="../assets/images/logo.png" />
        <h2 @click="goIndex">数字政府综合应用</h2>
        <span class="idx-bj">|</span>
        <span class="idx-area">云和</span>
      </div>
      <div class="idx-top-right">
        <p>
          <i class="el-icon-user-solid"></i>
          <span class="username">{{ username }}</span>
          ，您好!
        </p>
        <div class="go-out" @click="goOut">退出登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
    };
  },
  methods: {
    goIndex() {
      if (this.$route.path !== "/index") {
        this.$router.push("/index");
      }
    },
    goOut() {
      sessionStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
  created() {
    this.username = JSON.parse(sessionStorage.token).nickNameCn;
  },
};
</script>

<style lang="scss" scoped>
.idx-top {
  height: 72px;
  line-height: 72px;
  background-color: #1492ff;
  color: #fff;
  position: relative;
  z-index: 999;
  white-space: nowrap;
  .idx-bj {
    margin: 0 10px;
  }
  .idx-area {
    margin-right: 30px;
  }
  .img-logo {
    width: 20px;
    height: 20px;
    margin-right: 10px;
  }
  > div {
    display: flex;
    justify-content: space-between;
  }
  .idx-top-left {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-left: 20px;
    h2 {
      font-weight: 600;
      cursor: pointer;
    }
    .el-input,
    .el-input--suffix {
      width: 350px;
      height: 72px;
    }
  }
  .idx-top-right {
    margin-right: 20px;
    position: relative;
    >p{
      display: flex;
      align-items: center;
    }
    .username {
      display: inline-block;
      max-width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-left: 10px;
    }
    .go-out {
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 40px;
      line-height: 40px;
      color: #333;
      background-color: #fff;
      text-align: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.4s;
      cursor: pointer;
      border-radius: 4px;
      &:hover {
        color: #1492ff;
      }
    }
    &:hover .go-out {
      opacity: 1;
      visibility: inherit;
    }
  }
}
</style>