<template>
	<view class="goods-item" >
		<image class="goods-img" :src="data.product_pic" mode="aspectFill" />
		<view class=" fs-24 app-fc-main goods-name">
			{{ data.product_name || "" }}
		</view>
		<!-- <view class="flex-row-start label">
			<image class="hot-icon" :src="`${imgPrefix}mall-hot.png`"></image>
			<view class="fs-20 app-fc-main label-name">{{data.sales}}人买过</view>
		</view> -->
		<view class="flex-row-between" style="margin-top: 12rpx; align-items: baseline;">
			<view class="price-wrapper">
				<text class="fs-28" style="color: #3D3D3D;">
					¥
					<text class="fs-28">{{
						data.prices[0].actual_price || 0
					}}</text>
				</text>
<!-- 				<text class="fs-24 origin-price">
					¥{{ minPrice.price_shichang || 0 }}
				</text> -->
			</view>
			<view class="buy-now-btn" @click.stop="handleBuyNow">
				立即购买
			</view>
		</view>
		<!-- <text class="fs-20 good-salenum">已售{{ data.xiaoliang || 0 }}</text> -->
	</view>
</template>

<script>
	import {
		imgPrefix
	} from '@/utils/common';

	export default {
		props: {
			index: {
				type: Number,
				default: 0,
			},
			data: {
				type: Object,
				default: () => {},
			},
		},
		data() {
			return {
				imgPrefix,
			};
		},
		computed: {
			labelList() {
				return (this.data?.label || "").split(",").filter((v) => !!v);
			},
		},
		mounted() {},
		methods: {
			// jumpToDetails() {
			// 	uni.navigateTo({
			// 		url: `/pages/client/shop/details?product_id=${this.data.product_id}`,
			// 	});
			// },
			handleBuyNow() {
				// 触发购买事件，通知父组件
				this.$emit('addToCar', this.data);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.goods-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 22rpx;
		position: relative;
		width: 100%;
		min-width: 0;
		overflow: hidden;

		.goods-img {
			display: block;
			width: 100%;
			max-width: 100%;
			height: 320rpx;
			border-radius: 16rpx;
			background: #f5f5f5;
		}

		.goods-name {
			margin: 20rpx 0;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			word-wrap: break-word;
			word-break: break-all;
		}

		.label {
			background-color: #ffecf3;
			display: inline-flex;
			border-radius: 4rpx;

			.hot-icon {
				width: 28rpx;
				height: 28rpx;
			}

			.label-name {
				padding: 4rpx;
				color: #FF19A0;
			}
		}

		.sale-btn {
			padding: 4rpx;
			background: $app_color_main;
			border-radius: 4rpx;
			border: 1rpx solid $app_color_main;
			margin-right: 10rpx;
			margin-bottom: 24rpx;
		}

		.sale-today {
			background: transparent;
		}

		.origin-price {
			color: #726e71;
			text-decoration: line-through;
			margin-left: 16rpx;
		}

		.good-salenum {
			color: #9b939a;
		}

		.add-cart-icon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			bottom: 26rpx;
			right: 20rpx;
		}

		.flex-row-between {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.price-wrapper {
			display: flex;
			align-items: baseline;
		}

		.buy-now-btn {
			background: #FF19A0;
			color: #fff;
			font-size: 20rpx;
			padding: 12rpx 24rpx;
			border-radius:30rpx;
			font-weight: 500;
			flex-shrink: 0;
		}

	}
</style>