<template>
	<view>
		<u-popup key="1" :show="pricespop" :round="10" @close="closePup">
			<view class="proListPrice" v-if="proPriceList.length > 0">
				<view class="title">
					请选择
				</view>
				<view class="list">
					<view :class="['item',curProId == index ? 'active' : '']"
						v-for="(item,index) in proPriceList" :key="index" @click="choosePrice(item,index)">
						{{item.productName}} - ￥{{item.price}}
					</view>
				</view>
				<view class="tbn flexbox" style="padding-bottom: 20px;">
					<view class="saveBtnss buybtn flexbox" @click="oprate('buy')">
						<u-icon name="bag" color="#fff" size="28"></u-icon>
						<text>立即购买</text>
					</view>
					<!-- <view class="saveBtnss gouwuche flexbox" @click="oprate('gouwuche')">
						<uni-icons type="cart" size="28" style="color: #666;"></uni-icons>
						<text>加入购物车</text>
					</view> -->
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"buyPup",
		props:['proPriceList'],
		data() {
			return {
				pricespop:true,
				curProId:null,
				curPro:{}
			};
		},methods:{
			closePup() {
				this.pricespop = false
				this.$emit('closePup')
				
			},
			choosePrice(item,index) {
				console.log(index, 'choosePrice')
				this.curProId = index
				this.curPro = item
			},
			oprate(val){
				if(this.curProId==null){
					uni.showToast({
						title:'请选择您的课程',
						icon:'none'
					})
					return
				}
				if(val=='buy'){
					console.log('直接购买');
					this.$emit('oprate',{name:val,item:this.curPro,index:this.curProId})
				}else if(val == 'gouwuche'){
					console.log('加入购物车');
					this.$emit('oprate',{name:val,item:this.curPro,index:this.curProId})
				}
				this.closePup()
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/style/mixin.scss';
	.flexbox {
		display: flex;
	}
	.saveBtn {
		align-items: center;
		justify-content: center;
		height: 80rpx;
		background-color: #00d8df;
		// width: 46%;
		overflow: hidden;
		border-radius: 30rpx;
	
		text {
			padding-left: 10rpx;
			font-size: 28rpx;
			color: #fff;
		}
	}
	
	.vipBtn {
		@include theme("vipbtnbg");
		border-radius: 100rpx;
		justify-content: center;
		width: 150px;
		color: #fff;
		margin: 10rpx auto;
	}
	
	.buyBox {
		// position: fixed;
		// z-index: 2;
		// bottom: 100rpx;
		// left: 0;
		@include pleft_right(4px);
		// @include mshadow(10px, 1);
		padding: 20rpx 10rpx;
		width: 100%;
		font-size: 28rpx;
		flex-wrap: wrap;
		background-image: linear-gradient(60deg, #e0e9f6 0%,#ece6fa 30%,#d7e8f0 60%, #fff 100%);
		// background: rgba(255, 255, 255, 0.9);
	
		.item {
			width: 100%;
			text-align: center; line-height: 70rpx !important;
	
		}
	
		.tbn {
			align-items: center;
		}
	
		.buybtn {
			color: #fff;
		}
	}
	.proListPrice {
		text-align: center;

		.title {
			font-size: 28rpx;
			margin: 10px 0;
		}

		.list {
			padding: 0 10px;
			padding-bottom: 20rpx;

			.item {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 10rpx;
				padding-top:20rpx ;
				padding-bottom:20rpx ;
				line-height:40rpx;
				border-radius: 50rpx;
				border: 1px solid #eee;
			}

			.item.active {
				color: $themeColor;
				border: 1px solid $themeColor;
			}

			.item:last-child {
				// border-bottom: none
			}
		}

		.tbn {
			justify-content: center;
		}

		.buybtn { padding: 0 20rpx;
			background-color: #00d8df;
			margin: 0;
			margin-right: 20rpx;

			text {
				color: #fff;
			}
		}

		.saveBtnss {
			align-items: center;
			justify-content: center;
			height: 80rpx;

			// width: 46%;
			overflow: hidden;
			border-radius: 50rpx;

			text {
				padding-left: 10rpx;
				font-size: 28rpx;

			}
		}

		.gouwuche {
			border: 1px solid #666;
			padding-right: 20rpx;

			text {
				// color: #fff;
			}
		}
	}
</style>