<template>
	<view class="navas">
		<img class="nav-lefts" src="https://www.jiubaotongxue.love/image/nav10.png" alt="" @click="getNavs" />
		<view class="lefts-txt"  style="font-size: 36rpx;">
			洗车付款
		</view>
	</view>
	<view class="implement">
		<view class="tops">

		</view>
		<view class="title" :class="{titleActive:headerIndex===1,titleActives:headerIndex===2}">
			<view class="lefts" @click="remo">
				购买套餐
				<view class="line" v-if="headerIndex===1">
		
				</view>
			</view>
			<view class="lefts" @click="add">
				使用次卡
				<view class="line" v-if="headerIndex===2">
		
				</view>
			</view>
		</view>
		<view class="headers">
	
			<view class="box" v-if="headerIndex===1">
				<view class="cardTime" v-for="(item,index) in infos" :key="item.id" @click="yuChecks(index)">
					<view class="cardCcc">
						<text> <text class="color-r">{{item.minute}}</text>分钟 </text>
						<text class="cardTime-left"> <text class="color-r">￥{{item.amount}}</text></text>
						<text class="cardTime-lefts">￥{{item.amount}}</text>
					</view>
					<view class="chekcka">
						<text>10.0折</text>
						<view class="chekcka-i" :class="{iactive:yuIndex===index}">

						</view>
					</view>
				</view>


			</view>
			<scroll-view class="secondaryCard-auto" scroll-y="true" v-if="headerIndex===2">
				<view class="card" :class="{cardA:cardIndex===index}" v-for="(item,index) in cardDataValidCards"
					:key="item.id" @click="goChecks(index)">
					<text class="reds">剩余<text class="color-r">{{item.useNumber}}</text>次</text>
					<img class="card-l" src="https://www.jiubaotongxue.love/image/demo73.png" alt="" />
					<view class="card-c">
						<view class="t">
							<text class="w"><text class="blacks">{{item.cardCounts}}</text>次洗车卡套餐</text>
						</view>
						<view class="c">
							<!-- <text class="color-r">20</text>分钟 -->
							每次上限使用{{item.minute}}分钟
						</view>
						<view class="d">
							生效中,有效期至 {{item.endTime}}
						</view>
					</view>
					<view class="card-r" @click="goCiPlay(index)">
						使用
					</view>
					<!-- <view class="card-r1" v-if="headerindex===2">
					
				</view> -->
				</view>
			</scroll-view>
			<view class="ding">

			</view>
		</view>
		<view class="playCheck" v-if="headerIndex===1">
			<view class="palys" @click="weiPly">
				<view class="play-left">
					<img class="i" src="https://www.jiubaotongxue.love/image/demo54.png" alt="" />
					<text class="txt">微信支付</text>
				</view>
				<view class="right-i" :class="{iactive:payIndexs===0}">
				
				</view>
			</view>
			<view class="lines">

			</view>
			<view class="palys" @click="yuPay">
				<view class="play-left">
					<img class="i" src="https://www.jiubaotongxue.love/image/pay1.png" alt="" />
					<text class="txt">余额支付</text>
				</view>
				<view class="right-i" :class="{iactive:payIndexs===1}">

				</view>
			</view>
		</view>
	</view>
	<view class="bottoms" v-if="headerIndex===1">
		<text class="bottoms-left">合计实付： <text class="color-r">￥{{infos[yuIndex].amount}}</text> </text>
		<view class="btn" @click="goPays">
			结算
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,onReady
	} from "@dcloudio/uni-app"
	import {
		rechagePlay
	} from '../../stor/rechagePlay/rechagePlay.js'
	import {
		storeToRefs
	} from 'pinia';
	import {
		storindex
	} from '../../stor/index.js'
	import {
		getCard
	} from '../../stor/getCard/getCard.js'
	const r = rechagePlay()
	const s = storindex()
	const g = getCard()
	// const {}  =storeToRefs(s)
	const {
		infos,
		rechageCardData
	} = storeToRefs(r)
	const {
		cardDataValidCards
	} = storeToRefs(g)
	g.getCards()
	const headerIndex = ref(1)
	const titles = ref('购买套餐')
	const bgcolor = ref('#fff')
	const color = ref('#000')
	const cardIndex = ref(0)
	const yuIndex = ref(0)
	const payIndexs = ref(0)
	onLoad((options) => {
		r.getInfoaApi(options.id)
	})
	const remo = () => {
		headerIndex.value = 1
	}
	const add = () => {
		headerIndex.value = 2
	}
	const complete = () => {
		uni.navigateTo({
			url: "/pages/complete/complete"
		})
	}
	const getNavs = () => {
		uni.switchTab({
			url:"/pages/index/index"
		})
	}
	const goChecks = (index) => {
		cardIndex.value = index
	}
	const goCiPlay = (index) => {
		if (cardIndex.value === index) {
			// console.log("使用");
			s.ciPlay(cardDataValidCards.value)
		}
	}
	const yuChecks = (index) => {
		yuIndex.value=index
		s.getMiaoshu(infos.value[index])
	}
	const weiPly = ()=>{
		payIndexs.value=0
	}
	
	const yuPay =()=>{
		payIndexs.value=1
	}
	const goPays = ()=>{
		//微信支付
		if(payIndexs.value===0){
			s.wxPlay(infos.value[yuIndex.value])
		}
		//余额支付
		else if(payIndexs.value===1){
			s.yuePlay(infos.value[yuIndex.value])
		} else{
			
			console.log("错误");
		}
	}
	// s.getMiaoshu(infos.value[yuIndex.value])
</script>

<style lang="scss">
	.navas {
		width: 100%;
		height: 464rpx;
		background-image: url("https://www.jiubaotongxue.love/image/demo59.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: fixed;
		top: 0rpx;
		z-index: 90;

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

		.lefts-txt {
			position: absolute;
			font-size: 36rpx;
			color: #000000;
			top: 108rpx;
			left: 304rpx;
		}
	}

	.implement {
		width: 100%;
		height: 100%;
		background-color: #f2f2f2;
		position: absolute;

		.tops {
			width: 100%;
			height: 11%;
			background-color: #f2f2f2;
			position: relative;
			margin-top: 40rpx;
		}
		
		.title {
			width: 100%;
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			color: black;
			position: relative;
			z-index: 180;		
			.lefts {
				width: 50%;
				height: 84rpx;
				position: relative;
				// border-radius: 40rpx 0rpx 40rpx 0rpx;
				// background-color: #439BFE;
		
				.line {
					position: absolute;
					left: 50%;
					transform: translateX(-50%);
					bottom: 2rpx;
					width: 60rpx;
					height: 8rpx;
					background-color: #009dd9;
				}
			}
		
			
			
		}
		.titleActive{
			color: #009dd9;
			// border-radius: 20rpx 20rpx 40rpx 0rpx;
			background-image: url("https://www.jiubaotongxue.love/image/demo92.png");
		}
		.titleActives{
			color: #009dd9;
			// border-radius: 20rpx 20rpx 40rpx 0rpx;
			background-image: url("https://www.jiubaotongxue.love/image/demo93.png");
		}
		.headers {
			position: relative;
			width: 100%;
			margin-left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			margin-top: -0rpx;
			padding-top: 10rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			z-index: 100;


			.box {
				width: 100%;

				.cardTime {
					width: 90%;
					height: 144rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					line-height: 120rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					box-sizing: border-box;
					padding-left: 30rpx;
					padding-right: 30rpx;
					border: 1rpx solid #009dd9;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					font-size: 28rpx;
					margin-top: 40rpx;

					.cardCcc {
						display: flex;
						align-items: center;
						width: 70%;
						font-size: 32rpx;

						.cardTime-left {
							display: block;
							margin-left: 10rpx;
							font-size: 48rpx;
							color: #FF7733;
						}

						.cardTime-lefts {
							display: block;
							margin-left: 30rpx;
							font-size: 32rpx;
							color: #ccc;
							text-decoration: line-through;
						}
					}

					.chekcka {
						width: 160rpx;
						height: 44rpx;
						font-size: 30rpx;
						color: #ccc;
						display: flex;
						line-height: 44rpx;
						justify-content: space-between;

						.chekcka-i {
							width: 44rpx;
							height: 44rpx;
							border-radius: 50%;
							border: 1rpx solid #666;
							background-size: 100% 100%;
						}

						.iactive {
							border: none;
							background-image: url("https://www.jiubaotongxue.love/image/xuanzhong.png");
						}
					}

				}

				.cardActive {
					background-color: black;
					color: white;

					.color-r {
						color: #d9001b;
					}
				}
			}

			.secondaryCard-auto {
				width: 100%;
				max-height: 800rpx;
				position: relative;

				.card {
					width: 88%;
					height: 200rpx;
					background-color: white;
					position: relative;
					margin-left: 50%;
					transform: translateX(-50%);
					margin-top: 45rpx;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border: 1rpx solid #eee;

					.reds {
						width: 120rpx;
						height: 40rpx;
						display: block;
						position: absolute;
						left: 0rpx;
						top: 0rpx;
						text-align: center;
						line-height: 40rpx;
						background: linear-gradient(99deg, #FFE8A2 0%, #FBD269 100%);
						color: #A45417;
						border-radius: 16rpx 0rpx 16rpx 0rpx;
						font-size: 20rpx;
						// .color-r{
						// 	color: #da0722;
						// 	font-size: 35rpx;
						// }
					}

					.card-l {
						width: 152rpx;
						height: 128rpx;
						// border-radius: 50%;
						// border: 1rpx solid #666;
						margin-left: 30rpx;

					}

					.card-c {
						width: 50%;
						height: 200rpx;
						font-size: 28rpx;
						box-sizing: border-box;
						padding-left: 20rpx;

						.t {
							width: 100%;
							display: flex;
							margin-top: 36rpx;
							justify-content: space-between;
							font-size: 30rpx;
							color: black;
							// .w{
							// 	font-weight: 700;
							// 	letter-spacing: 5rpx;
							// 	.blacks{
							// 		font-size: 35rpx;
							// 	}

							// }


						}

						.c {
							width: 100%;

							font-size: 26rpx;
							color: black;
							margin-top: 15rpx;

							.color-r {
								color: #da0722;
								font-size: 35rpx;
							}
						}

						.d {

							width: 100%;
							margin-top: 15rpx;
							box-sizing: border-box;
							font-size: 20rpx;
							color: #777;
						}
					}

					.card-r {
						width: 120rpx;
						height: 60rpx;
						background-color: white;
						text-align: center;
						line-height: 60rpx;
						margin-right: 20rpx;
						border-radius: 10rpx 10rpx 10rpx 10rpx;
						color: #1a97f7;
						border: 1rpx solid #1275F7;
						border-radius: 30rpx;
						font-size: 26rpx;
					}

					.card-r1 {
						width: 88rpx;
						height: 88rpx;
						background-image: url("https://www.jiubaotongxue.love/image/demo74.png");
						background-size: 100% 100%;
						text-align: center;
						line-height: 50rpx;
						margin-left: 20rpx;
						margin-right: 40rpx;
						border-radius: 50%;
						color: #1a97f7;
					}
				}

				.cardA {
					border: 1rpx solid #1275F7;
				}

				.cardActive {
					border: 1rpx solid #1a97f7;
				}
			}

			.ding {
				width: 100%;
				height: 50rpx;
			}
		}

		.playCheck {
			width: 96%;
			height: 300rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			position: relative;

			.palys {
				width: 100%;
				height: 150rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				.play-left {
					width: 50%;
					height: 110rpx;
					display: flex;
					align-items: center;
					margin-left: 50rpx;

					.i {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						// border: 1rpx solid red;
					}

					.txt {
						display: block;
						margin-left: 20rpx;
						font-size: 26rpx;
					}
				}

				.right-i {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
					border: 1rpx solid #666;
					margin-right: 80rpx;
				}

				.iactive {
					background-size: 100% 100%;
					border: none;
					background-image: url("https://www.jiubaotongxue.love/image/xuanzhong.png");
				}
			}

			.lines {
				width: 90%;
				border-top: 1rpx dashed #ccc;
				margin-left: 50%;
				transform: translateX(-50%);
			}
		}

	}

	.bottoms {
		width: 100%;
		height: 120rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0rpx;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding-left: 50rpx;

		.bottoms-left {
			font-size: 28rpx;

			.color-r {
				color: #FF8F23;
				font-size: 40rpx;
			}
		}

		.btn {
			width: 252rpx;
			height: 84rpx;
			background: linear-gradient(276deg, #1C9FF7 0%, #1275F7 100%);
			text-align: center;
			line-height: 84rpx;
			color: white;
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			margin-right: 30rpx;
			margin-top: 18rpx;
		}
	}
</style>