<template>
  <div class="header">
    <div class="header_left">
      <img src="../static/login/logo-tylgd.png" alt="" />
      <span>专利成果转化智能推荐系统</span>
    </div>
    <div class="header_right">
      <!-- <img src="" alt=""> -->
      <span class="portrait"></span>
      <a-popover>
        <template #content>
          <div
            class="portrait_btn"
            @mouseenter="hover($event, '1')"
            @mouseleave="leave($event)"
          >
            <span v-if="hover_num == 1" @click="toset" style="cursor: pointer">
              <img src="@/static/common/icon-yhsz-hover.png" alt="" />&nbsp;
              <span style="color: #3e7bfa">用户设置</span>
            </span>
            <span v-else>
              <img src="@/static/common/icon-yhsz.png" alt="" />&nbsp;
              <span>用户设置</span>
            </span>
          </div>
          <br />
          <div
            class="portrait_btn"
            @mouseenter="hover($event, '2')"
            @mouseleave="leave($event)"
          >
            <span v-if="hover_num == 2" @click="exit" style="cursor: pointer">
              <img src="@/static/common/icon-tcdl-hover.png" alt="" />&nbsp;
              <span style="color: #3e7bfa">退出登录</span>
            </span>
            <span v-else>
              <img src="@/static/common/icon-tcdl.png" alt="" />&nbsp;
              <span>退出登录</span>
            </span>
          </div>
        </template>
        <span class="tel">{{ username }}</span>
      </a-popover>
    </div>
  </div>
</template>
<script>
export default {
  name: "HeaderCon",
  props: {
    username: {
      type: String,
    },
  },
  data() {
    return {
      hover_num: 0,
    };
  },
  methods: {
    hover(e, num) {
      // console.log(num)
      this.hover_num = num;
    },
    leave() {
      this.hover_num = 0;
    },
    toset() {
      let routeUrl = this.$router.resolve({
        path: "/usersetting",
      });
      window.open(routeUrl.href, "_blank");
    },
    exit() {
      
      this.$router.push({
        path: "/login",
      });
      localStorage.removeItem('login_name');
      localStorage.removeItem('password')
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  height: 65px;
  background-color: #fff;
  box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between;
  .header_left {
    padding: 10px 29px;
    span {
      color: #002d70;
      font-family: "jiangcheng";
      padding: 0 15px;
    }
  }
  .header_right {
    padding: 0 50px 30px;
    // display: inline-block;
    line-height: 60px;
    .portrait {
      display: inline-block;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      background-color: pink;

      .portrait_btn {
        cursor: pointer !important;
        .active {
          color: #3e7bfa !important;
        }
      }
    }
    .portrait_set > .ant-popover-inner-content {
      cursor: pointer;
    }

    .tel {
      padding: 0 15px;
      color: #86909c;
      font-family: "Microsoft YaHei-Bold";
      line-height: 60px;
      display: inline-block;
      vertical-align: text-bottom;
    }
  }
}
</style>
