<template>
	<!-- 确认订单 -->
	<u-navbar bgColor="#F6F8FA" :placeholder="true" title="" :autoBack="true"></u-navbar>
	<view class="mainBox">
		<view class="checkAddress flexJ" @click="checkAddress" v-if="!adress.name">
			<view class="add flexA">
				<image src="/static/shopCarIc/address.png" mode=""></image>
				新增收货地址
			</view>
			<image src="/static/mineIc/gayRight.png" mode=""></image>
		</view>
		<view v-else>
			<!-- 收货地址 -->
			<shopAddres :adress="adress"></shopAddres>
		</view>
		<view class="ordersShop">
			<view class="shop flexJ" v-for="item in buyShop" :key="item.id">
				<view class="shopPhoto">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="shopInfo">
					<view class="shopName ellipsis">{{item.name}}</view>
					<view class="shopDesc ellipsis">{{item.describe}}</view>
					<view class="price flexJ">
						<text v-if="shopType!=3">￥{{item.goods_price}}</text>
						<view v-else class="flexA points">
							{{orderInfo.coscore}}<text>积分</text>
						</view>
						<view class="num">x{{item.total_num}}</view>
					</view>
				</view>
			</view>
			<view class="line"></view>
			<view class="modeBox flexJ">
				<text>提货方式</text>
				<view class="mode">快递配送</view>
			</view>
			<view class="modeBox flexJ" v-if="shopType==3">
				<text>运费</text>
				<view class="yunPrice">￥{{orderInfo.express_price}}</view>
			</view>
		</view>
		<view class="btnsBox iosAuto flexJ">
			<!-- 积分购买 -->
			<view class="pointsPrcie flexV" v-if="shopType==3">
				<view class="allPoints flexA">
					<view class="all">合计:</view>
					<view class="pointsNum">
						{{orderInfo.coscore}}<text>积分</text>
					</view>
				</view>
				<view class="pointsMoeny">{{orderInfo.express_price}}元</view>
			</view>
			<!-- 非积分购买 -->
			<view class="allMoney flexA" v-else>
				<text>总价：</text> {{orderInfo.total_price}}
			</view>
			<view class="btn flexC" @click="btns">{{ shopType==3 ? '立即兑换' : '立即购买' }}</view>
		</view>
		<!-- 选择支付方式弹窗 -->
		<payMode @canclePop="modeShow = false" :car_Id="car_Id" :balance="balance" :totalPrice="orderInfo.total_price" :adressId="adress.id" :payParams="payParams" :modeShow="modeShow"></payMode>
		<!-- 确认积分兑换弹窗 -->
		<tipPop @pointsBtns="pointsBtns" :integral="orderInfo.coscore" :tipShow="tipShow"></tipPop>
	</view>
</template>

<script setup>
	import { ref,reactive } from 'vue'
	import {onShow,onLoad} from '@dcloudio/uni-app'
	import payMode from '@/componets/checkPayMode.vue'
	import tipPop from '@/componets/tipPop.vue'
	import shopAddres from '@/componets/address.vue'
	import { getbBuyData,getCarsettlement } from '@/api/'
	onLoad((e)=> {
		if(e.ids) {
			car_Id.value = e.ids
			getCarsettlements(e.ids) //购物车结算
		} else {
			shopType.value = e.shopType //商品类型
			payParams.value = JSON.parse(e.params) //规格id 商品数量 商品id
			getbBuyDatas(JSON.parse(e.params))
			console.log(e.params, '商品规格信息')
		}
		//默认地址
		uni.getStorageSync('defaultAdres') ? adress.value = uni.getStorageSync('defaultAdres') : ''
	})
	onShow(()=> {
		// 余额
		uni.getStorageSync('balance') ? balance.value = uni.getStorageSync('balance') : ''
	})
	let modeShow = ref(false) //选择支付方式
	let payParams = ref({}) //支付参数
	let shopType = ref(1)// 1=普通商品,2=特价商品,3=积分商品
	let car_Id = ref('') //购物车结算商品的购物车id
	let balance = ref(0) //余额
	let buyShop = ref([]) //购买de商品
	let orderInfo = ref({}) //购买信息
	// 购买商品信息
	const getbBuyDatas = async (obj)=>{
	  try {
		  let params = {
			goods_id:obj.id,	//integer	是	商品ID
			num:obj.num,	//integer	是	数量
			goods_spec_id:obj.specId,	//integer	是	规格ID 
		  }
	    const res = await getbBuyData(params)
		buyShop.value = res.goods_list //购买de商品
		orderInfo.value = res //购买信息
	    console.log('getbBuyData', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getbBuyData', err)
	  }
	}
	// 购物车结算
	const getCarsettlements = async (ids)=>{
	  try {
	    const res = await getCarsettlement(ids)
		buyShop.value = res.goods_list //购买de商品
		orderInfo.value = res //购买信息
	    console.log('getCarsettlement', res)
	    // 保存数据
	  } catch (err) {
	    uni.showToast({ title:err,icon:'none' })
	    console.log('getCarsettlement', err)
	  }
	}
	let adress = ref({}) //收货地址
	// 选择地址
	const checkAddress = ()=> {
		uni.navigateTo({
			url: `/pages/mine/myAddress?isCheck=${1}`,
			events: {
				steBack: data => {
					adress.value = data
					console.log('地址',data)
				}
			}
		})
	}
	// 是否使用积分弹窗
	const tipShow = ref(false)
	// 是否使用积分 0否 1 是
	const pointsBtns = (type)=>{
		tipShow.value = false
		if(type == 1) { 
			modeShow.value = true
		}
	}
	// 立即购买按钮 shopType== 1 || 2立即购买 ==  shopType==3立即兑换按钮
	const btns = ()=> {
		if(shopType.value==3) {
			console.log('立即兑换按钮')
			if(uni.getStorageSync('myPoints') < orderInfo.value.coscore) 
			return uni.showToast({ title:'您的积分不足~',icon:'none' })
			tipShow.value = true
		} else {
			modeShow.value = true
			console.log('立即购买')
		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F8FA;
	}

	.mainBox {
		width: 100%;
		padding: 20rpx 24rpx 0;
		box-sizing: border-box;

		.checkAddress {
			width: 100%;
			padding: 24rpx 20rpx 26rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			background: #ffffffff;
			margin-bottom: 20rpx;

			.add {
				color: #323233ff;
				font-size: 28rpx;
				font-weight: 700;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}

			image {
				width: 16rpx;
				height: 32rpx;
			}
		}

		.addressBox {
			margin-bottom: 20rpx;
			padding: 32rpx 20rpx 31rpx 32rpx;
			background: #fff;

			.right {
				display: flex;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 8rpx;
					margin-top: 9rpx;
				}

				.area {
					text {
						color: #323233ff;
						font-size: 28rpx;
						font-weight: 700;
						line-height: 36rpx;
					}

					.name {
						color: #646566ff;
						font-size: 24rpx;
						margin-top: 9rpx;
					}
				}
			}

			image {
				width: 16rpx;
				height: 32rpx;
			}
		}

		.ordersShop {
			width: 100%;
			padding: 24rpx 20rpx 32rpx 20rpx;
			box-sizing: border-box;
			border-radius: 24rpx;
			background-color: #fff;

			.shop {
				margin-bottom: 24rpx;
				
				.shopPhoto {
					width: 180rpx;
					height: 180rpx;
					margin-right: 20rpx;

					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 16rpx;
					}
				}

				.shopInfo {
					width: 100%;
					
					.shopName {
						color: #323233ff;
						font-size: 26rpx;
						font-weight: 700;
					}

					.shopDesc {
						margin: 16rpx 0 58rpx;
						color: #00000066;
						font-size: 20rpx;
					}

					.price {
						width: 100%;

						text {
							color: #fc4338ff;
							font-size: 28rpx;
							font-weight: 700;
						}

						.num {
							color: #323233ff;
							font-size: 26rpx;
						}
						
						.points {
							 color: #000000e6;
							 font-size: 32rpx;
							 font-weight: 700;
							 
							 text {
								margin: 6rpx 0 0 8rpx;
								 color: #000000e6;
								 font-size: 22rpx;
							 }
						}
					}
				}
			}

			.line {
				margin: 40rpx 0 33rpx;
				width: 100%;
				height: 1rpx;
				opacity: 1;
				background: #eeeff0ff;
			}

			.modeBox {
				margin-top: 32rpx;
				text {
					color: #000000e6;
					font-size: 26rpx;
				}

				.mode {
					color: #000000e6;
					font-size: 26rpx;
					font-weight: 700;
				}
				
				.yunPrice {
					 color: #fc4338ff;
					 font-size: 26rpx;
					 font-weight: 700;
				}
			}
		}
	}

	.btnsBox {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 96rpx;
		opacity: 1;
		background: #ffffffff;

		.allMoney {
			margin-left: 32rpx;
			color: #fc4338ff;
			font-size: 40rpx;
			font-weight: 700;

			text {
				color: #000000ff;
				font-size: 32rpx;
				font-weight: 700;
			}
		}

		.btn {
			margin-right: 24rpx;
			width: 256rpx;
			height: 80rpx;
			border-radius: 80rpx;
			color: #ffffffff;
			font-size: 30rpx;
			font-weight: 700;
			background: linear-gradient(-88deg, #fe6434ff 0%, #ff2f2fff 100%);
		}
		
		.pointsPrcie {
			margin-left: 32rpx;
			
			.allPoints {
				
				.all {
					 color: #000000ff;
					 font-size: 30rpx;
					 font-weight: 700;
				}
				
				.pointsNum {
					margin-left: 12rpx;
					 color: #fc4338ff;
					 font-size: 40rpx;
					 font-weight: 700;
					 
					 text {
						 margin: 8rpx 0 0 8rpx;
						  color: #fc4338ff;
						  font-size: 22rpx;
					 }
				}
			}
			
			.pointsMoeny {
				 color: #00000099;
				 font-size: 24rpx;
			}
		}
	}
</style>