<template>
	<view class="charge">
		<view class="tops">
			<img class="nav-img" src="https://www.jiubaotongxue.love/image/nav10.png" alt="" @click="getNavs" />
			<view class="title" style="font-size: 36rpx;">
				拉新券使用
			</view>
		</view>
		<view class="topss">

		</view>

		<scroll-view scroll-y="true" class="scrol">
			<view class="big">
				<view class="card" v-for="(item,index) in couponsData" :key="item.id" @click="checkCoupons(index)">
					<view class="boxs" v-if="item.status===1&& headerindex===1&&item.couponName" :class="{couponsActive:couponsIndexs===index}">
						<view class="boxs-left">
							<text class="boxs-left-top" v-if="item.couponName==='拉新洗车券'">新</text>
							<text class="boxs-left-tops" v-if="item.couponName==='拉新洗车券'">拉新券</text>
							<text class="boxs-left-top" v-if="item.couponName==='停车场优惠卷'">停</text>
							<text class="boxs-left-tops" v-if="item.couponName==='停车场优惠卷'">停车券</text>
							<text class="boxs-left-top" v-if="item.couponName==='拉新折扣券'">拉</text>
							<text class="boxs-left-tops" v-if="item.couponName==='拉新折扣券'">拉新折扣券</text>
						</view>
						<view class="boxs-right">
							<view class="boxs-right-top">
								{{item.couponName}}
							</view>
							<view class="boxs-right-tops">
								{{item.endTime}}
							</view>
							<view class="line">

							</view>
							<view class="boxs-right-bottom">
								<!-- 每次上线使用20分钟 -->{{item.rule}}({{item.freeTime}}分钟)
							</view>
						</view>
						<view class="boxs-Btn">
							{{item.freeTime}}分钟
						</view>
					</view>

					<view class="boxs" v-if="item.status===0&&headerindex===2">
						<view class="boxs-left">
							<text class="boxs-left-top" v-if="item.couponName==='拉新洗车券'">新</text>
							<text class="boxs-left-tops" v-if="item.couponName==='拉新洗车券'">拉新券</text>
							<text class="boxs-left-top" v-if="item.couponName==='停车场优惠卷'">停</text>
							<text class="boxs-left-tops" v-if="item.couponName==='停车场优惠卷'">停车券</text>
						</view>
						<view class="boxs-right">
							<view class="boxs-right-top">
								{{item.couponName}}
							</view>
							<view class="boxs-right-tops">
								有效期:{{item.endTime}}
							</view>
							<view class="line">

							</view>
							<view class="boxs-right-bottom">
								<!-- 每次上线使用20分钟 -->{{item.rule}}
							</view>
						</view>
						<view class="boxs-Btns"
							:class="{boxsBtnsActives:item.status===2,boxsBtnsActive:item.status===0}">

						</view>
					</view>

				</view>
				<view class="kong" style="width: 100%;height: 1000rpx;text-align: center;"
					v-if="headerindex===1&&isShow===3">
					<img style="width: 480rpx;height: 400rpx;margin-top: 360rpx;margin-left: 50%;transform: translateX(-50%);"
						src="https://www.jiubaotongxue.love/image/demo111.png" alt="" />
					<view style="width: 100%;height: 50rpx;line-height: 50rpx;text-align: center;">
						暂无数据
					</view>
				</view>
				<view class="kong" style="width: 100%;height: 1000rpx;text-align: center;"
					v-if="headerindex===2&&isShowCoupons===0">
					<img style="width: 480rpx;height: 400rpx;margin-top: 360rpx;margin-left: 50%;transform: translateX(-50%);"
						src="https://www.jiubaotongxue.love/image/demo111.png" alt="" />
					<view style="width: 100%;height: 50rpx;line-height: 50rpx;text-align: center;">
						暂无数据
					</view>
				</view>

			</view>
		</scroll-view>
		<view class="charge-play">
			<view class="charge-body-title">
				{{couponsData[couponsIndexs].rule}}可洗车{{couponsData[couponsIndexs].freeTime}}分钟
			</view>
			<view class="charge-play-icon">
				<view class="icon-left">
					<img class="icon-img" src="https://www.jiubaotongxue.love/image/demo54.png" alt="" />
					<text>微信支付</text>
				</view>
				<view class="icon-right icon-active">
		
				</view>
			</view>
		</view>
		<view class="charge-btnPlay">
			<text class="charge-btnPlay-left">支付：<text class="pricess">{{couponsData[couponsIndexs].amount}}</text> </text>
			<view class="plays" @click="goPlays">
				去支付
			</view>
		</view>
	</view>
	<!-- <explain v-if="explainShow===1" @close="close"></explain> -->
	<windows v-if="ccc===1" @cloSe="cloSe" @oks="oks" :titleMsg="titleMsg"></windows>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		coupons
	} from '../../stor/Coupons/coupons.js'
	import {
		storeToRefs
	} from 'pinia';
	const c = coupons()
	const {
		isShowCoupons,
		couponsData,
		que,
		isShow,
		couponsIndexs
	} = storeToRefs(c)
	c.getcouponsData()

	onLoad(() => {
		console.log(isShowCoupons, isShow);
	})
	const headerindex = ref(1)

	const titles = ref('券列表')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const ccc = ref(0)
	const quan = ref(0)
	const couponsIndex = ref(0)
	const remo = () => {
		headerindex.value = 1
	}
	const add = () => {
		headerindex.value = 2
	}
	//使用优惠券
	const xiche = (index) => {
		quan.value = index
		if (couponsData.value[index].type === 0) {
			c.scanQrcode(couponsData.value[index])

		} else if (couponsData.value[index].type === 2) {
			ccc.value = 1
		} else {
			c.getYouHuiApi(couponsData.value[index].id)
		}

	}
	const quedingsa = () => {
		c.goStar()
	}
	const quedinga = () => {
		c.quexio()
	}

	const goOks = () => {
		c.getYouHuiApi(couponsData.value[quan.value].id)
		ccc.value = 0
	}
	
	const checkCoupons = (index)=>{
		couponsIndexs.value=index
	}
	const goPlays = ()=>{
		c.wxPlay(couponsData.value[quan.value])
	}
	const getNavs = ()=>{
		uni.navigateBack()
	}
</script>

<style lang="scss">
	.charge {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f2f2f2;

		.tops {
			width: 100%;
			position: fixed;
			height: 318rpx;
			// background: linear-gradient(113deg, #65AAFB 0%, #60A7FB 100%);
			background-image: url("https://www.jiubaotongxue.love/image/demo56.png");
			background-size: 100% 100%;
			// z-index: 9;

			.nav-img {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				top: 100rpx;
				left: 20rpx;
			}

			.title {
				width: 100%;
				height: 50rpx;
				line-height: 50rpx;
				font-size: 36rpx;
				position: absolute;
				top: 108rpx;
				left: 304rpx;
			}
		}

		.topss {
			width: 100%;
			height: 260rpx;
		}

		.scrol {
			width: 100%;
			height: 60%;

			.big {
				width: 100%;
				height: 100%;

				.card {
					width: 694rpx;
					margin-left: 50%;
					transform: translateX(-50%);

					.boxs {
						width: 694rpx;
						height: 208rpx;
						margin-top: 20rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;

						.boxs-left {
							width: 234rpx;
							height: 208rpx;
							background-image: url("https://www.jiubaotongxue.love/image/demo43.png");
							background-size: 100% 100%;

							.boxs-left-top {
								display: block;
								width: 100%;
								height: 66rpx;
								line-height: 66rpx;
								text-align: center;
								margin-top: 46rpx;
								font-size: 48rpx;
								color: white;
							}

							.boxs-left-tops {
								display: block;
								width: 100%;
								height: 40rpx;
								line-height: 40rpx;
								text-align: center;
								font-size: 28rpx;
								color: white;
								margin-top: 12rpx;
							}
						}

						.boxs-right {
							width: 460rpx;
							height: 208rpx;
							background-image: url("https://www.jiubaotongxue.love/image/demo44.png");
							background-size: 100% 100%;
							box-sizing: border-box;
							padding-left: 28rpx;

							.boxs-right-top {
								width: 100%;
								height: 42rpx;
								font-weight: 500;
								font-size: 30rpx;
								color: #242526;
								line-height: 42rpx;
								margin-top: 34rpx;
								font-weight: 700;
							}

							.boxs-right-tops {
								width: 100%;
								height: 34rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(36, 37, 38, 0.5);
								line-height: 34rpx;
								font-style: normal;
								margin-top: 14rpx;
							}

							.line {
								width: 100%;
								height: 2rpx;
								border-top: 1rpx solid #E6E6E6;
								margin-top: 16rpx;
							}

							.boxs-right-bottom {
								width: 100%;
								height: 34rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: rgba(36, 37, 38, 0.5);
								line-height: 34rpx;
								margin-top: 16rpx;
							}

						}

						.boxs-Btn {
							position: absolute;
							right: 28rpx;
							top: 28rpx;
							width: 88rpx;
							height: 48rpx;
							text-align: center;
							line-height: 48rpx;
							font-size: 22rpx;
							color: white;
							background: linear-gradient(135deg, #FEB44C 0%, #FF8833 100%);
							border-radius: 25rpx 25rpx 25rpx 25rpx;
						}

						.boxs-Btns {
							position: absolute;
							right: 24rpx;
							top: 24rpx;
							width: 88rpx;
							height: 88rpx;
							border-radius: 50%;
							background-size: 100% 100%;
						}

						.boxsBtnsActive {
							background-image: url("https://www.jiubaotongxue.love/image/demo45.png");
						}

						.boxsBtnsActives {
							background-image: url("https://www.jiubaotongxue.love/image/demo46.png");
						}
					}
					.couponsActive{
						border: 1rpx solid #3f95ff;
					}
				}
				
			}
		}
		.charge-play {
			width: 92%;
			height: 200rpx;
			// background-color: #ffffff;
			margin-left: 50%;
			transform: translateX(-50%);
			// margin-top: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
		
			.charge-body-title {
				width: 100%;
				height: 80rpx;
				box-sizing: border-box;
				line-height: 80rpx;
				padding-left: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
				color: #666;
			}
		
			.charge-play-icon {
				width: 100%;
				height: 110rpx;
				margin-top: 15rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
		
				.icon-left {
					width: 260rpx;
					height: 90rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rp;
		
					.icon-img {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						margin-left: 30rpx;
					}
				}
		
				.icon-right {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					border: 1rpx solid #666;
					margin-right: 50rpx;
				}
		
				.icon-active {
					border: none;
					background-size: 100% 100%;
					background-image: url("https://www.jiubaotongxue.love/image/xuanzhong.png");
				}
			}
		}
		.charge-btnPlay {
			position: fixed;
			bottom: 0rpx;
			width: 100%;
			height: 140rpx;
			background-color: white;
			line-height: 140rpx;
			color: white;
			display: flex;
			justify-content: space-between;
			// bottom: constant(safe-area-inset-bottom);
			// bottom: env(safe-area-inset-bottom);
			box-sizing: border-box;
			padding-left: 30rpx;

			.charge-btnPlay-left {
				color: black;
				font-size: 30rpx;

				.pricess {
					font-size: 40rpx;
					color: #FF7733;
				}
			}

			.plays {
				width: 280rpx;
				height: 96rpx;
				background: linear-gradient(135deg, #4D97FF 0%, #3377FF 100%), linear-gradient(276deg, #1C9FF7 0%, #1275F7 100%);
				box-shadow: 0rpx 8rpx 18rpx 0rpx rgba(5, 128, 255, 0.2);
				border-radius: 50rpx;
				text-align: center;
				line-height: 96rpx;
				margin-right: 30rpx;
				margin-top: 20rpx;
			}
		}
	}
</style>