<!-- 兑换商城详情 -->
<template>
	<view class="uninavbar" @click="returnTo()">
		<image src="../../static/images/sign/return.png"></image>
	</view>
	<view>
		<image :src="bindIcon(SignProductList[0].coverPic)"></image>
	</view>

	<view style="background-color: #ffffff; overflow-x: hidden;">
		<view style="margin-left: 32rpx; margin-right: 32rpx;">
			<view style="margin-top: 33rpx;">
				<image class="nv-image" src="../../static/images/sign/one.png"></image>
				<text class="nv-text">{{SignProductList[0].goldCoin}}</text>
				<text class="nv-ku">库存{{SignProductList[0].inventory}}</text>
			</view>

			<view>
				<text class="nv-con">{{SignProductList[0].title}}</text>
			</view>

			<view style="
		width: 750rpx;
		height: 8rpx;
		background: #faf9fa;
		margin-top: 28rpx;
		"></view>

			<view style="margin-top: 24rpx;">
				<text class="nv-r">兑换规则</text>
			</view>

			<view style="margin-top: 24rpx;">
				<p>
					(1)活动参与:通过参加我们组织的促销活动、问卷调查或者签到等方式可以获得积分。不同活动的积分奖励数额会有所不同，请您注意查看活动规则。
				</p>
				<p>
					(2)消费累积:您在我们的商城购物进行支付时，将会根据您的消费额度累积相应的积分。具体积分累积规则可以在购物时的结算界面或活动页面上获得。
				</p>
				<p>
					(3)推荐好友:通过邀请好友注册、购物等方式参与我们的服务，您可以获得定的积分奖励。请注意，为了避免滥用行为，我们可能会对邀请积分进行限制或验证。
				</p>
			</view>


			<view style="
		width: 750rpx;
		height: 8rpx;
		background: #faf9fa;
		margin-top: 25rpx;
		"></view>

			<view style="margin-top: 30rpx;">
				<text style="
			font-weight: Regular;
			width: 100rpx;
			height: 25rpx;
			font-size: 24.37rpx;
			text-align: left;
			color: #000000;
			margin: auto ;
			display: block;
			">商品详情</text>
			</view>
		</view>


		<view style="overflow-x: hidden;width: 100%; margin-top: 33rpx;background-color: #ffffff;">
			<view v-for="(item,index) in SignProductList[0].detailsPic.split(',')" :key="index">
				<image style="margin-top: 24rpx;display: block;" :src="bindIcon(item)"></image>
			</view>
		</view>


		<view class="but" @click="butOn()" style="position: fixed; bottom: 92rpx; left: 32rpx;">
			<text>立即兑换</text>
		</view>
	</view>




	<!-- 弹起 -->
	<uni-popup ref="popup" border-radius="32rpx 32rpx 0 0" background-color="#ffffff">

		<view style="position:absolute; right: 32rpx; vertical-align:middle; z-index: 10;">
			<image @click="clone()" style="width: 32rpx;height: 32rpx;" src="../../static/images/sign/clone.png">
			</image>
		</view>

		<view class="uni-popup-view">
			<view class="uni-top">
				<text class="uni-top-text">确认兑换</text>
			</view>


			<view v-if="queryParams != null" style="margin-top: 57rpx;margin-left: 32rpx;" @click="handerGoTo()">
				<view>
					<text class="textname">
						{{queryParams.name}}<text class="textphone">{{queryParams.phone}}</text>
					</text>
					<image style="width: 14rpx;height: 23rpx;" class="icons" src="../../static/images/sign/rig.png">
					</image>
					<text class="textaddress">{{queryParams.address}}{{queryParams.detailedAddress}}</text>
				</view>
			</view>

			<view v-else style="margin-top: 73rpx;margin-left: 32rpx;" @click="handerGoTo()">
				<view>
					<text class="textname">
						请先添加收货信息
					</text>
					<image style="width: 14rpx;height: 23rpx;" class="icons1" src="../../static/images/sign/rig.png">
					</image>
				</view>
			</view>




			<view class="boxconte">
				<view style="display: flex;">
					<view>
						<image :src="bindIcon(SignProductList[0].coverPic)" class="boximage"></image>
					</view>
					<view>
						<text class="boxtext">
							{{SignProductList[0].title}}
						</text>

						<view class="boxbottom-image">
							<image class="right-image" src="../../static/images/sign/one.png"></image>
							<text>{{SignProductList[0].goldCoin}}</text>


							<view class="right-rigth">
								<view @click="rightfirstchild()" class="right-first-child">-</view>
								<text class="right-text">{{sum}}</text>
								<view @click="rightlastchild()" class="right-last-child">+</view>
							</view>

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

			</view>

			<view class="boxbottom">
				<input placeholder="留言备注 (限50字)" placeholder-class="inputcolor" v-model="inputvalue" />
			</view>


			<view @click="butOnBut()" class="but" style="position: absolute;bottom: 24rpx;left: 32rpx;right: 32rpx;">
				<text>立即兑换</text>
			</view>


		</view>
	</uni-popup>

</template>

<script setup>
	// import {
	// 	idCard
	// } from "uview-plus/libs/function/test";
	import {
		onMounted,
		reactive,
		ref,
		toRefs,
		getCurrentInstance
	}
	from "vue"
	const popup = ref(null);
	const images = ref("https://cbu01.alicdn.com/img/ibank/2018/374/990/9121099473_1558693147.jpg");
	const inputvalue = ref("");
	const IsShow = ref(false);
	const sum = ref(1)

	const dataProduct = reactive({
		formProduct: {},
		queryParamsProduct: {
			pageNum: 1,
			pageSize: 10,
			coverPic: null,
			title: null,
			content: null,
			substitutionRe: null,
			inventory: null,
			goldCoin: null,
			detailsPic: null,
			time: null,
			isListing: null,
			discount: null,
			id: null
		},
		rulesProduct: {}
	});

	const {
		queryParamsProduct,
		formProduct,
		rulesProduct
	} = toRefs(dataProduct);

	import {
		listSignProduct,
		getSignProduct,
		delSignProduct,
		addSignProduct,
		updateSignProduct
	} from "@/api/signln/SignProduct/SignProduct";


	const SignProductList = ref();
	//商品id
	const productid = ref();
	/** 查询商品列表 */
	function getListProduct() {

		queryParamsProduct.value.id = productid.value;
		listSignProduct(queryParamsProduct.value).then(response => {
			SignProductList.value = response.rows;
			console.log(SignProductList.value)
		});
	}


	import config from '@/config';

	function bindIcon(icon) {
		return config.baseUrl + icon;
	}

	const arraddress = reactive([{
		id: 1,
		name: "1",
		phone: "1",
		address: "1"
	}])

	function butOn() {
		popup.value.open('bottom');
	}

	function clone() {
		popup.value.close()
	}
	//地址
	function handerGoTo() {
		uni.navigateTo({
			url: './harvestaddress'
		});
	}
	//减
	function rightfirstchild() {
		if (sum.value > 1) {
			sum = sum.value--;
		}
	}
	//加
	function rightlastchild() {
		sum = sum.value++;
	}

	import {
		listSignExchange,
		getSignExchange,
		delSignExchange,
		addSignExchange,
		updateSignExchange
	} from "@/api/signln/SignExchange/SignExchange";


	//返回
	function returnTo() {
		uni.navigateBack({
			delta: 1
		});
	}



	const arrImage = reactive([{
			address: "https://img2.baidu.com/it/u=498628918,3669803110&fm=253&fmt=auto&app=138&f=JPEG?w=565&h=374"
		},
		{
			address: "https://img1.cfw.cn/editors/attached/image/20231123/202311231332325212.jpg"
		},
		{
			address: "http://t13.baidu.com/it/u=2134668050,4238032983&fm=224&app=112&f=JPEG?w=500&h=500"
		},
		{
			address: "http://t13.baidu.com/it/u=2134668050,4238032983&fm=224&app=112&f=JPEG?w=500&h=500"
		}
	])



	import {
		useRouter,
		useRoute
	} from 'vue-router';
	const route = useRoute();




	//接受返回的addressid
	onMounted(() => {
		// console.log(route.query.addressid)
		function getList() {
			queryParams.id = route.query.addressid;
			if (route.query.addressid != undefined) {
				listSignAddressid(queryParams).then(response => {
					queryParams = response;
					// console.log(queryParams)
				});
			} else {
				queryParams.inCommonUse = '1';
				listSignAddressUser(queryParams).then(response => {
					queryParams = response.rows[0];
					// console.log(response)
					// console.log(queryParams.name)
				});
			}
		}
		getList();


		// console.log(route.query.productid)
		productid.value = route.query.productid;

		getListProduct();

	});

	import {
		listSignAddress,
		getSignAddress,
		delSignAddress,
		addSignAddress,
		updateSignAddress,
		listSignAddressUser,
		listSignAddressid
	} from "@/api/signln/SignAddress/SignAddress";


	let queryParams = reactive({
		id: null,
		name: null,
		phone: null,
		address: null,
		detailedAddress: null,
		inCommonUse: null,
		userId: null
	})

	//
	const {
		proxy
	} = getCurrentInstance();
	//立即越换
	function butOnBut() {

		// SignProductList._rawValue[0].id
		// queryParams.id
		// sum.value
		// inputvalue.value
		if (queryParams == undefined) {
			proxy.$modal.msgError("地址不能为空");
			return;
		}
		var addExchange = {
			productId: SignProductList._rawValue[0].id,
			addressId: queryParams.id,
			remark: inputvalue.value,
			quantity: sum.value
		}
		console.log(addExchange)
		addSignExchange(addExchange).then(response => {
			console.log(response);
			if (response == 1) {
				uni.navigateTo({
					url: './successfulexchange'
				});
			}
			if (response == 0) {
				proxy.$modal.msgError("您的校园币不足");
			}
			if (response == 3) {
				proxy.$modal.msgError("库存不足");
			}
		});

	}
</script>

<style scoped>
	/* 	:deep(.uni-popup .uni-popup__wrapper){
		background-color:red !important;
	} */

	.uninavbar {
		position: absolute;
		z-index: 9999;
		top: 110rpx;
		left: 32rpx;
	}

	.uninavbar>image {
		width: 31rpx;
		height: 44rpx;
		color: #000000;
	}

	view>image {
		width: 750rpx;
		height: 500rpx;
	}

	.but {
		width: 686rpx;
		height: 88rpx;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		background: linear-gradient(-90deg, #c9f6f5, #f7f8e3);
	}

	.but>text,
	.buts>text {
		font-weight: Regular;
		width: 131rpx;
		height: 33rpx;
		font-size: 32rpx;
		text-align: left;
		color: #000000;
		display: block;
		margin: auto;
		line-height: 88rpx;
	}

	.bot-bot {
		width: 750rpx;
		height: 1000rpx;
		border-radius: 32rpx 32rpx 0 0;
		/* background: #ffffff; */
		background-color: #000000;
		position: absolute;
		bottom: 40rpx;
		left: 0rpx;
		transition: bottom 5s;
		/* Slide in effect */
	}

	.buts {
		position: absolute;
		bottom: 91rpx;
	}

	.uni-popup-view {
		position: relative;
		left: 0rpx;
		height: 70vh;
		width: 750rpx;
		margin-top: 31rpx;
	}

	.uni-top {
		display: flex;
	}

	.uni-top-text {
		font-weight: Regular;
		width: 124rpx;
		/* height: 31rpx; */
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		display: block;
		margin: auto;
		line-height: 31rpx;
	}

	.textname,
	.textphone,
	.textaddress {

		font-weight: Regular;
		width: 48rpx;
		height: 29rpx;
		font-size: 24rpx;
		line-height: 29rpx;
		text-align: left;
		color: #999999;
	}

	.icons {
		float: right;
		margin-top: 19rpx;
		margin-right: 32rpx;
	}

	.icons1 {
		float: right;
		margin-top: 1rpx;
		margin-right: 32rpx;
	}

	.textphone {
		margin-left: 26rpx;
	}

	.textaddress {
		display: block;
		width: 501rpx;
		/* height: 24rpx; */
		line-height: 29rpx;
		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
	}

	.boxconte {
		width: 686rpx;
		height: 198rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #ffffff;
		box-shadow: 0 0 10rpx #ffffff;
		margin-left: 32rpx;
		margin-top: 24rpx;
		margin-right: 32rpx;
	}

	.boximage {
		width: 150rpx;
		height: 150rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #999999;
		margin: 24rpx 0rpx 24rpx 24rpx;
	}

	.boxtext {
		font-weight: Regular;
		width: 459rpx;
		/* height: 44rpx; */
		line-height: 26rpx;
		font-size: 20rpx;
		text-align: left;
		color: #000000;
		margin: 24rpx 29rpx 0 29rpx;

		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;

		/* display: block; */

	}

	.boxbottom-image {
		margin-left: 24rpx;
		margin-top: 80rpx;
	}

	.boxbottom-image>text {
		font-weight: Regular;
		width: 34rpx;
		height: 17rpx;
		font-size: 20rpx;
		text-align: left;
		color: #F99B46;
		margin-left: 10rpx;
		vertical-align: middle;
	}

	.boxbottom {
		width: 686rpx;
		height: 88rpx;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		background: #f6f6f6;
		margin: 32rpx
	}

	.boxbottom>input {
		width: 686rpx;
		height: 88rpx;
		padding-left: 25rpx;
	}

	.right-image {
		width: 25rpx;
		height: 26rpx;
		vertical-align: middle;
	}

	:deep(.inputcolor) {
		font-weight: Regular;
		width: 207rpx;
		/* height: 88rpx; */
		font-size: 24.37rpx;
		text-align: left;
		color: #999999;
	}

	.right-rigth {
		float: right;
		margin-right: 24rpx;
		display: flex;

	}

	.right-first-child {
		width: 33.94rpx;
		height: 33.94rpx;
		/* background: #ffffff; */
		background-color: #999999;
		line-height: 32rpx;
		text-align: center;
		border-radius: 32rpx;

		color: #F6F6F6;
		line-height: 32rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.right-text {
		vertical-align: middle;
		font-weight: Regular;
		width: 7rpx;
		height: 16rpx;
		font-size: 20rpx;
		color: #000000;
		margin-left: 24rpx;
		margin-right: 24rpx;
		margin-top: 4rpx;
	}

	.right-last-child {
		vertical-align: middle;
		width: 32rpx;
		height: 32rpx;
		background: #f99b46;
		border-radius: 32rpx;

		color: #F6F6F6;
		line-height: 32rpx;
		text-align: center;
		font-size: 20rpx;
	}

	.nv-image {
		width: 37rpx;
		height: 38rpx;
		vertical-align: middle;
	}

	.nv-text {
		font-weight: Regular;
		width: 60rpx;
		height: 30rpx;
		font-size: 36rpx;
		text-align: left;
		color: #F99B46;
		margin-left: 12rpx;
		vertical-align: middle;
	}

	.nv-ku {
		font-weight: Regular;
		/* width: 94rpx; */
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #999999;
		vertical-align: middle;
		float: right;
		margin-right: 1rpx;
	}

	.nv-con {
		font-weight: Regular;
		width: 659rpx;
		height: 66rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		margin-top: 27rpx;
		line-height: 30rpx;
		overflow: hidden;
		word-wrap: break-word;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.nv-r {
		font-weight: Regular;
		width: 118rpx;
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
	}

	p {
		color: #000000;
		font-weight: Regular;
		font-face: Microsoft YaHei;
		font-size: 24rpx;
		text-align: left;
		line-height: 36rpx;
	}
</style>