<template>
	<view>
		<view class="list">
			<view class="kcitem">
				<image v-if="form.coursePic" :src="config.baseUrl_api+form.coursePic" mode="aspectFill"></image>
				<image v-if="form.activityPic" :src="config.baseUrl_api+form.activityPic" mode="aspectFill"></image>
				<view class="info">
					<view class="tt esp_2" v-if="form.courseName">{{form.courseName}}</view>
					<view class="tt esp_2" v-if="form.activityName">{{form.activityName}}</view>
					<!-- <view class="pp"><uni-icons type="chatboxes" size="12" />209w 学习</view> -->
					<!-- <view class="text-warning">{{form.explains}}</view> -->
				</view>
			</view>
		</view>
		<view class="rrcard">
			<view class="t" v-if="system!='iPhone'&&system!='iPad'">支付方式</view>
			<view class="t" v-else>兑换方式</view>
			<view class="whitebg">
				<radio-group @change="payChange">
					<label class="uni-list-cell uni-list-cell-pd" v-if="form.allScore>0">
						<view class="littleimgBox">
							{{form.allScore}} 积分
						</view>
						<view>
							<radio checked="checked" value="0" />
						</view>
					</label>
					<label class="uni-list-cell uni-list-cell-pd" v-if="form.allGold>0&&system!='iPhone'&&system!='iPad'">
						<view class="littleimgBox">
							{{form.allGold}} 金币
						</view>
						<view>
							<radio value="1" />
						</view>
					</label>
					
					<label class="uni-list-cell uni-list-cell-pd" v-if="form.gold>0&&form.score>0&&system!='iPhone'&&system!='iPad'">
						<view class="littleimgBox">
							{{form.gold}} 金币 + {{form.score}} 积分
						</view>
						<view>
							<radio value="2" />
						</view>
					</label>
				</radio-group>
			</view>
		</view>
		<view class="rrcard mt-30" v-if="form.sale">
			<view class="t">可支持的优惠</view>
			<view class="whitebg">
				<radio-group>
					<label class="uni-list-cell uni-list-cell-pd">
						<view class="littleimgBox text-warning">
							VIP会员
							<text>{{form.sale/10}}</text>
							折
						</view>
						<view v-if="system!='iPhone'&&system!='iPad'">
							<radio v-if="mm.memType=='1'" checked="checked"/>
							<view v-else @click="beVip">成为VIP 享受此优惠></view>
						</view>
					</label>
				</radio-group>
			</view>
			
		</view>
		<view class="rrcard mt-30">
			<view class="t">我的余额</view>
			<view class="whitebg">
				<label class="uni-list-cell uni-list-cell-pd">
					<view class="littleimgBox">
						金币：{{mm.gold||0}}
					</view>
					
					<view style="color: #999;"  v-if="system!='iPhone'&&system!='iPad'" @click="goPath('/usercenter/mycard/renew')">去充值></view>
				</label>
				<label class="uni-list-cell uni-list-cell-pd">
					<view class="littleimgBox">
						积分：{{mm.score||0}}
					</view>
					<view>
						
					</view>
				</label>
			</view>
			<view class="explains" v-if="form.explains">{{form.explains}}</view>
		</view>
		<view class="fixedBottom">
			<view class="flexbox">
				<view>
					<view class="text-warning" v-if="mm.memType=='1'">
						<text v-if="form.payType==1">{{form.allGold*form.sale/100}} 金币</text>
						<text v-if="form.payType==0">{{form.allScore*form.sale/100}} 积分</text>
						<text v-if="form.payType==2">{{form.gold*form.sale/100}} 金币 + {{form.score*form.sale/100}} 积分</text>
					</view>
					<view class="text-del" v-if="mm.memType=='1'">
						<text v-if="form.payType==1">{{form.allGold}} 金币</text>
						<text v-if="form.payType==0">{{form.allScore}} 积分</text>
						<text v-if="form.payType==2">{{form.gold}} 金币 + {{form.score}} 积分</text>
					</view>
					<view class="text-warning" v-else>
						<text v-if="form.payType==1">{{form.allGold}} 金币</text>
						<text v-if="form.payType==0">{{form.allScore}} 积分</text>
						<text v-if="form.payType==2">{{form.gold}} 金币 + {{form.score}} 积分</text>
					</view>
				</view>
				<view v-if="system!='iPhone'&&system!='iPad'">
					<button class="btn btn-submit" v-if="orderType==0" @click="pay">确定购买</button>
					<button class="btn btn-submit" v-else @click="pay">确定报名</button>
				</view>
				<view v-else>
					<button class="btn btn-submit" @click="pay">立即兑换</button>
				</view>
			</view>
		</view>
	
		<uni-popup ref="vippay" type="center">
			<view style="position: relative;">
				<image src="@/usercenter/img/popup2.png" style="width: 620rpx;height: 568rpx;"></image>
				<view class="bigPrice">{{vipPrice}}</view>
				<button class="btn btn-submit priceBtn" style="width: 400rpx;" @click="payVip">
					立即支付 ¥{{vipPrice}}/年</button>
			</view>
		</uni-popup>
	
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,onReady
	} from '@dcloudio/uni-app';
	import config from '@/config.js';
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import * as api from '@/common/api.js';
	const form = ref({})
	const mm = ref({})
	const orderType = ref(0)
	const vipPrice = ref(0)
	const vippay = ref(null)
	const system = uni.getStorageSync('systemType')
	let shareId = '0'
	onLoad((option) => {
		if ('form' in option) {
			form.value = JSON.parse(decodeURIComponent(option.form))
			if (form.value.courseId) {
				orderType.value = 0
			} else {
				orderType.value = 1
			}
		}
		if (option.shareId) {
			shareId = option.shareId
		}
		getUserExt()
	})
	onReady(() => {
		if (orderType.value = 1) {
			uni.setNavigationBarTitle({
				title: '活动兑换'
			});
		} else {
			uni.setNavigationBarTitle({
				title: '课程兑换'
			});
		}
	})
	function getUserExt(){
		api.getUserExtByUserId().then(res=>{
			mm.value = res.data
		})
	}
	function payChange(e) {
		console.log(e.detail.value)
		form.value.payType = e.detail.value
	}

	function pay() {
		console.log(form.value.payType,mm.value.gold,mm.value.score)
		if(form.value.payType==1&&(form.value.allGold>mm.value.gold)){
			let msg = '去充值'
			uni.showModal({
				content: '金币不足',
				confirmText: msg,
				success:function(res){
					if(res.confirm){
						goPath('/usercenter/mycard/renew')
					}
				}
			})
			return
		}
		if(form.value.payType==0&&(form.value.allScore>mm.value.score)){
			uni.showModal({
				content: '积分不足',
				success:function(res){
					if(res.confirm){
						
					}
				}
			})
			return
		}
		if(form.value.payType==2&&(form.value.score>mm.value.score||form.value.gold>mm.value.gold)){
			uni.showModal({
				content: '余额不足',
				confirmText:'去充值',
				success:function(res){
					if(res.confirm){
						goPath('/usercenter/mycard/renew')
					}
				}
			})
			return
		}
		
		var obj = {}
		if (orderType.value == 0) {
			obj = {
				orderType: 0,
				goodsId: form.value.courseId,
				payType: form.value.payType,
				shareId:shareId
			}
		} else {
			obj = {
				orderType: 1,
				goodsId: form.value.activityId,
				payType: form.value.payType,
				shareId:shareId
			}
		}
		uni.showModal({
			content:'确定购买吗',
			success:function(resp){
				if(resp.confirm){
					api.submitOrder(obj).then(res => {
						console.log(res)
						
						if(res.data == -100){
							uni.showToast({
								title: '余额不足',
								icon:'none'
							})
						} else {
							uni.showToast({
								title: '操作成功'
							})
							uni.navigateBack()
						}
					})
				}
			}
		})


	}
	function goPath(path) {
		uni.navigateTo({
			url: path
		});
	}
	function beVip(){
		api.getVipPrice().then(res => {
			vipPrice.value = res.msg
			vippay.value.open()
		})
	}
	function payVip() {
			api.createOrder({
				total: vipPrice.value,
				payType: 0
			}).then(res => {
				const openId = currUser.openId
				// const openId = 'oRufa4ifoP2I3hnoLAwoAreKkppA'
				api.payForOrder({
					payId: res.data.payId,
					openId: openId,
					shareId:shareId
				}).then(Response => {
					wePay(Response.data.weixinData)
				})
			})
		}
	
		function wePay(configdata) {
			console.log(configdata)
			// 微信支付
			uni.requestPayment({
				"provider": "wxpay",
				"appId": configdata.appId,
				"nonceStr": configdata.nonceStr,
				"package": configdata.packageValue, // 随机字符串
				"timeStamp": configdata.timeStamp, // 时间戳（单位：秒）
				"signType": configdata.signType, // 签名，这里用的 MD5/RSA 签名
				"paySign": configdata.paySign,
				success(res) {
					console.log(res)
					uni.showModal({
						content: '支付成功',
						success: function(resp) {
							if (resp.confirm) {
								init()
							}
						}
					})
				},
				fail(e) {
					console.log(e)
					uni.showToast({
						title: '支付取消',
						icon: 'none'
					});
				}
			})
		}
	
</script>

<style lang="scss" scoped>
	.explains{font-size: 28rpx;color: #999;margin-top: 40rpx;line-height: 2;}
	:deep(.uni-list-cell::after) {
		background-color: #eee;
		width: 94%;
		left: 3%;
	}

	.kcitem {
		margin: 30rpx auto;
		width: 700rpx;
		box-sizing: border-box;
	}

	.whitebg {
		background: #fff;
	}

	.rrcard .box {
		padding: 0 0 1px;
		margin: 20rpx 0 0;
	}

	.rrcard {
		position: relative;
		padding: 0 25rpx;
		box-sizing: border-box;
	}

	.rrcard .t {
		font-weight: 500;
		color: #2B3133;
		margin: 0 0 20rpx;
		font-size: 32rpx;
	}

	.fixedBottom {
		.flexbox {
			width: 100%;
			justify-content: space-between;
			padding: 0 30rpx;
		}
	}
</style>