<template>
	<up-navbar
	  title="支付"
	  bgColor="#00aa7f"
	  :autoBack="true"
	  leftIconColor="#fff"
	  titleStyle="color:#fff"
	  :placeholder="true"
	/>
	
	<view style="display: flex;align-items:center;justify-content: space-between;padding:30rpx;border-bottom:1px solid #f4f4f4;background: #fff;">
		<view>付款金额</view>
		<view style="color: #ffaa00;">
			<text>¥ </text>
			<text style="font-size: 50rpx;">{{payqs.money}}</text>
		</view>
	</view>
	<view style="padding: 40rpx 20rpx 20rpx;color: #959595;">选择支付方式</view>
	<view style="background: #fff;">
		<radio-group size="30" @change="radioChange">
			<label style="display: flex;align-items: center;padding: 30rpx;border-bottom: 2px solid #f4f4f4;">
				<radio :checked="actv == 1" value="1" color="#00aa00" style="transform:scale(80%);" />
				<view style="display: flex;align-items: center;">
					<image src="/src/static/img/yuer.png" style="width: 60rpx;height: 60rpx;" />
					<view style="padding-left: 10rpx;">余额</view>
				</view>
			</label>
			<label style="display: flex;align-items: center;padding: 30rpx;">
				<radio :checked="actv == 2" value="2" color="#00aa00" style="transform:scale(80%);" />
				<view style="display: flex;align-items: center;">
					<image src="/src/static/img/weixin.png" style="width: 60rpx;height: 60rpx;" />
					<view style="padding-left: 10rpx;">微信</view>
				</view>
			</label>
		</radio-group>
	</view>
	<view class="qxyy" @tap="payhand">立即支付</view> 
</template>

<script setup lang="ts">
	import { ref,reactive } from 'vue'
	import { payment,getip } from '@/utils/service'
	import { onLoad,onShow } from '@dcloudio/uni-app'
	
	onLoad((opt:any) => {
		payqs.money = opt.amount*1
		payqs.attach = opt.orderNo
		payqs.detail.goodsDetail.merchantGoodsId = opt.orderNo
		payqs.detail.goodsDetail.unitPrice = opt.amount*1
		
		payqs.description = `车牌号：${opt.plateNum} 换电站：${opt.stationName}`
		// payqs.detail.costPrice = opt.amount
		// payqs.detail.goodsDetail.unitPrice = opt.amount
	})
	
	let actv = ref(2)
	function radioChange(v:any) {
		console.log(v,'v')
	}
	
	let payqs = reactive({
		wuid:uni.getStorageSync('wxuid'),
		description:'',						//订单总描述
		money:0,							//支付金额，单位：分
		//timeExp:'',						//支付结束时间
		attach:'',	
		detail:{
			goodsDetail:{
				merchantGoodsId:'',		//商户侧商品编码
				wechatpayGoodsId:'',	//微信支付定义的统一商品编号（没有可不传）
				goodsName:'',			//商品的实际名称
				quantity:1,				//商品数量
				unitPrice:0				//商品价格
			}//订单附加信息
		},
		payerClientIp:'',			//用户IP
		deviceId:'',				//用户设备型号
		stationCode:''
	})
	
	//获取ip
	getip().then((rps:any) => {
		payqs.payerClientIp = rps.data
	})
	
	function payhand() {
		payment(payqs).then((rps:any) => {

			//#ifdef MP-WEIXIN
			wx.requestPayment({
				timeStamp:rps.data.timeStamp,
				nonceStr: rps.data.nonceStr,
				package: rps.data.packageVal,
				signType: rps.data.signType,
				paySign: rps.data.paySign,
				success(){
					uni.redirectTo({
						url:'/minPages/paySuccess/index'
					})
				},
				fail(){
					
				}
			})
			//#endif
		})
		
	}
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
	.qxyy{
		width: 90%;
		height: 80rpx;
		margin: 100rpx auto 0;
		line-height: 80rpx;
		border-radius:10rpx;
		color: #fff;
		text-align: center;
		background: #00aa00;
	}
	.hdbzcont{
		box-sizing: border-box;
		width: 85vw;
		padding: 30rpx;
		background: #fff;
	}
</style>