<template>
	<scroll-view class="integral" scroll-y="true">
		<view class="navs">
			<img class="nav-i" src="https://www.jiubaotongxue.love/image/nav10.png" alt="" @click="btnBack" />
			<view class="nav-txt"  style="font-size: 36rpx;">
				积分换礼
			</view>
		</view>
		<view class="top">

		</view>
		<view class="integral-header">
			<img class="integral-header-i" :src="wxImg ? wxImg :'https://www.jiubaotongxue.love/image/demo62.png'"
				alt="" />
			<view class="boxs">
				<text class="bosx-txt">{{wxName ? wxName :'元芳'}}</text>
				<view class="boxs-i">
					<img class="boxs-img" src="https://www.jiubaotongxue.love/image/demo63.png" alt="" v-if="Information.vip===0" />
					<img class="boxs-img" src="https://www.jiubaotongxue.love/image/zhizhun2.png" alt="" v-if="Information.vip===1" />
				</view>
			</view>
		</view>
		<view class="integral-titles">
			<view class="title-fu">
				<view class="title-fu-t">
					<view class="title-l">
						<img class="title-img" src="https://www.jiubaotongxue.love/image/demo97.png" alt="" />
						<text class="txta">当前可用积分</text>
					</view>
					<text @click="goMyintegal">查看积分明细</text>
				</view>
				<view class="jifen">
					<text>{{Information.points}}</text>
					<text class="jifen-right">本月失效积分：<text
							style="font-size: 36rpx;color: black; font-weight: 600;">0</text> </text>
				</view>
			</view>
		</view>
		<view class="title-Stronge">
			商品列表
		</view>
		<scroll-view class="auto-boxs" scroll-y="true">
			<view class="dui-box">
				<view class="dui" v-for="(item,index) in shop " :key="index">
					<img class="dui-img" :src="item.image" alt="" />
					<view class="dui-txt">
						{{item.name}}
					</view>
					<view class="dui-b">
						<view class="dui-l">
							<img style="width: 24rpx; height: 24rpx;display: block;margin-left: 20rpx; "
								src="https://www.jiubaotongxue.love/image/demo96.png" alt="" />
							<text class="big">{{item.amount}}<text
									style="font-size: 20rpx;color: #EE611B;">积分</text></text>
						</view>
						<view class="qu" @click="goDuiHuan(index)">
							去兑换
						</view>
					</view>
				</view>
				<view class="dings">

				</view>
			</view>

		</scroll-view>
	</scroll-view>
	<view class="cart">
		<view class="cart-lefts" @click="demoBtn">
			<img class="i1" src="https://www.jiubaotongxue.love/image/demo64.png" alt="" />
			<view class="cart-zhizun">
				<view class="xa">
					<text class="i2"><text style="font-size: 22rpx;"><!-- 折后 --></text>{{sumJifen}}<text
							style="font-size: 22rpx;">积分</text> </text>
					<img style="width: 24rpx;height: 24rpx; display: block;margin-left: 5rpx;margin-top: 15rpx;"
						src="https://www.jiubaotongxue.love/image/demo65.png" alt="" />
				</view>
				<view style="margin-left: 20rpx; font-size: 20rpx; color: #666;" v-if="Information.vip===1">
					至尊会员优惠88折
				</view>
			</view>
			<view
				style="position: absolute;top: 14rpx;width: 30rpx;height: 30rpx;border-radius: 50%;left: 80rpx;
				 background-color: red;line-height: 30rpx;text-align: center;font-size: 22rpx;color: white;" v-if="numJifen>0">
				{{numJifen}}
			</view>
		</view>
		<view class="cart-rights" @click="succesBtn">
			结算
		</view>
	</view>
	<view class="cartWindow" v-show="demo!=0">
		<view class="cartWindow-Box">
			<view class="cartWindow-title">
				<text style="font-size: 30rpx; color: black;">已选 <text style="color: #666;">({{carShop.length}})</text>
				</text>
				<view class="cartWindow-title-right" style="display: flex;align-items: center;">
					<img style="width: 24rpx;height: 24rpx;" src="https://www.jiubaotongxue.love/image/delete1.png"
						alt="" />
					<!-- <text style="display: block;margin-left: 10rpx;">清空</text> -->
				</view>
			</view>
			<scroll-view scroll-y="true" class="autos">
				<view class="autoCartWindow">
					<view class="shop" v-for="(item,index) in carShop" :key="item.id">
						<view class="shop-left">
							<img class="shop-img" :src="item.image" alt="" />
							<view class="shop-box">
								<view class="shop-txt">
									{{item.name}}
								</view>
								<text class="xiaojifen">
									{{item.amount}}<text style="font-size: 22rpx;color: #EE611B;">积分</text>
								</text>
							</view>
						</view>
						<view class="shop-right">
							<img class="btnA" src="https://www.jiubaotongxue.love/image/jian1.png" alt=""
								@click="remove(index)" />
							<text style="font-size: 30rpx;">{{item.num}}</text>
							<img class="btnA" src="https://www.jiubaotongxue.love/image/jia1.png" alt=""
								@click="add(index)" />
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	<view class="succes" v-if="succes!=0">
		<view class="succesBox">
			<img class="succesBox-img" :src="demoUrl" alt="" />
			<view style="width: 100%; text-align: center;margin-top: 32rpx;font-size: 32rpx;">
				{{demoTxt}}
			</view>
			<view style="width: 100%; text-align: center;margin-top: 24rpx;font-size: 32rpx;color: #666666;">
				{{demoTxts}}
			</view>
			<view class="btns" @click="succesBtn">
				确定
			</view>
		</view>

	</view>
</template>
<script setup>
	import {
		ref,
		computed
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		storeToRefs
	} from 'pinia';
	import {
		shopStor
	} from '../../stor/shop/shop.js'
	import {
		my
	} from '../../stor/my/my.js'
	const m = my()
	m.getInformation()
	const {
		Information
	} = storeToRefs(m)
	const s = shopStor()
	const {
		shop,
		shopSucces
	} = storeToRefs(s)
	onLoad((options) => {
		s.getShop(options.id)
		wxName.value = uni.getStorageSync('wxname')
		wxImg.value = uni.getStorageSync('wxImg')
	})
	const wxName = ref()
	const wxImg = ref()
	const carShop = ref([])
	const test = ref([0, 1, 2, 3, 4, 5])
	const demo = ref(0)
	const demoUrl = ref("https://www.jiubaotongxue.love/image/demo68.png")
	const demoTxt = ref('兑换成功')
	const demoTxts = ref('请等待机器出货')
	const succes = ref(0)
	const demoBtn = () => {
		demo.value = !demo.value
	}
	const succesBtn = () => {
		
	
		if(Information.value.points>=sumJifen.value){
			console.log(1)
			s.getChecks(carShop.value)
			carShop.value=[]
			setTimeout(()=>{
				m.getInformation()
			},3000)
		}else{
			uni.showToast({
				icon:"none",
				title:'积分不足',
				duration:1000
			})
		}
	}
	const btnBack = () => {
		console.log(1);
		uni.navigateBack()
	}
	const goDuiHuan = (index) => {

		const carIndex = carShop.value.findIndex(item => shop.value[index].id === item.id)
		if (carIndex !== -1) {
			carShop.value[carIndex].num++
		} else {
			carShop.value.push({
				...shop.value[index]
			})
		}

		console.log(carShop.value);
	}
	const add = (index) => {
		if(carShop.value[index].num<carShop.value.stocks){
			carShop.value[index].num++
		}else{
			uni.showToast({
				icon:"none",
				title:"已经不能再多了",
				duration:1000
			})
		}
	}
	const remove = (index) => {
		if(carShop.value[index].num<=1){
			carShop.value.splice(index,1)
		}else{
			carShop.value[index].num--
		}
	}
	const sumJifen = computed(() => {
		if (carShop.value) {
			let num = 0
			carShop.value.forEach(item => {
				num += item.num * item.amount
			})
			if (Information.value.vip === 1) {
				num=num*0.88
				return parseFloat(num.toFixed(2))
			} else {
				return parseFloat(num.toFixed(2)); 
			}
		}
	})
	const numJifen = computed(() => {
		if (carShop.value) {
			let num = 0
			carShop.value.forEach(item => {
				num += item.num
			})
			return num
		}
	})
	const goMyintegal = () => {
		uni.navigateTo({
			url: "/pages/myIntegral/myIntegral"
		})
	}
</script>
<style lang="scss">
	.integral {
		width: 100%;
		height: 100%;
		position: absolute;
		background-color: #f1f4fb;

		.navs {
			width: 100%;
			height: 536rpx;
			position: fixed;
			top: 0rpx;
			background-image: url("https://www.jiubaotongxue.love/image/demo61.png");
			background-size: 100% 100%;
			z-index: 10;

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

			.nav-txt {
				position: absolute;
				font-size: 36rpx;
				color: white;
				top: 108rpx;
				left: 304rpx;
			}
		}

		.top {
			width: 100%;
			height: 230rpx;
			position: relative;
		}

		.integral-header {
			width: 100%;
			height: 109rpx;
			// background-color: red;
			position: relative;
			display: flex;
			align-items: center;
			z-index: 30;

			.integral-header-i {
				width: 108rpx;
				height: 108rpx;
				margin-left: 20rpx;
				border-radius: 50%;
			}

			.boxs {
				position: relative;
				z-index: 30;
				width: 300rpx;
				height: 108rpx;
				margin-left: 10rpx;
				margin-top: 25rpx;

				.bosx-txt {
					display: block;
					font-size: 30rpx;
					color: white;
				}

				.boxs-i {
					width: 120rpx;
					height: 32rpx;
					background: linear-gradient(94deg, #FDF5E0 0%, #FEE6BA 100%);
					border-radius: 24rpx 4rpx 4rpx 24rpx;
					display: flex;
					align-items: center;
					margin-top: 10rpx;

					.boxs-img {
						display: block;
						width: 92rpx;
						height: 24rpx;
						margin-left: 10rpx;
					}
				}
			}
		}

		.integral-titles {
			width: 100%;
			height: 200rpx;
			background-color: #f1f4fb;
			position: relative;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			margin-top: 98rpx;
			z-index: 30;

			.title-fu {
				width: 92%;
				height: 182rpx;
				background-color: #ffffff;
				position: absolute;
				left: 50%;
				top: -30rpx;
				transform: translateX(-50%);
				border-radius: 20rpx 20rpx 20rpx 20rpx;

				.title-fu-t {
					width: 90%;
					height: 42rpx;
					margin-left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22rpx;
					color: #999;
					margin-top: 30rpx;

					.title-l {
						width: 60%;
						height: 42rpx;
						display: flex;
						align-items: center;

						.title-img {
							width: 22rpx;
							height: 22rpx;
							// background-color: red;
						}

						.txta {
							display: block;
							margin-left: 10rpx;
							font-size: 30rpx;
							color: #666;
						}

					}

				}

				.jifen {
					width: 100%;
					height: 70rpx;
					line-height: 70rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 64rpx;
					font-weight: 700;
					box-sizing: border-box;
					padding-left: 72rpx;
					margin-top: 16rpx;
					padding-right: 30rpx;

					.jifen-right {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}

		.title-Stronge {
			width: 100%;
			height: 48rpx;
			line-height: 48rpx;
			font-size: 34rpx;
			box-sizing: border-box;
			padding-left: 30rpx;
			font-weight: 600;
		}

		.auto-boxs {
			position: relative;
			width: 100%;
			height: 900rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 24rpx;

			.dui-box {
				width: 93%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				margin-left: 50%;
				transform: translateX(-50%);
				flex-wrap: wrap;

				.dings {
					width: 100%;
					height: 300rpx;
				}

				.dui {
					width: 334rpx;
					height: 382rpx;
					background-color: white;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin-top: 20rpx;

					.dui-img {
						max-width: 252rpx;
						max-height: 212rpx;
						// background-color: red;
						display: block;
						margin-left: 50%;
						transform: translateX(-50%);
						margin-top: 50rpx;
					}

					.dui-txt {
						text-align: center;
						width: 85%;
						height: 42rpx;
						font-size: 30rpx;
						line-height: 42rpx;
						margin-left: 50%;
						transform: translateX(-50%);
						white-space: nowrap;
						/* 防止文本换行 */
						overflow: hidden;
						/* 隐藏超出部分的文本 */
						text-overflow: ellipsis;
						margin-top: 10rpx;
						font-weight: 600;
					}

					.dui-b {
						width: 100%;
						height: 42rpx;
						margin-top: 10rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						.dui-l {
							display: flex;
							align-items: center;

							.big {
								font-size: 40rpx;
								display: block;
								margin-left: 10rpx;
								color: #EE611B;
								font-weight: 600;
							}
						}

						.qu {
							width: 110rpx;
							height: 48rpx;
							line-height: 48rpx;
							background: linear-gradient(276deg, #1C9FF7 0%, #1275F7 100%);
							border-radius: 32rpx;
							font-size: 22rpx;
							text-align: center;
							color: white;
						}
					}

				}
			}

		}
	}

	.cart {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 130;

		.cart-lefts {
			width: 50%;
			height: 120rpx;
			display: flex;
			align-items: center;

			.i1 {
				display: block;
				margin-left: 30rpx;
				width: 80rpx;
				height: 80rpx;

			}

			.cart-zhizun {

				.xa {
					display: flex;
					align-items: center;

					.i2 {
						text-align: center;
						color: #147BF7;
						margin-left: 20rpx;
						font-size: 40rpx;
					}
				}
			}


		}

		.cart-rights {
			width: 240rpx;
			height: 76rpx;
			background: linear-gradient(276deg, #1C9FF7 0%, #1275F7 100%);
			text-align: center;
			line-height: 76rpx;
			color: white;
			font-size: 30rpx;
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin-right: 30rpx;
		}
	}

	.cartWindow {
		width: 100%;
		height: 93%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		z-index: 120;

		.cartWindow-Box {
			width: 100%;
			height: 600rpx;
			position: fixed;
			bottom: 0rpx;
			background-color: white;
			border-radius: 30rpx 30rpx 0rpx 0rpx;

			.cartWindow-title {
				width: 100%;
				position: relative;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding-left: 35rpx;
				padding-right: 55rpx;
				font-size: 28rpx;
				color: #666;
				margin-top: 32rpx;
			}

			.autos {
				width: 93%;
				height: 400rpx;
				margin-left: 50%;
				transform: translateX(-50%);
				margin-top: 10rpx;

				.autoCartWindow {
					width: 100%;
					height: 100%;
					position: relative;

					.shop {
						width: 100%;
						height: 138rpx;
						border-bottom: 1rpx solid #ccc;
						display: flex;
						justify-content: space-between;
						align-items: center;
						position: relative;
						margin-top: 10rpx;

						.shop-left {
							width: 70%;
							height: 138rpx;
							display: flex;
							align-items: center;

							.shop-img {
								display: block;
								margin-left: 10rpx;
								width: 112rpx;
								height: 112rpx;
								border-radius: 20rpx 20rpx 20rpx 20rpx;
							}

							.shop-box {
								width: 300rpx;
								height: 138rpx;
								margin-left: 20rpx;

								.shop-txt {
									width: 300rpx;
									white-space: nowrap;
									font-size: 26rpx;
									font-weight: 600;
									/* 防止文本换行 */
									overflow: hidden;
									/* 隐藏超出部分的文本 */
									text-overflow: ellipsis;
									margin-top: 20rpx;
								}

								.xiaojifen {
									display: block;
									margin-top: 20rpx;
									font-size: 40rpx;
									color: #EE611B;
								}

							}
						}

						.shop-right {
							width: 140rpx;
							height: 44rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 60rpx;

							.btnA {
								width: 44rpx;
								height: 44rpx;
							}
						}

					}
				}
			}
		}
	}

	.succes {
		width: 100%;
		height: 100%;
		position: fixed;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;

		.succesBox {
			width: 630rpx;
			height: 408rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);


			.succesBox-img {
				display: block;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-top: 48rpx;
				margin-left: 50%;
				transform: translateX(-50%);

			}

			.btns {
				position: relative;
				width: 100%;
				height: 104rpx;
				text-align: center;
				line-height: 104rpx;
				border-top: 1rpx solid #E5E5E5;
				color: #2A70FE;
				position: absolute;
				bottom: 0;
			}
		}
	}
</style>