<template>
	<view class="container">
		<view class="head_bg"></view>
		<view class="shopInfo" v-if="goodsData.goodsCategory == 'physical'">
			<view class="type">自取门店</view>
			<view class="info">
				<view class="shopName">{{shopUserInfo.shopName}}</view>
				<view class="shopTel">{{shopUserInfo.telephone}}</view>
			</view>
			<view class="address">
				<view style="width: 70%;">{{shopUserInfo.address}}</view>
				<u-icon name="arrow-right" color="#595959" size="28"></u-icon>
			</view>
		</view>
		<view class="orderInfo">
			<view class="goods">
				<image class="icon" :src="goodsData.goodsImageUrl" mode="aspectFill" />
				<view class="info">
					<view class="title">{{goodsData.goodsName}}</view>
					<view class="numAll">
						<view class="points">{{goodsData.requiredPoints}}积分</view>
						<view class="num">X1</view>
					</view>
				</view>
			</view>
			<view class="cell">
				<view class="label">使用积分</view>
				<view class="value">{{goodsData.requiredPoints}}积分</view>
			</view>
			<view class="cell">
				<view class="label"></view>
				<view class="value">合计￥{{goodsData.extraPrice}}</view>
			</view>
		</view>
		<view class="bom">
			<view class="exchangeBtn" @click="pointsCreateOrder">确认兑换</view>
		</view>
	</view>
</template>

<script>
	
	
	export default {
		data() {
			return {
				query: {
					page: 1,
					size: 10,
				},
				shopId: null,
				goodsData: null,
				orderInfo: null,
				shopUserInfo: uni.cache.get('shopUserInfo'),
			};
		},
		onLoad(options) {
			if ( options.shopId ) {
				this.shopId = options.shopId;
			}
			if ( options.goodsData ) {
				this.goodsData = JSON.parse(options.goodsData);
			}
		},
		onShow() {
			this.getExchangeRecordList();
		},
		onReachBottom() {
			this.getExchangeRecordList()
		},
	
		methods: { 
			/**
			 * 获取兑换记录
			 */
			async getExchangeRecordList() {
				let res = await  this.api.exchangeRecordList({
					shopId: this.shopId,
					memberId: this.shopUserInfo.id,
					...this.query
				})
				if ( res.code == 0) {
					if (res.data.pages < this.query.page) {
						this.status = 'nomore'
						if (this.query.page == 1 && res.data.list.length == 0) {
							this.list = []
							this.is_end = true
						}
						return false;
					} else {
						this.status = 'loading';
						if (this.query.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.list, ...res.data.list];
						}
						this.query.page = ++this.query.page;
						if (this.query.page > res.data.pages) {
							this.status = 'nomore';
						} else {
							this.status = 'loading';
						}
					
					}
				}
				
			},
			
			/**
			 * 确认兑换
			 */
			confirmExchange () {
				if ( this.goodsData.extraPrice > 0 ) {
					
				} else {
					this.pointsCreateOrder()
				}
				
			},
			/**
			 * 微信/支付宝支付
			 */
			async pointsPayOrder(orderInfo) {
				let payType;
				if ( this.goodsData.extraPrice > 0 ) {
					// #ifdef MP-WEIXIN
					payType = 'WECHAT';
					// #endif
					// #ifdef MP-ALIPAY
					payType = 'ALIPAY';
					// #endif
				} else {
					payType = 'POINTS'
				}
				let res = await this.api.pointsPayOrder({
					id: orderInfo.id,
					payType: payType,
					openId: uni.cache.get('miniAppOpenId'),
				}) //判断是否支付成功
				if (res.code == 0) {
					this.orderInfo = res.data;
					let payInfo = JSON.parse(res.data.payInfo);
					if ( payType == 'POINTS') {
						uni.navigateTo({
							url: `/pagesPoints/exchangeRecordDetail/index?shopId=${this.shopId}&orderInfo=${JSON.stringify(this.orderInfo)}`,
						})
						return;
					}
					// 微信支付还是余额支付
					uni.requestPayment({
						// #ifdef MP-WEIXIN
						provider: 'wxpay', //支付类型-固定值
						partnerid: payInfo.appId, // 微信支付商户号
						timeStamp: payInfo.timeStamp, // 时间戳（单位：秒）
						nonceStr: payInfo.nonceStr, // 随机字符串
						package: payInfo.package, // 固定值
						signType: payInfo.signType, //固定值
						paySign: payInfo.paySign, //签名
						// #endif
						// #ifdef MP-ALIPAY
						provider: 'alipay', //支付类型-固定值
						orderInfo: res.data.tradeNo, // 微信支付商户号
						// #endif
						success: (res) => {
							let _this = this
							uni.showToast({
								title: "支付成功"
							})
							uni.navigateTo({
								url: `/pagesPoints/exchangeRecordDetail/index?shopId=${this.shopId}&orderInfo=${JSON.stringify(this.orderInfo)}`,
							})
						},
						fail: async (err) => {
							console.log(err)
							let res = await this.api.pointsCancelOrder({
								id: orderInfo.id,
							}) //判断是否支付成功
							uni.hideLoading()
						}
					});
					
				}
			},
			
			/**
			 * 支付完成后请求
			 */
			async paymodfiyOrderInfo() { 
				let res = await this.api.paymodfiyOrderInfo({
					orderId: this.listinfoid,
				})
			},
			
			/**
			 * 生成兑换兑换
			 */
			async pointsCreateOrder () {
				if (this.orderInfo) {
					this.pointsPayOrder(this.orderInfo);
					return;
				}
				let res = await this.api.pointsCreateOrder({
					shopId: this.shopId,
					pointsGoodsId: this.goodsData.id,
					pickupMethod: "self",
					memberId: this.shopUserInfo.id,
					avatarUrl: this.shopUserInfo.headImg,
					memberName: this.shopUserInfo.name,
					mobile: this.shopUserInfo.telephone,
				})
				if (res.code == 0) {
					this.orderInfo = res.data;
					this.pointsPayOrder(res.data);
					
				} 
			},
		}
	};
</script>

<style scoped lang="scss">
	.container{
		padding: 32rpx 20rpx;
		.head_bg{
			    height: 256rpx;
			    background: linear-gradient(180deg, #E9B183 0%, #F5F5F500 100%);
			    position: absolute;
			    left: 0;
			    right: 0;
			    top: 0;
			    margin: auto;
		}
		.orderInfo,.shopInfo{
			display: flex;
			flex-direction: column;
			background-color: #fff;
			border-radius: 18rpx;
			position: relative;
			z-index: 2;
		}
		.shopInfo{
			padding: 32rpx 24rpx 32rpx 24rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-bottom: 32rpx;
			.type{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
			.info{
				display: flex;
				align-items: center;
				margin-top: 24rpx;
				margin-bottom: 16rpx;
				.shopName{
					margin-right: 10rpx;
				}
			}
			.address{
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
			}
		}
		.orderInfo{
			padding: 32rpx 24rpx 8rpx 24rpx;
			.goods{
				display: flex;
				margin-bottom: 16rpx;
				.icon{
					width: 128rpx;
					height: 128rpx;
					border-radius: 10rpx;
					margin-right: 16rpx;
					flex-shrink: 0;
				}
				.info{
					width: 100%;
					display: flex;
					flex-direction: column;
					.title{
						font-weight: bold;
						font-size: 28rpx;
						color: #333333;
						margin-top: 5rpx;
					}
					.numAll{
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-weight: 500;
						font-size: 24rpx;
						margin-top: 32rpx;
						.points{
							color: #666;
						}
						.num{
							color: #999;
						}
					}
				}
			}
			.cell{
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-top: 1rpx solid #E5E5E5;
				padding: 24rpx 0;
				.label{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
				.value{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			}
			
		}
		.bom{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 9;
			padding: 16rpx 28rpx 68rpx 28rpx;
			display: flex;
			justify-content: flex-end;
			background-color: #fff;
			.exchangeBtn{
				width: 214rpx;
				height: 64rpx;
				line-height: 64rpx;
				text-align: center;
				background: #E8AD7B;
				border-radius: 34rpx 34rpx 34rpx 34rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
			}
		}
	}
	
	
</style>