<!--
    @name: ScrollGoodRow
    @author: kahu4
    @date: 2023-11-01 15:56
    @description：ScrollGoodRow
    @update: 2023-11-01 15:56
-->
<script setup>

import Goods from "@/components/goodsComponents/Goods.vue";
import Options from "@/components/goodsComponents/components/Options.vue";

const props = defineProps({
  products: {
    type: Array
  }
})
</script>

<template>
  <scroll-view
      scroll-x
      class="scroll-view"
  >
    <view
        class="scroll-inner"
    >

      <template
          v-for="good in props.products"
          :key="good.id"
      >
        <Goods
            class="scroll-item"
            info-padding="15rpx 20rpx"
            :goods="good"
        >
          <template #options>
            <Options
                :goods="good"
                show-btn
            ></Options>
          </template>
        </Goods>
      </template>
    </view>
  </scroll-view>

</template>

<style
    scoped
    lang="scss"
>
.scroll-view {
  width: 100%;
  overflow: hidden;

  .scroll-inner {
    display: flex;
    flex-wrap: nowrap;
    gap: 20rpx;

    .scroll-item {
      flex-shrink: 0;
      max-width: 290rpx;
      background: #fff;
      border-radius: 15rpx;
      overflow: hidden;

      .good-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 20rpx;

        .price {
          color: #EE6D46;
          font-size: 30rpx;

          .tip {
            color: #999999;
            font-size: 24rpx;
          }
        }

        .sale {
          color: #999999;
        }

        .btn {
          background: #ee6d46;
          color: #fff;
          font-size: 24rpx;
          padding: 10rpx 24rpx;
          transition: all .3s;

          &:active {
            transform-origin: right bottom;
            scale: .9;
          }
        }
      }
    }
  }
}
</style>
