<template>
  <!-- 猜你喜欢 -->
  <view
    class="guess"
    :style="{
      padding: RowsList && RowsList.length
        ? '0 30rpx 150rpx 30rpx'
        : '20rpx 30rpx 0 30rpx',
    }"
  >
    <view class="guess-top">
      <image class="guess-icon" src="/static/image/common/heart.png" mode=""></image>
      <view class="guess-left">你可能还喜欢</view>
    </view>
    <view class="guess-item" v-if="RowsList && RowsList.length > 0">
      <view
        class="item"
        @click="goProductDetails('/pages/product/goods/goods?id=' + item.id)"
        v-for="(item, index) in RowsList"
        :key="index"
      >
        <image
          v-if="item && item.cover"
          :src="item.cover"
          mode="aspectFill"
        ></image>
        <view style="padding-bottom: 40rpx">
          <view class="name" style="flex: 1">{{ item.title }}</view>
          <view class="number">
            <view class="number-red">
              <rich-text
                :nodes="$mUtil.priceBigSmall(item.min_sale_price)"
              ></rich-text>
            </view>
            <view class="number-grey">￥{{ item.max_market_price }}</view>
          </view>
        </view>
      </view>
    </view>
    <noData v-else :config="{ top: 1, content: '暂无商品~' }"></noData>
    <loadMore v-if="RowsList.length > 0" :status="status"></loadMore>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { usePageData } from "@/hooks/usePageData.ts";
const { RowsList, LoadStatus, initData } = usePageData();

onMounted(() => {
  initData();
});

defineExpose({
  initData,
});
</script>

<style scoped lang="scss">
.guess {
  // padding: 100rpx 30rpx 0 30rpx;

  .guess-item {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;

    .item {
      margin-bottom: 36rpx;
      background-color: #ffffff;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border-radius: 20rpx 20rpx 0 0;
      box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.1);

      image {
        width: 336rpx;
        height: 336rpx;
        border-radius: 18rpx;
      }

      .name {
        margin: 6rpx 20rpx;
        width: 296rpx;
        height: 70rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap: break-word;
        word-break: break-all;
        white-space: normal !important;
      }

      .tag-box {
        margin: 10rpx 20rpx 0 20rpx;

        .tag1 {
          width: 69rpx;
          height: 30rpx;
        }

        .tag2 {
          width: 116rpx;
          height: 30rpx;
          margin-left: 10rpx;
        }
      }

      .number {
        display: flex;
        align-items: flex-end;
        // padding-bottom: 40rpx;
        margin: 0 20rpx 0 20rpx;

        .number-red {
          color: #ff6600;
          font-size: 36rpx;
          font-weight: 700;

          text {
            font-size: 36rpx;
            font-weight: Bold;
          }
        }

        .number-grey {
          color: #999999;
          font-size: 22rpx;
          font-weight: 400;
          text-decoration: line-through;
          margin-left: 16rpx;
          padding-bottom: 4rpx;
        }
      }
    }

    .item:nth-child(2n) {
      margin-left: 18rpx;
    }
  }

  .guess-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24rpx;

    .guess-icon {
      width: 35rpx;
      height: 35rpx;
      margin-right: 10rpx;
    }

    .guess-left {
      font-size: 30rpx;
      color: #1a1a1a;
      font-weight: Bold;
      line-height: 30rpx;
    }

    .guess-line {
      width: 1rpx;
      height: 32rpx;
      background-color: #707070;
      margin: 0 16rpx;
    }

    .guess-right {
      font-size: 24rpx;
      color: #666666;
      font-weight: Regular;
      line-height: 24rpx;
    }
  }
}
</style>
