<template>
  <view v-if="showSkeleton" class="product-list-container">
    <view v-for="k in skeletonCount" :key="k" class="skeleton-item">
      <wd-skeleton
        :row-col="[
          { width: '328rpx', height: '328rpx' },
          1,
          { width: '222rpx' },
          [{ width: '142rpx' }, { width: '48rpx', height: '48rpx', type: 'circle' }],
        ]"
      />
    </view>
  </view>
  <view v-else class="product-list-container">
    <ProductItem v-for="item in productList" :key="item.id" :product="item"></ProductItem>
  </view>
</template>

<script lang="ts" setup>
  import { ProductSimpleType } from '@/model/product-type'
  import data from './data.json'
  import ProductItem from './product-item.vue'

  defineOptions({
    name: 'ProductList',
  })
  withDefaults(defineProps<{ skeletonCount?: number; showSkeleton?: boolean }>(), {
    skeletonCount: 2,
  })

  const productList = ref<ProductSimpleType[]>(data)
</script>

<style lang="scss" scoped>
  .product-list-container {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-right: 32rpx;

    .skeleton-item {
      --wot-skeleton-row-margin-bottom: 16rpx;
      display: flex;
      justify-content: space-between;
      width: 328rpx;
      height: 488rpx;

      &:nth-child(2n) {
        margin-left: 30rpx;
      }
    }
  }
</style>
