<template>
  <view class="container">
    <ModuleTitle title="相关商品" />
    <view class="container-scroll">
      <view
        v-for="(item, index) in commodityList"
        :key="`${item.commodityId}-${index}`"
      >
        <view class="mk-card-item" @click="placeOrderHandle(item)">
          <image
            class="card-img"
            :src="item.commodityPhoto"
            mode="aspectFill"
          />
          <view class="card-content">
            <view class="card-title-column">
              <text class="card-title">{{ item.commodityName }}</text>
              <view
                class="card-tags"
                v-for="tag in item.commodityTradeRuleList"
                :key="tag"
              >
                <text class="card-tag">{{ tag }}</text>
              </view>
            </view>
            <template
              v-for="(serviceItem, index) in item.commodityServices"
              :key="serviceItem.serviceTitle"
            >
              <view v-if="index < 3" class="card-desc"
                >· {{ serviceItem.serviceTitle }}</view
              >
            </template>
            <view class="card-bottom-row">
              <view class="card-price-row">
                <text class="card-price-fu">￥</text>
                <text class="card-price">{{ item.specificationPrice }}</text>
                <text class="card-unit">/人</text>
              </view>
              <text class="card-btn">下单</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import ModuleTitle from "@/components/ModuleTitle/index.vue";
import { defineProps } from "vue";
const props = defineProps({
  commodityList: {
    type: Array,
    default: [],
  },
});

/// 去下单
const placeOrderHandle = (item) => {
  uni.navigateTo({
    url: `/pages/goods/index?commodityId=${item.commodityId}`,
  });
};
</script>

<style lang="scss" scoped>
.container {
  margin: 6px 0 0;

  .container-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 4px 0;

    .mk-card-item {
      position: relative;

      display: flex;
      flex-direction: column;
      align-items: start;
      width: 188px;
      //   height: 244px;
      background-color: #ffffff;
      border-radius: 10px;
      margin-right: 8px;
      padding-bottom: 12px;

      .card-badge {
        position: absolute;
        top: 8px;
        left: 8px;
        background: #ffe7b2;
        color: #b97a00;
        font-size: 12px;
        padding: 2px 8px;
        border-radius: 4px;
        z-index: 2;
      }

      .card-img {
        width: 188px;
        height: 114px;
        border-radius: 10px;
        object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
        flex-shrink: 0; /* 防止图片被压缩 */
      }

      .card-content {
        box-sizing: border-box;
        padding: 10px 12px 0 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: start;
        width: 100%;
        flex: 1; /* 让内容区域占据剩余空间 */
        overflow: hidden; /* 防止内容溢出 */
      }

      .card-title-column {
        display: flex;
        align-items: start;
        flex-direction: column;
        width: 100%;
      }

      .card-title {
        font-size: 16px;
        font-weight: bold;
        color: #222;
        width: 100%;
        /* 限制标题最多显示两行 */
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4;
        max-height: 2.8em; /* 2行的高度 */
      }

      .card-tags {
        display: flex;
        flex-direction: row;
        align-items: start;
        padding: 6px 0;
      }

      .card-tag {
        color: #ff6600;
        font-size: 10px;
        border-radius: 4px;
        padding: 0 6px;
        margin-left: 2px;
        border: 1px solid #ff6600;
      }

      .card-desc {
        font-size: 13px;
        color: #888;
        margin-top: 2px;
      }

      .card-bottom-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        width: 100%;
      }

      .card-price-row {
        .card-price-fu {
          color: #ff6600;
          font-size: 11px;
          font-weight: normal;
        }

        .card-price {
          color: #ff6600;
          font-size: 16px;
          font-weight: bold;
        }
        .card-unit {
          font-size: 11px;
          color: #888;
          font-weight: normal;
          margin-left: 2px;
        }
      }

      .card-btn {
        background: #ff6600;
        color: #fff;
        font-size: 15px;
        border-radius: 20px;
        padding: 0 18px;
        height: 32px;
        line-height: 32px;
      }
    }
  }
}
</style>
