<template>
  <div class="pv-wf">
    <div v-if="props.title" class="pv-wf-title">{{ props.title }}</div>
    <div class="pv-wf-list">
      <!-- 错落两列瀑布流 -->
      <div v-for="i in (props.count||6)" :key="i" class="pv-wf-item" :class="{ right: i % 2 === 0 }">
        <div class="pv-wf-img" :style="{height: (120 + (i % 3) * 40) + 'px'}"><span class="pv-wf-emoji">🛍️</span></div>
        <div class="pv-wf-name">瀑布流商品{{ i }}</div>
        <div v-if="props.showPrice !== false" class="pv-wf-price">¥{{ (Math.random()*300+9).toFixed(2) }}</div>
        <div v-if="props.showSales !== false" class="pv-wf-sales">已售{{ Math.floor(Math.random()*800) }}件</div>
      </div>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-wf{padding:8px 12px;background:#fff}
.pv-wf-title{font-size:15px;font-weight:700;color:#333;margin-bottom:10px}
.pv-wf-list{display:flex;gap:8px;justify-content:space-between}
.pv-wf-item{width:calc(50% - 4px);background:#fafafa;border-radius:10px;overflow:hidden}
.pv-wf-item.right{margin-top:18px}
.pv-wf-img{background:#f0f0f0;display:flex;align-items:center;justify-content:center}
.pv-wf-emoji{font-size:30px;opacity:.3}
.pv-wf-name{font-size:12px;color:#333;padding:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-wf-price{font-size:14px;color:#E17055;font-weight:700;padding:0 6px}
.pv-wf-sales{font-size:10px;color:#999;padding:0 6px 6px}
</style>
