<template>
  <view class="header">
    <view class="profile-info">
      <view class="profile-pic-container">
        <image :src="avatar" mode="aspectFill" class="profile-pic"></image>
      </view>
      <view class="user-details">
        <text class="username">{{ username }}</text>
        <view class="id-copy-wrapper">
          <text class="user-id">ID: {{ userId }}</text>
          <text class="copy-id" @tap="$emit('copy-id')">复制ID</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
defineEmits(["copy-id"]);

defineProps({
  avatar: {
    type: String,
    required: true,
  },
  username: {
    type: String,
    required: true,
  },
  userId: {
    type: String,
    required: true,
  },
});
</script>

<style scoped>
.header {
  width: 100%;
  padding: 30rpx;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(247, 252, 255, 0.66)),
    rgba(255, 255, 255, 0.72);
  margin-bottom: 22rpx;
  box-shadow: 0 18rpx 42rpx rgba(93, 107, 139, 0.08);
  flex-shrink: 0;
  border-radius: 28rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.9);
  box-sizing: border-box;
}

.profile-info {
  display: flex;
  align-items: center;
  width: 100%;
}

.profile-pic-container {
  width: 132rpx;
  height: 132rpx;
  border-radius: 50%;
  padding: 6rpx;
  background: linear-gradient(135deg, rgba(255, 120, 162, 0.18), rgba(131, 198, 255, 0.18));
  box-shadow: 0 12rpx 30rpx rgba(93, 107, 139, 0.1);
  margin-right: 24rpx;
  flex-shrink: 0;
}

.profile-pic {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 4rpx solid #fff;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.username {
  font-size: 36rpx;
  color: #20273a;
  font-weight: 700;
  margin-bottom: 10rpx;
}

.id-copy-wrapper {
  display: flex;
  align-items: center;
}

.user-id {
  font-size: 24rpx;
  color: #7a8496;
}

.copy-id {
  color: #d94f75;
  font-size: 23rpx;
  margin-left: 12rpx;
  padding: 5rpx 12rpx;
  background: rgba(255, 232, 241, 0.72);
  border-radius: 999rpx;
}
</style>
