<template>
  <view class="share-preview-card">
    <image class="cover" :src="coverUrl" mode="aspectFit" />
    <view class="overlay">
      <view class="avatar-row">
        <image class="avatar" :src="avatarUrl" mode="aspectFill" />
        <text class="nickname">{{ nickname || 'TOPFANS' }}</text>
      </view>
      <view v-if="qrcodeUrl" class="qrcode-wrap">
        <image class="qrcode" :src="qrcodeUrl" mode="aspectFit" />
      </view>
      <view v-if="slogan" class="slogan-wrap">
        <text v-if="slogan.brandLine" class="slogan-line">{{ slogan.brandLine }}</text>
        <text v-if="slogan.brandDesc" class="slogan-desc">{{ slogan.brandDesc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
defineProps({
  coverUrl:  { type: String, required: true },
  avatarUrl: { type: String, required: true },
  qrcodeUrl: { type: String, default: '' },
  nickname:  { type: String, default: '' },
  slogan:    { type: Object, default: null }  // { brandLine, brandDesc } from useShare().currentSlogan
});
</script>

<style lang="scss" scoped>
.share-preview-card {
  position: relative;
  width: 702rpx;        /* 750 设计稿宽度 - 边距 */
  height: 936rpx;        /* 750/1000 * 702 = 936,固定像素避免 aspect-ratio 在 uni-app 失效 */
  background: #f5f5f5;
  border-radius: 16rpx;
  overflow: hidden;
  margin: 0 auto;       /* 居中卡片本身 */
  display: flex;
  align-items: center;
  justify-content: center;
}
.cover {
  width: 100%;
  height: 100%;
}
.overlay { position: absolute; inset: 0; pointer-events: none; }
.avatar-row {
  position: absolute;
  left: 24rpx;
  top: 520rpx;
  display: flex;
  align-items: center;
  gap: 12rpx;
}
.avatar {
  width: 64rpx; height: 64rpx;
  border-radius: 50%;
  border: 4rpx solid #fff;
}
.nickname {
  color: #fff;
  font-size: 24rpx;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,.5);
}
.qrcode-wrap {
  position: absolute;
  right: 20rpx; bottom: 20rpx;
  background: #fff; padding: 6rpx; border-radius: 8rpx;
}
.qrcode { width: 120rpx; height: 120rpx; }
.slogan-wrap {
  position: absolute;
  left: 24rpx;
  right: 24rpx;
  bottom: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rpx;
}
.slogan-line {
  color: #fff;
  font-size: 28rpx;
  font-weight: 600;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,.6);
}
.slogan-desc {
  color: #fff;
  font-size: 22rpx;
  opacity: .9;
  text-shadow: 0 1rpx 4rpx rgba(0,0,0,.6);
}
</style>
