<template>
	<view class="medal-display" v-if="isPluginEnabled && hasMedals">
		<image v-for="medal in wearingMedals" 
			:key="medal.id"
			class="medal-icon" 
			:src="medal.icon_url"
			mode="aspectFit"
			:title="medal.name">
		</image>
	</view>
</template>

<script>
	export default {
		name: "medalItem",
		props: {
			uid: {
				type: [Number, String],
				required: false,
				default: ''
			}
		},
		data() {
			return {
				medals: [],
				wearingMedals: [],
				isPluginEnabled: false,
				hasMedals: false
			}
		},
		created() {
			try {
				const cachedPlugins = uni.getStorageSync('getPlugins')
				if (cachedPlugins) {
					const pluginList = JSON.parse(cachedPlugins)
					this.isPluginEnabled = pluginList.includes('xqy_medal')
					//console.log('勋章插件状态:', this.isPluginEnabled)
				}
			} catch (error) {
				//console.error('检查插件状态失败:', error)
				this.isPluginEnabled = false
			}
			if (this.uid) {
				this.loadUserMedals()
			}
		},
		watch: {
			uid: {
				handler(newVal) {
					if (newVal && this.isPluginEnabled) {
						this.loadUserMedals()
					}
				},
				immediate: true
			}
		},
		methods: {
			async loadUserMedals() {
				try {
					if (!this.isPluginEnabled) {
						//console.log('小祈愿勋章插件未启用')
						return
					}
					if (!this.uid) {
						//console.log('未提供uid')
						return
					}
					
					const requestUrl = this.$API.PluginLoad('xqy_medal')
					//console.log('请求用户勋章 - UID:', this.uid)
					
					const res = await new Promise((resolve, reject) => {
						uni.request({
							url: requestUrl,
							data: {
								action: 'getMedals',
								plugin: 'xqy_medal',
								type: 'user',
								uid: this.uid
							},
							method: 'GET',
							dataType: 'json',
							success: (res) => {
								if (res.data && res.data.code === 200) {
									resolve(res)
								} else if (res.data.code === 400) {
									console.error('用户ID无效:', this.uid)
									reject(new Error('用户ID无效'))
								} else {
									reject(new Error(res.data?.msg || '获取勋章失败'))
								}
							},
							fail: (err) => {
								console.error('请求失败:', err)
								reject(new Error('请求失败'))
							}
						})
					})
					
					if (res.data.code === 200) {
						//console.log('获取到的勋章数据:', res.data.data)
						// 过滤出正在佩戴的勋章
						this.medals = res.data.data.medals || []
						this.wearingMedals = this.medals.filter(medal => medal.is_wearing)
						//console.log('正在佩戴的勋章:', this.wearingMedals)
						if (this.wearingMedals.length === 0) {
							//console.log('该用户没有佩戴任何勋章')
						}
						this.hasMedals = this.wearingMedals.length > 0
						this.$emit('medal-loaded', this.hasMedals ? this.wearingMedals : null)
					}
				} catch (error) {
					//console.error('加载用户勋章失败:', error)
					this.hasMedals = false
					this.$emit('medal-loaded', null)
				}
			}
		}
	}
</script>

<style>
	.medal-display {
		display: inline-flex;
		align-items: center;
		text-align: left;
		gap: 6rpx;  /* 减小图标之间的间距 */
		flex-wrap: nowrap;  /* 防止换行 */
		overflow-x: auto;  /* 如果图标太多允许横向滚动 */
	}

	.medal-icon {
		width: 35rpx;   /* 减小图标尺寸 */
		height: 35rpx;  /* 保持正方形 */
		flex-shrink: 0;  /* 防止图标被压缩 */
		margin-left: 4rpx;
	}
</style> 