<template>
  <div class="header card">
    <div class="header-title">
      <span>广东省博物馆</span>
    </div>
    <div class="header-user">
      <div class="avatars">
        <span>{{ userInfo.nickName }}</span>
        <ul>
          <li @click="handleAvatar">用户信息</li>
          <li @click="handlePassword">修改密码</li>
          <li @click="logoutcomfirm">退出登录</li>
        </ul>
      </div>
      <!-- <div class="logout"><img src="@/assets/img/logout.png" alt="">退出</div> -->
    </div>

    <usereditdialog
      @logout="logout(true)"
      :form="userInfo"
      :show="isShowEdit"
      @close="isShowEdit = false"
    />

    <passworddialog
      :key="ran"
      @logout="logout(true)"
      :form="userInfo"
      :show="isShowPassword"
      @close="isShowPassword = false"
    />
  </div>
</template>

<script>
import usereditdialog from "@/components/editcomponent/usereditdialog";
import passworddialog from "@/components/editcomponent/passworddialog";

import { getSysDetail } from "@/configue/api";

export default {
  components: { usereditdialog, passworddialog },
  data() {
    return {
      isShowEdit: false,
      isShowPassword: false,
      ran: 1,
      userId: "",
      userInfo: {},
    };
  },
  watch: {
    isShowEdit() {
      this.getDetail();
    },
  },
  methods: {
    handleAvatar() {
      this.isShowEdit = true;
      this.ran += 1;
    },

    handlePassword() {
      this.isShowPassword = true;
      this.ran += 1;
    },
    logoutcomfirm() {
      this.confirm("确定退出登录？", () => {
        this.logout();
      });
    },
    getDetail() {
      getSysDetail("user", { id: this.userId }, (res) => {
        this.userInfo = { ...res.data };
      });
    },
    logout(type = null) {
      this.$http({
        method: "get",
        url: "admin/logout",
      }).then((res) => {
        if (res.code === 0) {
          window.localStorage.setItem("token", "");
          window.localStorage.setItem("role", "");
          this.$alert(type ? "修改成功，请重新登录" : "退出成功", "提示", {
            confirmButtonText: "确定",
            callback: () => {
              window.localStorage.setItem("userInfo", "");
              this.$router.push("/login");
            },
          });
        }
      });
    },
  },
  created() {},
  mounted() {
    this.userId = window.localStorage.getItem("userId") || "";
    this.getDetail();
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 68px;
  padding: 0 30px;
  box-sizing: border-box;
  background-color: #B63C25 !important;
}

.header-title {
  color: #fff;
  font-size: 1.25rem;
  text-align: center;
  vertical-align: middle;
  img {
    vertical-align: middle;
    max-width: 106px;
    margin-right: 10px;
    width:60px;
  }
  span {
    vertical-align: middle;
    display: inline-block;
    font-size: 24px;
    letter-spacing: 2px;
    font-weight: bold;
  }
}

.header-user {
  display: flex;
  align-items: center;
  cursor: pointer;
  line-height: 100%;
  height: 100%;
  .avatars {
    min-width: 100px;
    cursor: pointer;
    color: #fff;
    position: relative;
    line-height: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    &:hover {
      > ul {
        display: block;
      }
    }
    > span {
      display: inline-block;
    }
    > ul {
      position: absolute;
      bottom: -110px;
      z-index: 9999;
      left: 50%;
      transform: translateX(-50%);
      width: 100%;
      text-align: center;
      background: #fff;
      color: #010101;
      border: 1px solid #010101;
      display: none;
      li {
        display: inline-block;
        height: 40px;
        width: 100%;
        line-height: 40px;
        &:hover {
          background: #f0f0f0;
        }
      }
    }
  }
}
</style>
