<!--
    @name: 一行三个
    @author: kahu4
    @date: 2023-10-27 14:47
    @description：TreeGoodRow
    @update: 2023-10-27 14:47
-->
<script setup>
import Goods from "@/components/goodsComponents/Goods.vue";
import Options from "@/components/goodsComponents/components/Options.vue";
import { useRouter } from "@/hooks/useRouter";

const props = defineProps({
  products: {
    type: Array
  }
})

const {push} = useRouter()


const toDetail = (id) => {
  push({url: '/pages/goodsDetail/goodsDetail'}, {
    data: {
      id
    }
  })
}
</script>

<template>
  <view class="three-row">
    <template v-for="item in props.products">
      <view class="good-item">
        <Goods
            :goods="item"
            @click="toDetail(item.id)"
        >
          <template #options>
            <Options :goods="item"></Options>
          </template>
        </Goods>
      </view>

    </template>
  </view>
</template>

<style
    scoped
    lang="scss"
>
.three-row {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10rpx;

  .good-item {
    position: relative;
    width: 31%;
  }

  .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;
    }
  }
}
</style>
