<template>
	<view class="flex-row-start info-cell good-info" :class="{'good-info-multi' : data.length > 1}">
		<template v-if="data.length === 1">
			<image class="good-icon" :src="data[0].product_pic" mode="aspectFill" @click="$emit('clickGoodImg', data[0])" />
			<view class="good-content" @click="$emit('clickGoodInfo', data[0])">
				<view class="goods-row-first">
					<view class="goods-name">{{ data[0].goods_name || "" }}</view>
					<view class="fs-28 app-fc-main goods-price">
						¥{{ data[0].goods_price || data[0].product_actual_price }}
					</view>
				</view>
				<view class="fs-24 app-fc-normal">共{{ data[0].number || 1 }}件</view>
			</view>
		</template>

		<template v-else>
			<view class="flex-row-between good-info-more" @click="$emit('openGoodsModal')">
				<view class="flex-row-start">
					<image v-for="(img, i) in goodsImgs.slice(0, 3)" :key="i" class="good-img" :src="img" mode="aspectFill" />
				</view>
				<view class="good-info-right">
					<text class="good-total-price">¥{{ actual_price }}</text>
					<text class="fs-24 app-fc-normal good-num">
						共{{ totalCount }}件
					</text>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Array,
				default: () => [],
			},
			actual_price:String
		},
		data() {
			return {};
		},
		computed: {
			
			goodsImgs() {
				return this.data.map((item) => item.product_pic).filter((v) => !!v);
			},
			totalPrice() {
				return this.data.reduce((sum, item) => {
					const price = parseFloat(item.goods_price || 0);
					const number = parseInt(item.number || 1);
					return sum + price * number;
				}, 0).toFixed(2);
			},
			totalCount() {
				return this.data.reduce((sum, item) => {
					return sum + parseInt(item.number || 1);
				}, 0);
			},
		},
		mounted() {
			console.log(this.data,'--')
		},
		methods: {},
	};
</script>

<style lang="scss" scoped>
	.info-cell {
		border-radius: 20rpx;
		box-sizing: border-box;

		.arrow-icon {
			width: 11rpx;
			height: 18rpx;
		}

		&.good-info {
			padding-top: 20rpx;
			align-items: flex-start;

			.good-icon {
				width: 160rpx;
				height: 160rpx;
				border-radius: 16rpx;
				background: #f5f5f5;
				margin-right: 20rpx;
				flex-shrink: 0;
			}

			.good-content {
				flex: 1;
				height: 160rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-row-first {
					display: flex;
					justify-content: space-between;
					align-items: flex-start;
					width: 100%;

					.goods-name {
						font-size: 28rpx;
						color: #3D3D3D;
						line-height: 40rpx;
						margin-right: 16rpx;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}

					.goods-price {
						flex-shrink: 0;
					}
				}
			}
		}

		.good-info-more {
			width: 100%;

			.good-img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 8rpx;
				border-radius: 8rpx;
			}

			.good-info-right {
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: center;

				.good-total-price {
					font-size: 28rpx;
					color: #3D3D3D;
					font-weight: 500;
					margin-bottom: 8rpx;
				}

				.good-num {
					flex-shrink: 0;
				}
			}
		}
	}
</style>