<template>
	<up-navbar
	  title="充值"
	  bgColor="#00aa7f"
	  :autoBack="true"
	  leftIconColor="#fff"
	  titleStyle="color:#fff"
	  :placeholder="true"
	/>
	<view class="contet">
		<view class="tit">充值金额</view>
		<view class="jenr">
			<view class="jrnum">
				<view @tap="setje(1,50)" :class="{actv:actv == 1}">¥<text>50</text></view>
				<view @tap="setje(2,100)" :class="{actv:actv == 2}">¥<text>100</text></view>
				<view @tap="setje(3,200)" :class="{actv:actv == 3}">¥<text>200</text></view>
			</view>
			<view class="jrnum">
				<view @tap="setje(4,500)" :class="{actv:actv == 4}">¥<text>500</text></view>
				<view @tap="setje(5,1000)" :class="{actv:actv == 5}">¥<text>1000</text></view>
				<view @tap="setje(6,1000)">自定义</view>
			</view>
		</view>
		
		<up-button style="margin-top: 100rpx;" type="success"  @tap="save">确认充值</up-button>
	</view>
	<up-popup 
	  :show="show" 
	  mode="center" 
	  round="10" 
	  closeable
	  @close="close"
	>
		<view style="box-sizing: border-box;width: 80vw;padding: 100rpx 50rpx 50rpx;">
			<!-- <up-input 
			  type="number" 
			  maxlength="10" 
			  v-model="zdyjr" 
			  @focus="focus"
			  placeholder="请输入金额"
			/> -->
			<view style="box-sizing: border-box;padding:0 5vw;">
				<view style="padding: 15rpx;border-radius: 10rpx;font-size: 32rpx;border: 1px solid #ccc;">
					<input
					  v-model="zdyjr" 
					  type="digit"
					  @input="handleInput"
					  placeholder="请输入金额" 
					/>
				</view>
				
				<view style="box-sizing: border-box;height: 100rpx;padding-top: 5rpx;font-size: 28rpx;color: #f00;">
					<view v-if="errtip">请输入金额</view>
				</view>
				<view>
					<up-button type="success" @tap="zdysave">确认充值</up-button>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup lang="ts">
	import { ref,reactive,watch,nextTick } from 'vue'
	import { payment,getip,getInfo,getaccou,openaccou,isktbal } from '@/utils/service'
	import { onLoad } from '@dcloudio/uni-app'
	
	import { setNum } from '@/utils/commen'
	
	// onLoad((opt:any) => {
	// 	payqs.attach.walletCode = opt.walletCode
	// })
	
	isktbal(uni.getStorageSync('wxuid')).then((rps:any) => {
		if(!rps.data){
			
			//开通余额
			openaccou(uni.getStorageSync('wxuid'))
		}
	})
	
	let phoneNumber = ref('')
	getInfo({
		wuid:uni.getStorageSync('wxuid')
	}).then((rps:any) => {
		let nickName = rps.data.nickName?rps.data.nickName:''
		let	name = rps.data.name?rps.data.name:''
		phoneNumber.value = rps.data.phoneNumber?rps.data.phoneNumber:''
		payqs.attach.trader = name?name:nickName
		payqs.description = `${phoneNumber.value}余额充值`
	})
	
	let actv = ref(0)
	let jiner = ref<any>('')
	
	let show = ref(false)
	function setje(n:number,v:number|string){
		actv.value = n
		jiner.value = v
		if(n == 6){
			show.value = true
			jiner.value = ''
			zdyjr.value = ''
		}
	}
	
	function close() {
		show.value = false
	}
	
	function save() {
		if(jiner.value == ''){
			uni.showToast({
				title:'请选择金额',
				icon:'none'
			})
		}else{
			payqs.total = jiner.value*1*100
			payqs.goodsDetail[0].unitPrice = jiner.value*1*100
			payhand()
		}
	}
	
	//自定义
	let zdyjr = ref<any>('')
	let errtip = ref(false)
	
	function handleInput(e:any) {
		nextTick(() => {
			zdyjr.value = setNum(e.target.value)
		})
	}
	
	// watch(() => zdyjr.value, v => {
	// 	zdyjr.value = setNum(v)
	// })
	let tipmsg = ref('')
	function zdysave() {
		if(zdyjr.value === ''){
			errtip.value = true
			tipmsg.value = '请输入金额'
		}else if(zdyjr.value*1 == 0){
			errtip.value = true
			tipmsg.value = '输入金额不能为0'
		}else{
			errtip.value = false
			tipmsg.value = ''
			payqs.total = zdyjr.value*1*100
			payqs.goodsDetail[0].unitPrice = zdyjr.value*1*100
			payhand()
		}
	}
	
	function focus() {
		errtip.value = false
		tipmsg.value = ''
	}
	
	//充值
	let payqs = reactive<any>({
		wuid:uni.getStorageSync('wxuid'),
		description:'余额充值',					//订单总描述
		total:0,								//支付金额，单位：分
		//timeExp:'',							//支付结束时间
		
		//订单附加信息
		attach:{
			type: 1,												//"1-充值,2-订单。类型 number"
			//orderNo:'', 											//"订单号",
			trader:'',												//交易发起人
			traderCode:uni.getStorageSync('wxuid'),					//交易人编码 	个人wuid，企业为公司编码
 			walletCode:uni.getStorageSync('walletCode')				//钱包编码
			// ownerId:'', 											//"户主ID，个人wuid，企业为公司编码",
			// walletCode:'' 										//"钱包编码"
		},
		goodsDetail:[
			{
				merchantGoodsId:new Date().getTime(),		//商户侧商品编码
				wechatpayGoodsId:'',						//微信支付定义的统一商品编号（没有可不传）
				goodsName:'',								//商品的实际名称
				quantity:1,									//商品数量
				unitPrice:0									//商品价格
			}
		],
		payerClientIp:'',			//用户IP
		deviceId:'',				//用户设备型号
		stationCode:''
	})
	
	//获取ip
	getip().then((rps:any) => {
		payqs.payerClientIp = rps.data
	})
	
	function payhand() {
		//'{"type":1,"trader":"cijiangbo","tradercode":"8d4638c713e9391baa60395385932fb3","walletCode":"YTWAP1863511124008374272NARVLW"}'
		
		//payqs.attach = JSON.stringify(payqs.attach)
		//payqs.total = payqs.total*100
		
		let objpay = Object.assign({},payqs,{
			attach:JSON.stringify(payqs.attach),
			//total:payqs.total*100
		})
		payment(objpay).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.navigateBack()
				},
				fail(){
					
				}
			})
			//#endif
			
		})
		
	}
</script>

<style lang="scss">
	page{
		background: #f4f4f4;
	}
	.contet{
		padding: 25rpx;
		.tit{
			margin-bottom: 25rpx;
			padding-left: 16rpx;
			border-left: 4px solid #00aa00;
		}
		.jenr{
			box-sizing: border-box;
			margin-top: 30rpx;
			padding: 30rpx 5% 0;
			border-radius: 20rpx;
			background: #fff;
			.jrnum{
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				>view{
					box-sizing: border-box;
					width: 25%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					margin-bottom: 30rpx;
					border-radius: 20rpx;
					border: 1px solid #ccc;
					text{
						font-size: 40rpx;
					}
				}
				.actv{
					color: #fff;
					background: #5ac725;
					border: none;
				}
			}
		}	
	}
</style>