<template>
  <div class="pv-promo" :style="{background:props.bgColor||'#FFF7EE'}">
    <!-- 标题栏 -->
    <div class="pv-head" :style="{color:props.textColor||'#E67E22'}">
      <span class="pv-title">{{ props.title||'今日热促' }}</span>
      <span class="pv-tag" :style="{background:(props.textColor||'#E67E22')+'22'}">
        {{ typeLabel }}
      </span>
    </div>
    <!-- 聚合活动卡片（模拟渲染） -->
    <div class="pv-cards">
      <div class="pv-card">
        <div class="pv-ico">⚡</div>
        <div class="pv-info">
          <div class="pv-name">限时秒杀</div>
          <div class="pv-price"><b class="p">¥99</b><s>¥199</s></div>
        </div>
        <span class="pv-badge" style="background:#E74C3C">去抢</span>
      </div>
      <div class="pv-card">
        <div class="pv-ico">🫂</div>
        <div class="pv-info">
          <div class="pv-name">多人拼团</div>
          <div class="pv-price"><b class="p">¥149</b><s>¥259</s></div>
        </div>
        <span class="pv-badge" style="background:#27AE60">去拼</span>
      </div>
      <div class="pv-card">
        <div class="pv-ico">🎫</div>
        <div class="pv-info">
          <div class="pv-name">领券中心</div>
          <div class="pv-price"><b class="p">满99减20</b></div>
        </div>
        <span class="pv-badge" style="background:#D4A045">领取</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
const props=defineProps({props:{type:Object,default:()=>({})}})
const typeLabel=computed(()=>({
  all:'全部活动', seckill:'秒杀', groupon:'拼团',
  bargain:'砍价', presale:'预售', coupon:'领券'
})[props.props?.type||'all']||'全部活动')
</script>
<style scoped>
.pv-promo{border-radius:6px;padding:12px}
.pv-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.pv-title{font-size:15px;font-weight:700}
.pv-tag{font-size:11px;padding:1px 8px;border-radius:10px}
.pv-cards{display:flex;flex-direction:column;gap:8px}
.pv-card{display:flex;align-items:center;gap:10px;background:#fff;border-radius:6px;padding:8px}
.pv-ico{font-size:22px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:#f5f6fa;border-radius:6px}
.pv-info{flex:1}
.pv-name{font-size:13px;font-weight:600}
.pv-price{font-size:12px;color:#888}
.pv-price .p{color:#E74C3C;font-size:14px;font-weight:700}
.pv-price s{color:#bbb;margin-left:6px;font-size:11px}
.pv-badge{font-size:11px;color:#fff;padding:3px 10px;border-radius:12px}
</style>
