<template>
    <view class="profile-header">
        <!-- 用户信息区：深蓝渐变 -->
        <view class="profile-header__hero">
            <view class="profile-header__inner" v-if="isLogin">
                <view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
                    <view class="profile-header__user-inner">
                        <view class="profile-header__avatar-wrap">
                            <view class="profile-header__avatar-ring">
                                <image
                                    class="profile-header__avatar"
                                    :key="userInfo.avatar"
                                    :src="displayAvatar"
                                    mode="aspectFill"
                                />
                            </view>
                            <view class="profile-header__avatar-badge">
                                <image
                                    class="profile-header__avatar-badge-icon"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/camera.png"
                                    mode="aspectFit"
                                />
                            </view>
                        </view>
                        <view class="profile-header__user-meta">
                            <view class="profile-header__user-meta-inner">
                                <text class="profile-header__name">{{ userInfo.name || "活氧舱用户" }}</text>
                                <text class="profile-header__phone">{{ userInfo.phone }}</text>
                                <view class="profile-header__badge">
                                    <image
                                        class="profile-header__badge-icon"
                                        src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png"
                                        mode="aspectFit"
                                    />
                                    <text class="profile-header__level">{{ userInfo.memberLevel }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="profile-header__stats">
                    <view class="profile-header__stats-inner">
                        <view class="profile-header__stat">
                            <view class="profile-header__stat-inner">
                                <text class="profile-header__stat-value">{{ stats.checkInCount }}</text>
                                <text class="profile-header__stat-label">累计签到</text>
                            </view>
                        </view>
                        <view class="profile-header__stat-divider"></view>
                        <view class="profile-header__stat">
                            <view class="profile-header__stat-inner">
                                <text class="profile-header__stat-value">{{ stats.trainingHours }}</text>
                                <text class="profile-header__stat-label">训练时长</text>
                            </view>
                        </view>
                        <view class="profile-header__stat-divider"></view>
                        <view class="profile-header__stat">
                            <view class="profile-header__stat-inner">
                                <text class="profile-header__stat-value">{{ stats.pointsBalance }}</text>
                                <text class="profile-header__stat-label">累计积分</text>
                            </view>
                        </view>
                    </view>
                </view>
				
            </view>
			<view class="profile-header__inner" v-else>
				<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
					<view
						class="profile-header__user-inner--guest"
						@tap="handleGuestLogin"
					>
						<view class="profile-header__avatar-wrap--guest">
							<image
								class="profile-header__avatar--guest"
								src="/static/OIP-C.png"
								mode="aspectFill"
							/>
						</view>
						<view class="profile-header__user-meta--guest">
							<text class="profile-header__name--guest">小伙伴，点我登录</text>
							<text class="profile-header__phone--guest">陪你遇见更好的自己 ~</text>
						</view>
					</view>
				</view>
			</view>
        </view>
    </view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
    userInfo: { type: Object, required: true },
    stats: { type: Object, required: true },
	isLogin: { type: Boolean }
})


const emit = defineEmits(['user-info', 'guest-login'])

const displayAvatar = computed(() => {
    return props.userInfo.avatar || '/static/OC-default-headIamge.png'
})

function handleUserTap() {
    if (props.isLogin) {
        emit('user-info')
    }
}

function handleGuestLogin() {
    emit('guest-login')
}
</script>

<style lang="scss">
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-header.css';
@import '@/common/style/memberInfo/member-info-tap.css';
</style>
