<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;

			/* 隐藏滚动条 */
			scrollbar-width: none;
			&::-webkit-scrollbar {
			  display: none;
			}

			.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 {
			    background: #f5f5f5;
			    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>
