<template>
  <div class="pv-cw">
    <div v-if="props.title" class="pv-cw-title">{{ props.title }}</div>
    <div class="pv-cw-wall">
      <div v-for="i in (props.count||4)" :key="i" class="pv-cw-coupon">
        <div class="pv-cw-left">
          <div class="pv-cw-value">¥{{ (i*10) }}</div>
          <div class="pv-cw-cond">满{{ (i*50) }}可用</div>
        </div>
        <div class="pv-cw-mid">
          <div class="pv-cw-name">优惠券 {{ i }}</div>
          <div class="pv-cw-valid">7天有效</div>
        </div>
        <div v-if="props.showClaim !== false" class="pv-cw-btn">领取</div>
      </div>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-cw{padding:8px 12px;background:#fff}
.pv-cw-title{font-size:15px;font-weight:700;color:#333;margin-bottom:10px}
.pv-cw-wall{display:flex;flex-direction:column;gap:8px}
.pv-cw-coupon{display:flex;align-items:center;background:linear-gradient(135deg,#EE6B2F,#F89B5B);border-radius:8px;overflow:hidden;padding:10px}
.pv-cw-left{width:76px;text-align:center;color:#fff;border-right:2px dashed rgba(255,255,255,.5);padding-right:6px}
.pv-cw-value{font-size:20px;font-weight:700}
.pv-cw-cond{font-size:10px;opacity:.9}
.pv-cw-mid{flex:1;padding:0 10px;color:#fff}
.pv-cw-name{font-size:14px;font-weight:600}
.pv-cw-valid{font-size:10px;opacity:.8}
.pv-cw-btn{background:#fff;color:#EE6B2F;font-size:12px;font-weight:600;border-radius:20px;padding:4px 12px}
</style>
