<template>
  <div class="pv-pl">
    <div v-if="props.title && props.showTitle !== false" class="pv-pl-title">{{ props.title }}</div>
    <div class="pv-pl-grid" :style="{gridTemplateColumns:'repeat('+(props.columns||2)+',1fr)'}">
      <div v-for="i in (props.count||4)" :key="i" class="pv-pl-item">
        <div class="pv-pl-img"><span class="pv-pl-emoji">📦</span></div>
        <div class="pv-pl-name">商品{{ i }}</div>
        <div v-if="props.showPrice !== false" class="pv-pl-price">¥{{ (Math.random()*200+10).toFixed(2) }}</div>
        <div v-if="props.showSales !== false" class="pv-pl-sales">已售{{ Math.floor(Math.random()*500) }}件</div>
      </div>
    </div>
  </div>
</template>
<script setup>const props=defineProps({props:{type:Object,default:()=>({})}})</script>
<style scoped>
.pv-pl{padding:8px 12px;background:#fff}
.pv-pl-title{font-size:15px;font-weight:700;color:#333;margin-bottom:10px}
.pv-pl-grid{display:grid;gap:8px}
.pv-pl-item{text-align:center}
.pv-pl-img{width:100%;aspect-ratio:1;background:#f5f5f5;border-radius:10px;display:flex;align-items:center;justify-content:center}
.pv-pl-emoji{font-size:28px;opacity:.3}
.pv-pl-name{font-size:12px;color:#333;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pv-pl-price{font-size:14px;color:#E17055;font-weight:700;margin-top:2px}
.pv-pl-sales{font-size:10px;color:#999}
</style>
