<template>
  <span class="username-display">
    <!-- 加载中状态 -->
    <template v-if="isLoading">
      <span class="loading-placeholder">加载中...</span>
    </template>
    
    <!-- 已加载完成 -->
    <template v-else>
      <!-- 存在用户信息 -->
      <span v-if="userInfo">{{ userInfo.nickName }}</span>
      
      <!-- 不存在用户信息 -->
      <span v-else class="unknown-user">
        {{ userId ? `未知用户(${userId})` : '未指定用户' }}
      </span>
    </template>
  </span>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  name: 'UsernameDisplay',
  props: {
    // 需要展示的用户ID
    userId: {
      type: [String, Number],
      default: null
    },
    // 是否自动加载用户数据（默认自动加载）
    autoLoad: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    ...mapState({
      userMap: state => state.userMap,
      userList: state => state.userList
    }),
    // 获取当前用户信息
    userInfo() {
      if (!this.userId) return null
      return this.userMap[this.userId]
    },
    // 判断是否处于加载中（用户列表为空且需要加载时）
    isLoading() {
      return this.autoLoad && this.userList.length === 0 && this.userId !== null
    }
  },
  methods: {
    ...mapActions(['setUser'])
  },
  mounted() {
    // 自动加载用户数据（如果未加载且需要加载）
    if (this.autoLoad && this.userList.length === 0) {
      this.setUser()
    }
  },
  watch: {
    // 当userId变化时，如果需要自动加载且数据未加载，重新加载
    userId(newVal) {
      if (this.autoLoad && newVal !== null && this.userList.length === 0) {
        this.setUser()
      }
    }
  }
}
</script>

<style scoped>
.username-display {
  color: #333;
  font-size: 14px;
}

.loading-placeholder {
  color: #999;
  font-style: italic;
}

.unknown-user {
  color: #f56c6c;
  font-size: 13px;
}
</style>