<template>
  <div :class="classes">
    <div class="head-main">
      <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="logout icon" size="20" />
        </span>
      </div>
      <div class="head-nav">
        <slot name="navTop"></slot>
      </div>
    </div>
    <div class="head-sub head-nav-sub" v-if="$slots.navSub">
      <slot name="navSub"></slot>
    </div>

    <reset-pwd ref="ResetPwd" v-if="showResetPwd"></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
    }
  },
  computed: {
    classes() {
      return ["view-header", { "view-header-sub": this.$slots.navSub }];
    }
  },
  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>
