<!--
    @name: HomeGoodItem
    @author: kahu4
    @date: 2023-10-27 14:47
    @description：HomeGoodItem
    @update: 2023-10-27 14:47
-->
<script setup>
import { useRouter } from "@/hooks/useRouter";

const {push} = useRouter()
const props = defineProps({
  good: {
    type: Object
  },
  size: {
    type: String,
    default: 'small'
  },
  mode: {
    type: String,
    default: 'col'
  }
})
const toDetail = () => {
  push({url: '/pages/goodsDetail/goodsDetail'}, {
    data: {
      id: props.good.id
    }
  })
}
</script>

<template>
  <view
      :class="{'good-item':true,row:props.mode==='row'}"
      @tap="toDetail"
  >
    <view class="image">
      <image
          :src="props.good.image"
          mode="aspectFill"
      />
    </view>
    <view
        class="info-box"
        :class="{'padding-box':props.size==='big'}"
    >
      <view class="title-row">
        {{ props.good.storeName }}
      </view>
      <view class="price-row">
        <slot
            name="bottom"
            :good="good"
        >底部
        </slot>
      </view>
    </view>

  </view>
</template>

<style
    scoped
    lang="scss"
>
.good-item {
  position: relative;
  width: 100%;

  .image {
    width: 100%;
    aspect-ratio: 1 / 1;

    image {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
    }
  }

  .info-box {
    width: 100%;

    .title-row {
      margin: 14rpx 0;

      max-width: 25vw;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-weight: 500;
      font-size: 26rpx;
    }
  }

  .padding-box {
    box-sizing: border-box;
    padding: 14rpx 20rpx;
  }
}

.row {
  display: flex;
  align-items: center;
  padding: 16rpx;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 20rpx;
  border-radius: 15rpx;

  .image {
    width: 220rpx;
  }

  .info-box {
    padding: 20rpx 40rpx;
    box-sizing: border-box;
    height: 220rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title-row {
      margin-bottom: 30rpx;
    }
  }
}
</style>
