<template>
  <el-popover :width="260" trigger="click" :offset="24">
    <template #reference>

      <div style="white-space: nowrap;display: flex;justify-content: center;align-items: center">
        <div>
          <el-avatar :size="25" :src="userInfo.avatar" @error="errorHandler">
            <img :src="makeTextPortrait()"/>
          </el-avatar>
        </div>
        <div style="margin-left: 6px">
          {{ userInfo.name }}
        </div>
      </div>

    </template>

    <template #default>
      <div class="avatar_img">
        <div>
          <el-avatar :size="70" :src="userInfo.avatar" @error="errorHandler">
            <img :src="makeTextPortrait()"/>
          </el-avatar>
        </div>

        <div>
          <user-info-display/>
        </div>

      </div>

      <div class="button">
        <el-button type="primary" plain @click="emit('password')">修改密码</el-button>
        <el-button type="danger" plain @click="emit('loginOut')">退出登录</el-button>
      </div>
    </template>
  </el-popover>

</template>

<script setup name='UserInfo' lang="ts">
import {computed} from "vue";
import {useStore} from "vuex";
import {genTextPortrait} from '@/utils/portrait'
import UserInfoDisplay from "@/layout/HeaderV2/function-list/user-info/UserInfoDisplay.vue";

const store = useStore()
const emit = defineEmits(['password', 'loginOut'])

const userInfo = computed(() => {
  return store.getters['user/info']
})

const makeTextPortrait = () => {
  return genTextPortrait(userInfo.value.name)
}

const errorHandler = () => {
  return true
}

</script>

<style scoped lang="scss">
.avatar_img {
  text-align: center;
}

.button {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
</style>
