<template>
	<view class="product-list">
		<view
		class="check-order-list" 
		 v-for="(sub,i) in item.list" 
		 :key="i"
		>
			<view class="video-item" >
				<view>
					<u-image :src="sub.productImage+'?x-oss-process=image/resize,p_50'" height="140px" width="100%"></u-image>
					<view class="back-price" v-if="sub.promoRuleValue">返<text>{{sub.promoRuleValue}}</text>元</view>
					<view class="product-code">{{sub.productCode}}</view>
				</view>
				<view>
					<view class="product-name">{{sub.productName}}</view>
					<view class="product-guige ellipsis-two">{{sub.productOrigCode}}</view>
					<view class="product-button">
						<view class="price-txt">￥<text>{{sub.cost}}</text></view>
						<view @click="chooseProduct(sub)">
							<view class="cart-add" :class="!sub.checked?'colr-add':'colr-checks'">
								<u-icon v-if="!sub.checked" color="#fff" name="plus"></u-icon>
								<view v-else>
									<u-icon name="plus" color="#fff"></u-icon>{{sub.qty}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		 </view>
	</view>
</template>

<script>
	export default {
	name:"virtual-promo-product",
	props: {
		item: null,
		index: 0,
		extraData: null
	},
	data() {
		return {
			
		};
	},
	methods: {
		chooseProduct(row){
			//如果要把点击事件传给页面，可以通过给extraData中添加对应的函数，然后在当前组件中触发这个函数，在页面中监听即可
			//注意，微信小程序中无法通过props传递事件，在微信小程序中可以使用uni.$emit、uni.$on代替
			if(this.extraData.chooseProduct){
				this.extraData.chooseProduct(row);
			}
		}
	}
}
</script>

<style lang="less">
.product-list{
	display: flex;
	flex-wrap: wrap;
}
.check-order-list{
	width: 50%;
	padding: 10upx;
	.video-item{
		background: #ffffff;
		border-radius: 10upx;
		box-shadow: 1px 1px 3px #EEEEEE;
		height: 100%;
		display: flex;
		flex-direction: column;
		> view{
			&:first-child{
				position: relative;
				overflow: hidden;
				border-bottom: 1px solid #eee;
				.product-code{
					color: #666;
					position: absolute;
					width: 100%;
					left:0;
					bottom:0;
					background: rgba(255,255,255,0.7);
					text-align: center;
				}
			}
			&:last-child{
				padding: 20rpx 20rpx 70rpx 20rpx;
				position: relative;
				flex-grow: 1;
				.product-name{
					font-size: 28rpx;
				}
				.product-guige{
					margin: 10rpx 0 20rpx 0;
					color: #2196F3;
					text{
						margin-right: 10rpx;
					}
				}
			}
			.product-button{
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: absolute;
				bottom: 20rpx;
				left: 0;
				width: 100%;
				padding: 0 20rpx;
			}
			.cart-add{
				padding: 6rpx 15rpx;
				border-radius: 30rpx;
				background: #2196F3;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
			}
			.colr-add{
				background: #2196F3;
				padding: 10rpx 20rpx;
			}
			.colr-checks{
				background: #00aa00;
			}
		}
	}
	}
</style>