<template>
	<view>
		<customNav :shownav="true" :title="$t('zhanghu.baozhegnjin')" tinColor="#006AFF" jiantou="0" titledetl=''></customNav>
		<view class="contentColumn topView">
			<text class="topbzjText" style="margin-left: 3%;">{{$t('zhanghu.baozhegnjin')}}</text>
			<view class="contentInRowL" style="margin-left: 3%;align-items: center;margin-top: 10rpx;">
				<image style="width: 30rpx;height: 30rpx;" src="/static/imags/shijianH.png" mode="scaleToFill"></image>
				<view>
					<text class="titleText">{{$t('tixian.shuishikt')}}</text>
				</view>
				<image style="width: 30rpx;height: 30rpx;padding-left: 20rpx;" src="/static/imags/baozhjH.png" mode="scaleToFill"></image>
				<view>
					<text class="titleText">{{$t('tixian.zijinanquan')}}</text>
				</view>
			</view>
		</view>
		<view class="contentColumnC baozhjView">
			<text class="baozhjshu">{{baozhjin}}</text>
			<text class="jiaonaBt" @click="popgjm">{{$t('tixian.jiaonabzj')}}</text>
			<!-- <text v-if="baozhjin>0" class="tuibaoBt">{{$t('tixian.tuibaozj')}}</text> -->
		</view>
		<view class="contentColumn" style="width: 94%;margin-left: 3%;">
			<text class="noteText">{{$t('tixian.baozhengjgz')}}</text>
			<view class="guizItemV">
				<view class="contentInRowL" style="align-items: center;">
					<image style="width: 40rpx;height: 40rpx;" src="/static/imags/dunpai.png" mode="scaleToFill"></image>
					<view class="">
						<text class="noteTitleText">{{$t('tixian.baozhengjyt')}}</text>
					</view>
				</view>
				<text class="noteDetaelText">{{$t('tixian.baozhengjsm')}}</text>
			</view>
		</view>
		<!-- 输入框示例 -->
			<uni-popup ref="inputDialog" type="dialog">
				<uni-popup-dialog ref="inputClose"  mode="input" inputType="number" :title="$t('zhanghu.baozhegnjin')"
					:placeholder="$t('tixian.qingshubzjje')" :cancelText="$t('index.quxiao')" :confirmText="$t('index.queren')" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</uni-popup>
	</view>
</template>

<script>
	import {
		addMargin,
		md5pay,
		getmymargin,
		getUsbalance,
		userRecharge
	} from '@/pages/api/basic.js';
	export default {
		data() {
			return {
				baozhjin:0,
				bzjObject:'',
				showpop:false,
				baozhjlist:[0,1],
				Sindex:0,
				chongzhije:0
			}
		},
		onShow() {
			this.getmymargin();
			this.getUsbalance();
		},
		methods: {
			popSelect(index){
				this.Sindex=index;
			},
			popgjm(){
				var that = this;
				var userInfo = uni.getStorageSync('userInfo')
				
				if(userInfo.auditStatus!=1){
					uni.showToast({
					    title:that.$t('user.zhanghaowsh') ,
					    icon: 'none',
					    duration: 3500
					})
					return;
				}
				this.$refs.inputDialog.open('center');
				//this.showpop=true;//选择保证金额
			},
			dialogInputConfirm(val) {
				
				this.userRecharge(val);
				
					// uni.navigateTo({
					// 	url:'/pages/tixian/Zhifuyemian?url='+ encodeURIComponent(JSON.stringify(this.bzjObject.payUrl))+'&ddid='+this.bzjObject.ddId
					// })
		
				
			},
			async userRecharge(val){
				
				var language = uni.getStorageSync('language');
				var lg;
				if(language=='yuenan'){
					lg='vi';
				}
				else{
					lg='en';
				}
				//console.log('getUserMsg')
				await this.$http.get(`${userRecharge}`, {
					amount:val,
					language:lg
				},true)
				.then(async r => {
					console.log(r);
					if(r.data.code==200){
						uni.navigateTo({
							url:'/pages/tixian/Zhifuyemian?url='+ encodeURIComponent(JSON.stringify(r.data.data))+'&ddid=**'
						})
					}
				})
				.catch(err => {
					console.log(err)
				})
			},
			async getUsbalance(){
				//console.log('getUserMsg')
				await this.$http.get(`${getUsbalance}`, {
					type:'',
					page:1,
					size:10,
				},true)
				.then(async r => {
					this.baozhjin=r.data.data.sum;
				})
				.catch(err => {
					console.log(err)
				})
			},
			async getmymargin(){
				//console.log('getUserMsg')
				await this.$http.get(`${getmymargin}`, {
				},true)
				.then(async r => {
					console.log(r);
					for(var i=0;i<r.data.data.length;i++){
						var obj= r.data.data[i];
						if(obj.ddId.substring(0, 2)=='QS'){
							this.bzjObject=obj;
							break;
						}
					}
				})
				.catch(err => {
					console.log(err)
				})
			},
			async getmd5pay(){
				//console.log('getUserMsg')
				await this.$http.get(`${md5pay}`, {
					orderid:'123456789',
					amount:1
				},true)
				.then(async r => {
					console.log(r);
					if(r.data.data.code=="-1"){
						uni.showToast({
						    title: r.data.data.msg,
						    icon: 'none',
						    duration: 3500
						})
						uni.navigateTo({
							url:'/pages/tixian/Zhifuyemian?url=12'
						})
						return;
					}
					uni.navigateTo({
						url:'/pages/tixian/Zhifuyemian?url='+ encodeURIComponent(JSON.stringify(r.data.data.PayURL))+'&ddid=QS'
					})
				})
				.catch(err => {
					console.log(err)
				})
			},
		},
	}
</script>

<style lang="scss">
	@import '@/common/common.scss';
	@font-face {
		font-family: zrht;
		src: url('/uni_modules/font/zrht.otf');
	}
	page{
		background-color: whitesmoke;
	}
	
	.topView{
		height: 460rpx;
		width: 100%;
		background-image: url('/static/defimags/baozhengjin.png');
		background-size: 100% 100%;//背景图片能够显示全
	}
	
	.topbzjText{
		margin-top: 140rpx;
		font-size: 46rpx;
		// font-family: zrht;
		color: black;
		font-weight: bold;
	}
	.titleText{
		margin-top: 20rpx;
		font-size: 30rpx;
		color: #1A1A1A;
		font-weight: bold;
	}
	.baozhjView{
		margin-top: -110rpx;
		width: 94%;
		margin-left: 3%;
		background-color: white;
		box-shadow: 0px 0rpx 10rpx 0rpx lightgrey;
		border-radius: 8rpx;
	}
	.baozhjshu{
		margin-top: 50rpx;
		font-size: 76rpx;
		color: #1A1A1A;
		font-weight: bold;
	}
	.jiaonaBt{
		margin-top: 40rpx;
		font-size: 30rpx;
		color:white;
		background-color: #006AFF;
		border-radius: 10rpx;
		width: 80%;
		line-height: 68rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}
	.tuibaoBt{
		margin-top: 40rpx;
		font-size: 30rpx;
		color:darkgray;
		background-color: lightgray;
		border-radius: 10rpx;
		width: 80%;
		line-height: 68rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}
	
	.noteText{
		margin-top: 20rpx;
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.guizItemV{
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		border: solid lavender;
		border-width: 0px 0px 1rpx 0px;
	}
	
	.noteTitleText{
		font-size: 32rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.noteDetaelText{
		font-size: 28rpx;
		color: #1A1A1A;
	}
	
	.popitemV{
		margin: 20rpx;
		padding: 20rpx;
		box-shadow: 0px 0rpx 10rpx 0rpx lightgrey;
		color: darkgray;
	}
	.popitemVB{
		margin: 20rpx;
		padding: 20rpx;
		box-shadow: 0px 0rpx 10rpx 0rpx #006AFF;
	}
	.noteDTText{
		font-size: 32rpx;
		font-weight: bold;
		color: #1A1A1A;
	}
	.noteDText{
		font-size: 28rpx;
		color: darkgreen;
	}

</style>
