<template>
	<view>
		<!-- 购买弹窗 -->
		<view class="dlg" v-if="visible" @click="close">
			<view>
				<view class="buy-main" @click.stop="">
					<view class="buy-header">
						<image src="@/static/new/index/zs.png" mode="" class="header-icon"></image>
						<view class="header-txt">逢抽必中</view>
						<image src="@/static/new/index/zs.png" mode="" class="header-icon"></image>
					</view>
					<view class="dlg-tip">两件包邮/正品保障</view>
		
					<view class="btn-main">
						<template v-for="(item,index) in item.price">
							<view class="btn-buy one" v-if="item.type === 'SINGLE'" @click="goBuy(item.type)">
								<image src="@/static/new/index/1-txt.png" mode="aspectFit" class="buy-title"></image>
							</view>
							<view class="btn-buy three" v-if="item.type === 'TRIPLE'" @click="goBuy(item.type)">
								<view class="tips">9折</view>
								<image src="@/static/new/index/3-txt.png" mode="aspectFit" class="buy-title"></image>
							</view>
							<view class="btn-buy five" v-if="item.type === 'PENTA'" @click="goBuy(item.type)">
								<view class="tips">8折</view>
								<image src="@/static/new/index/5-txt.png" mode="aspectFit" class="buy-title"></image>
							</view>
						</template>
		
					</view>
				</view>
				<image src="@/static/order/close.png" mode="" class="close-buy" @click="close"></image>
			</view>
		</view>
		<TipCom :visible="tipVisible" @close="tipClose" @click="immediate" @nonuse="nonuse"></TipCom>
	</view>
</template>

<script>
	import TipCom from './tip.vue'
	import {
		promptCountApi
	} from '@/API/index.js'
	export default {
		data() {
			return {
				tipVisible:false,
				buyType:'',//购买类型
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			item: {
				type: Object,
				default: () => {}
			}
		},
		components:{
			TipCom
		},
		mounted() {

		},
		methods: {
			// 关闭弹框
			close() {
				this.$emit('close')
			},
			// 购买
			goBuy(type) {
				this.buyType = type
				this.tipVisible = true
				// 用提示卡时打开提示卡组件
				// promptCountApi().then(res => {
				// 	if(res.data === '0'){
				// 		uni.navigateTo({
				// 			url:`/pages/index/boxOrderConfirm?boxId=${this.item.id}&type=${type}`
				// 		})
				// 	}else{
				// 		this.tipVisible = true
				// 	}
					
				// })
				// this.$emit('click', type)
			},
			// 不使用提示卡
			nonuse(){
				this.tipVisible = false
				this.$emit('click')
				uni.navigateTo({
					url:`/pages/index/boxOrderConfirm?boxId=${this.item.id}&type=${this.buyType}`
				})
			},
			// 使用提示卡
			immediate(){
				this.tipVisible = false
				this.$emit('click')
				uni.navigateTo({
					url:`/pages/index/card?boxId=${this.item.id}&type=${this.buyType}`
				})
			},
			// 关闭提示卡弹框组件
			tipClose(){
				this.tipVisible = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.dlg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 9999;
		display: flex;
		align-items: center;
		justify-content: center;

		.dlg-main {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			.dlg-swiper {
				// width: 402rpx;
				width: 750rpx;
				height: 580rpx;
				border-radius: 20rpx;

				.dlg-swiper-item {
					width: 468rpx;
					height: 580rpx;
					border-radius: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.dlg-swiper-img {
						width: 468rpx;
						height: 580rpx;
						border-radius: 20rpx;
						background-repeat: no-repeat;
						background-size: 100%;
						background-position: center;
						transform: scale(1);
						transition: transform 0.3s ease-in-out 0s;
					}
				}

			}

			.dlg-close-img {
				margin-top: 23rpx;
				width: 64rpx;
				height: 64rpx;
				z-index: 9999;
			}
		}

		.activity-main {
			flex-direction: column;
			width: 480rpx;
			height: 608rpx;
			background-image: url('@/static/new/box/hdtc.png');
			background-repeat: no-repeat;
			background-size: 100%;

			.dlg-title {
				display: block;
				margin: 0 auto;
				width: 148rpx;
				height: 52rpx;
			}

			.activity-img {
				width: 448rpx;
				height: 440rpx;
				border-radius: 20rpx;
				border: 1px solid red;
				display: block;
				margin: 20rpx auto;
				z-index: 2;
			}

			.now-buy {
				width: 348rpx;
				// height: 120rpx;
				display: block;
				margin: -120rpx auto 0 auto;
				z-index: 1;
			}

			.dlg-close-img {
				display: block;
				width: 64rpx;
				height: 64rpx;
				z-index: 9999;
				margin: -120rpx auto 0 auto;
			}
		}

		.buy-main {
			width: 480rpx;
			height: 640rpx;
			background-image: url('@/static/new/index/bg.png');
			background-size: 100%;
			background-repeat: no-repeat;

			.buy-header {
				padding-top: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.header-icon {
					width: 24rpx;
					height: 24rpx;
				}

				.header-txt {
					font-weight: 800;
					font-size: 32rpx;
					color: #143D66;
					margin: 0 16rpx;
				}
			}

			.dlg-tip {
				text-align: center;
				margin-top: 8rpx;
				font-size: 24rpx;
				color: #528FCC;
			}

			.btn-main {
				height: 480rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.btn-buy {
					width: 400rpx;
					height: 188rpx;
					background-size: 100%;
					background-repeat: no-repeat;
					// display: flex;
					// justify-content: center;
					padding-left: 96rpx;
					padding-top: 52rpx;
					position: relative;

					.buy-title {
						width: 208rpx;
						height: 72rpx;
					}
					.tips{
						position: absolute;
						width: 158rpx;
						height: 40rpx;
						background: linear-gradient( 90deg, #39B2FF 0%, #3354FF 100%);
						border-radius: 20rpx 0px 20rpx 0px;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #FFFFFF;
						top: 20rpx;
						left: 44rpx;
					}
				}

				.one {
					background-image: url('@/static/new/index/1.png');
				}

				.three {
					background-image: url('@/static/new/index/3.png');
				}

				.five {
					background-image: url('@/static/new/index/5.png');
				}
			}
		}

		.close-buy {
			width: 64rpx;
			height: 64rpx;
			display: block;
			margin: 129rpx auto 0 auto;
		}

		.tip-dlg {
			.tip-main {
				width: 480rpx;
				height: 648rpx;
				background-image: url('@/static/new/tip/card.png');
				background-repeat: no-repeat;
				background-size: 100%;

				.tip-icon {
					width: 112rpx;
					height: 52rpx;
					display: block;
					margin: 0 auto;
				}

				.tip-txt {
					padding-top: 364rpx;
					font-weight: 800;
					font-size: 40rpx;
					color: #143D66;
					text-align: center;
				}

				.tip-sub {
					margin: 0 auto;
					margin-top: 24rpx;
					width: 352rpx;
					font-size: 24rpx;
					color: #528FCC;
				}
			}

			.tip-btn {
				margin-top: 64rpx;
				width: 480rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.btn-icon {
					width: 228rpx;
					height: 96rpx;
					font-size: 44rpx;
					color: rgba(255, 255, 255, 0.9);
					display: flex;
					align-items: center;
					justify-content: center;
					font-family: YouSheBiaoTiHei;
				}

				.now {
					background-image: url('@/static/new/tip/btn.png');
					background-repeat: no-repeat;
					background-size: 100%;
				}
			}

			.close-tip {
				width: 64rpx;
				height: 64rpx;
				display: block;
				margin: 84rpx auto 0 auto;
			}
		}
	}
</style>