<template>
  <div class="view-header">
    <div class="head-logo">
      <slot name="logo">
        <h1>美术阅卷管理端</h1>
      </slot>
    </div>
    <div class="head-user">
      <span class="user-name"
        ><Icon type="md-person" size="16" /> {{ username }}</span
      >
      <span class="user-name" @click="toResetPwd" v-if="showResetPwd"
        >修改密码</span
      >
      <span class="user-logout" title="退出登录" @click="logout">
        <Icon type="md-power" size="20" />
      </span>
    </div>
    <div class="head-info">
      <slot name="info"></slot>
    </div>

    <reset-pwd ref="ResetPwd"></reset-pwd>
  </div>
</template>

<script>
import ResetPwd from "../modules/login/ResetPwd";
import { logout } from "@/api";

export default {
  name: "view-header",
  components: { ResetPwd },
  props: {
    showResetPwd: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      username: this.$ls.get("user", { name: "" }).name
    };
  },
  methods: {
    toResetPwd() {
      this.$refs.ResetPwd.open();
    },
    async logout() {
      await logout();
      this.$ls.clear();
      this.$router.push({ name: "Login" });
    }
  }
};
</script>
