<!--
 * @Author: haoqiuzhi
 * @Date: 2022-05-16 19:16:39
 * @LastEditors: haoqiuzhi
 * @LastEditTime: 2022-06-29 22:03:29
 * @Description:个人信息
-->
<template>
  <div class="userPersonalInfo" v-show="userVisible" @mouseleave="mouseleaveHandle()">
    <div class="name">{{ name.slice(-2) }}</div>
    <div class="name-all">{{ name }}</div>
    <div class="username">{{ telephoneNum }}</div>
    <div class="btn" @click="changePsw">
      <img class="icon" src="@/assets/icons/icon-key.svg" alt="" />
      更改密码
    </div>
    <div class="btn" @click="logout">
      <img class="icon" src="@/assets/icons/icon-close.svg" alt="" />
      安全退出
    </div>
  </div>
</template>

<script>
import axios from '@/apis/http'
import { mapState } from 'vuex'
export default {
  name: 'userDialog',
  props: {
    userVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    ...mapState('user', ['name', 'telephoneNum'])
  },
  methods: {
    mouseleaveHandle() {
      this.$emit('update:userVisible', false)
    },
    changePsw() {
      this.$router.push('/back-sys/change-psw')
    },
    // 退出登录
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('/auth/token/logout').then(() => {
          localStorage.clear() // 清除缓存
          sessionStorage.clear()
          location.href = '/' // 退出后到哪？
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.userPersonalInfo {
  position: absolute;
  right: 16px;
  top: 72px;
  width: 234px;
  height: 255px;
  // border: 1px solid #e02020;
  background-color: #fff;
  z-index: 10;
  box-sizing: border-box;
  box-shadow: 7px 12px 15px 1px rgba(0, 0, 0, 0.11999999731779099);
  border-radius: 8px 8px 8px 8px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  .name {
    width: 78px;
    height: 78px;
    margin: 15px 0 8px 0;
    font-size: 16px;
    background: url('@/assets/images/base/name-bg.svg');
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
  }
  .name-all {
    height: 20px;
    font-size: 20px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 20px;
    margin-bottom: 8px;
  }
  .username {
    height: 14px;
    font-size: 12px;
    font-weight: normal;
    color: #a7a7a7;
    line-height: 14px;
    margin-bottom: 20px;
  }
  .btn {
    width: 100%;
    height: 45px;
    border-top: 1px solid #f7f8fa;
    color: #333333;
    display: flex;
    align-items: center;
    cursor: pointer;
    .icon {
      width: 16px;
      margin: 0 12px 0 28px;
    }
  }
  .btn:hover {
    background: #fbe1e0;
  }
}
</style>
