<template>
	<div>
		<div
			v-show="goodsValueTabsTitle == '新品首发' || goodsValueTabsTitle == '为你推荐'"
			class="recommend-item"
			@click="click"
		>
			<image :src="goodsImg(item.goods_image)" class="cover" mode="aspectFill"></image>
			<div class="tag" v-show="item.label_name ? true : false">{{ goodsTag(item) }}</div>
			<div v-show="goodsValueTabsTitle == '新品首发'" class="sales">
				<!-- 销量：{{ item.sale_num }}{{ item.unit ? item.unit : '件' }} -->
			</div>
			<div class="content">
				<div class="title">{{ item.goods_name }}</div>

				<div
					v-show="goodsValueTabsTitle == '新品首发' || goodsValueTabsTitle == '为你推荐'"
					class="labels-1"
				>
					<div class="label-item">产地：{{ item.address }}</div>
					<div class="label-item">规格：{{ item.spec_name||'-' }}</div>
					<div class="label-item">执行标准：{{ item.execu_content.title }}</div>
					<div class="label-item">生产企业：{{ item.business }}</div>
				</div>
				<div
					class="bottom"
					v-show="goodsValueTabsTitle == '新品首发' || goodsValueTabsTitle == '为你推荐'"
				>
					<div class="price">
						¥
						<span class="price1">
							{{
								parseFloat(showPrice(item))
									.toFixed(2)
									.split('.')[0]
							}}
						</span>
						.
						<span>
							{{
								parseFloat(showPrice(item))
									.toFixed(2)
									.split('.')[1]
							}}
						</span>
						/盒
					</div>
					<div style="display: flex;align-items: ceter;">
						<view slot="minus" class="minus" @click.stop="numChange(item, 'minus')">
							<u-icon
								name="minus-circle-fill"
								size="20"
								color="var(--base-color)"
							></u-icon>
						</view>
						<input
							slot="input"
							type="number"
							style="width: 32px;text-align: center;"
							class="input"
							v-model="item.cart_num || 0"
							@input.stop="inputBlur"
						/>
						<view slot="plus" class="minus" @click.stop="numChange(item, 'add')">
							<u-icon
								name="plus-circle-fill"
								size="20"
								color="var(--base-color)"
							></u-icon>
						</view>
					</div>
				</div>
			</div>
		</div>

		<div
			v-show="goodsValueTabsTitle == '限时秒杀' || goodsValueTabsTitle == '优惠团购'"
			class="recommend-item2"
			@click="click"
		>
			<image :src="goodsImg(item.goods_image)" mode=""></image>
			<div class="recommend-item2-main">
				<div class="title2">{{ item.goods_name }}</div>
				<div class="describe">规格：{{ item.spec_name||'-' }}</div>
				<div class="describe">产地：{{ item.address }}</div>
				<div class="describe">执行标准：{{ item.execu_content.title }}</div>
				<div class="describe">生产企业：{{ item.business }}</div>
				<div class="price2" v-show="goodsValueTabsTitle == '优惠团购'">
					<div>
						拼团价¥
						<span style="font-size: 36rpx;">
							{{
								parseFloat(item.discount_price)
									.toFixed(2)
									.split('.')[0]
							}}
						</span>
						.{{
							parseFloat(item.discount_price)
								.toFixed(2)
								.split('.')[1]
						}}
					</div>
					<div class="cancel-price">¥ {{ Number(item.price).toFixed(2) }}</div>
				</div>
				<div class="price3" v-show="goodsValueTabsTitle == '限时秒杀'">
					<div>
						秒杀价¥
						<span style="font-size: 36rpx;">
							{{
								parseFloat(item.discount_price)
									.toFixed(2)
									.split('.')[0]
							}}
						</span>
						.{{
							parseFloat(item.discount_price)
								.toFixed(2)
								.split('.')[1]
						}}
					</div>
					<div class="cancel2-price">¥ {{ Number(item.price).toFixed(2) }}</div>
					<div class="payNumber">{{ item.goods_num }}人已付款</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['userInfo'])
	},
	name: 'verticalGoodsItem',

	props: {
		item: {
			default: () => {}
		},
		isPrice: {
			default: () => true
		},
		goodsValueTabsTitle: {
			type: String
		}
	},
	data() {
		return {};
	},
	created() {
		//console.log('this.item');
		//console.log(this.item);
	},
	methods: {
		inputBlur(e) {
			const v = e.detail.value;
			this.item.cart_num = 1;
			const zero = /^(0{2,})|[^0-9]/g;
			let final = 0;
			if (!v) {
				final = 0;
			} else {
				final = v.toString().replace(zero, v => {
					return 0;
				});
		
				if (final.split('')[0] * 1 === 0) {
					final = final.slice(1) - 0 || 0;
				}
			}
			this.$nextTick(() => {
				this.item.cart_num = final.toString() || 0;
				this.$api.sendRequest({
					url: '/api/cart/add',
					data: {
						num: v,
						sku_id: this.item.sku_id,
						is_all: 1
					},
					success: () => {
						this.$store.dispatch('getCartNumber');
					}
				});
			});
		},
		numChange(item, type) {
			item.cart_num = Number(item.cart_num);
			let setp = 1;
			item.cart_num ? item.cart_num : (item.cart_num = 0);
			if (type == 'minus' && !item.cart_num) {
				return;
			}
			if (!item.cart_num || item.is_multiple) {
				setp = item.min_buy || 1;
			} else {
				if (type == 'add') {
					setp = item.cart_num >= item.min_buy ? 1 : item.min_buy;
				} else {
					setp = item.cart_num == item.min_buy ? item.min_buy : 1;
				}
			}
			type == 'add' ? (item.cart_num += setp) : (item.cart_num -= setp);
			this.$forceUpdate();
			this.$api.sendRequest({
				url: '/api/cart/add',
				data: {
					num: item.cart_num,
					sku_id: item.sku_id,
					is_all: 1
				},
				success: () => {
					this.$store.dispatch('getCartNumber');
				}
			});
		},
		click() {
			this.$emit('click', this.item);
		},
		goodsImg(imgStr) {
			let imgs = imgStr.split(',');
			return imgs[0]
				? this.$util.img(imgs[0], {
						size: 'mid'
				  })
				: this.$util.getDefaultImage().goods;
		},
		goodsTag(data) {
			return data.label_name || '';
		},
		showPrice(data) {
			let price = data.discount_price;
			if (data.member_price && parseFloat(data.member_price) < parseFloat(price))
				price = data.member_price;
			return price;
		}
	}
};
</script>

<style lang="scss" scoped>
.input-number {
	line-height: 30rpx;
}

.recommend-item {
	width: 328rpx;
	border-radius: 16rpx;
	background-color: #fff;
	margin-bottom: 30rpx;
	position: relative;
	width: 100%;
	overflow: auto;

	.tag {
		width: 64rpx;
		height: 36rpx;
		text-align: center;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		line-height: 36rpx;
		background: rgba(33, 187, 243, 0.08);
		border-radius: 8rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: $base-color;
	}

	.sales {
		top: calc(320rpx - 44rpx);
		width: 100%;
		position: absolute;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ffffff;
		line-height: 44rpx;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.labels-1 {
		margin-top: 10rpx !important;

		.label-item {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 1;
			-webkit-box-orient: vertical;
			font-size: 24rpx !important;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999 !important;
			line-height: 40rpx !important;
		}
	}

	.cover {
		width: 328rpx;
		height: 328rpx;
		border-radius: 16rpx 16rpx 0 0;
	}

	.content {
		padding: 0 20rpx;

		.title {
			height: 80rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
		}

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

			.price {
				height: 104rpx;
				font-size: 24rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				color: #f33b50;
				margin-top: 24rpx;

				.price1 {
					font-size: 40rpx;
				}
			}
		}
	}
}

.recommend-item2 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24rpx;

	image {
		width: 160rpx;
		height: 160rpx;
	}

	.recommend-item2-main {
		flex: 1;

		.title2 {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
			margin-bottom: 16rpx;
		}

		.describe {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 32rpx;
			margin-bottom: 8rpx;
		}

		.price2 {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ef6154;
			line-height: 32rpx;
			display: flex;
			align-items: center;

			.cancel-price {
				color: #999999;
				text-decoration: line-through;
				margin-left: 16rpx;
			}
		}

		.price3 {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ef6154;
			line-height: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.cancel2-price {
				color: #999999;
				text-decoration: line-through;
				margin-left: 16rpx;
				flex: 1;
			}

			.payNumber {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 32rpx;
			}
		}
	}
}
</style>
