<template>
  <div class="user-info" @click="visibleUpdatePwd = true">
    <span>{{ info.userName }}</span>
    <span class="m-l-base">{{ info.roleName }}</span>
  </div>
  <update-user-pwd v-model="visibleUpdatePwd" :user-name="info.name || ''"></update-user-pwd>
</template>

<script setup lang="ts" name="UserInfo">
import { ref, computed } from 'vue'
import useMainStore from '@/store/main'
import UpdateUserPwd from '@/components/shared/UpdateUserPwd.vue'

const mainStore = useMainStore()

const info = computed(() => {
  const { loginName, name, roleName } = mainStore.myUserInfo || {}
  return {
    userName: [loginName, name].filter(Boolean).join('-'),
    roleName,
    name,
  }
})

const visibleUpdatePwd = ref<boolean>(false)
</script>

<style scoped lang="scss">
.user-info {
  color: $RegularFontColor;
  font-size: $SmallFont;
}
</style>
