<template>
	<view class=" mt-14 m24">
		<view v-if="productList.length > 0">
			<view v-for="(product, index) in productList" :key="index" class="bg-white pb-10 rounded-8 overflow-hidden mb-14" @click="toDetail(product)">
				<image class="w-all h-195" :src="(product.image || product.firstImage) || 'https://cdn.his.cdwjyyh.com/images/img.png'"></image>
				<view class="goods-count px-12 flex items-center justify-between text-white w-all h-32 rounded-6 mt--15 zi-2 relative">
					<view class="fw-500 fs-18">热卖爆品</view>
					<view class="fw-400 fs-13">已售{{ product.sales || '0' }}件</view>
				</view>
				<view class="fw-500 fs-13 text-333333 mt-11 px-12">
					{{ (product.productName || product.title) || '产品名称' }}
				</view>
				<view class="fw-400 fs-12 text-D46C0D mt-7 px-12">
					处方药须凭处方在药师指导下购买和使用
				</view>
				<view class="flex items-center justify-between mt-7 px-12">
					<view class="flex items-center gap-4 text-FF4B33 fs-11" >
						<view class="lable">9.5折</view>
						<view class="lable">限购一份</view>
					</view>
					<view class="flex items-center gap-2" @click.stop="showCouponPopup">
						<view class="fs-12 text-FA341E fw-400">领券</view>
						<image class="w-12 h-12" src="https://cdn.his.cdwjyyh.com/images/right_red.png"></image>
					</view>
				</view>
				<view class="flex items-center justify-between mt-8 px-12">
					<view class="flex items-end gap-8">
						<view class="text-FA341E">
							<text class="fs-12 fw-600">¥</text>
							<text class="fs-24 fw-600">{{ splitPrice(product.price).integer || '0' }}</text>
							<text class="fs-15 fw-600">.{{ splitPrice(product.price).decimal || '0' }}</text>
						</view>
						<view class="text-999999 fs-13 fw-400 text-line-through pb-3 line-through" v-if="product.otPrice">
							¥{{ product.otPrice }}
						</view>
					</view>
					<view class="flex items-center w-110 h-34 rounded-34 overflow-hidden">
						<view class="w-44 h-all flex items-center justify-center bg-38D97D" @click.stop="addToCart(product)">
							<image class="w-20 h-20" src="https://cdn.his.cdwjyyh.com/images/shopping_white.png"></image>
						</view>
						<view class="flex-1 h-all flex items-center justify-center bg-02B176 fw-500 text-white fs-14" @click.stop="goToBuy(product)">
							去购买
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="bg-white pb-10 rounded-8 overflow-hidden mb-14 p-12">
			<view class="fw-500 fs-13 text-333333">暂无商品数据</view>
		</view>

		<!-- 优惠券弹窗组件 -->
		<CouponPopup v-model="showCoupon" />
	</view>
</template>
<script>
import{addCart} from "@/api/product.js"
import CouponPopup from '@/components/coupon-popup/coupon-popup.vue'

export default {
	name: 'HomeGoodsItem',
	components: {
		CouponPopup
	},
	props: {
		productList: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			showCoupon: false
		}
	},
	mounted() {
		console.log("商品列表22", this.productList);
		console.log("商品列表长度", this.productList.length);
	},
	watch: {
		productList: {
			immediate: true,
			handler(newVal) {
				console.log("商品列表变化", newVal);
				console.log("商品列表长度变化", newVal.length);
			}
		}
	},
	methods: {
		toDetail(product){
			uni.navigateTo({
				url: '/pages_shopping/shopping/productDetails?productId=' + product.productId
			});
		},
		addCart() {
				addCart(data).then(
					res => {
						if (res.code == 200) {
							console.log("加购物车", res);
						} else {

						}

					},
					rej => {

					}
				);
			},
		// 分割价格
		splitPrice(price) {
			const priceStr = parseFloat(price).toFixed(2).toString();
			return {
				integer: priceStr.split('.')[0],
				decimal: priceStr.split('.')[1]
			};
		},

		// 添加到购物车
		addToCart(product) {
			console.log('添加到购物车:', product);
			// 触发父组件的添加购物车事件
			this.$emit('addToCart', product);
		},

		// 去购买
		goToBuy(product) {
			console.log('去购买:', product);
			// 触发父组件的去购买事件
			this.$emit('goToBuy', product);
		},

		// 显示优惠券弹窗
		showCouponPopup() {
			this.showCoupon = true;
		}
	}
};
</script>
<style scoped lang="scss">
.goods-count {
	background: linear-gradient(to right, #FA341E, #F4A007);
}
.lable{
	border-radius: 4rpx 4rpx 4rpx 4rpx;
border: 1rpx solid #FFA599;
padding: 2rpx 8rpx;
}
.through{
	text-decoration: line-through;
}
</style>