<template>
  <scroll-view
    scroll-y
    class="pro-container box-border"
    :style="{
      backgroundImage: 'url(' + config[brandName]?.src + ')',
      height: `${config[brandName]?.height}rpx`,
    }"
  >
    <view class="pro-wrapper flex flex-wrap">
      <view
        v-for="(item, index) in products"
        :key="index"
        class="product-container"
      >
        <ProductItem :detail="item" :index="index" />
      </view>
    </view>
  </scroll-view>
</template>

<script setup>
import ProductItem from "./product-item";
import config from "../config";
const props = defineProps({
  products: {
    type: Array,
    required: true,
    default: () => [],
  },
  brandName: {
    type: String,
    required: true,
    default: "",
  },
});
</script>

<style lang="scss" scoped>
.pro-container {
  width: 780rpx;
  padding: 136rpx 60rpx 72rpx;
  // margin-bottom: -24rpx;
  background-repeat: no-repeat;
  background-size: contain;
  overflow-y: auto;
}
.pro-wrapper {
  .product-container {
    width: calc((100% - 40rpx) / 3);
    margin-right: 20rpx;
    margin-bottom: 20rpx;
  }
  // view:nth-child(3n) > .pro-item-wrapper{
  //   margin-right:0 !important;
  // }
  view:nth-child(3n) {
    margin-right: 0 !important;
  }
  // view:nth-child(3n+1):nth-last-child(-n+3) > .pro-item-wrapper,
  // view:nth-child(3n+1):nth-last-child(-n+3)~view > .pro-item-wrapper{
  //   margin-bottom: 0 !important;
  // }
  view:nth-child(3n + 1):nth-last-child(-n + 3),
  view:nth-child(3n + 1):nth-last-child(-n + 3) ~ view {
    margin-bottom: 0 !important;
  }
}
</style>
