<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.Transfer }}</navigation>
		<view class="body">
				<!-- #ifdef APP-PLUS -->
				  <view class="form">
					<!-- #endif -->
				<!-- #ifdef H5 -->
				  <view class="form" style="margin-top: 150rpx;">
					<!-- #endif -->
				
				<!-- coin选择框 -->
				<view class="text">{{ i18n.SelectCurrency }}</view>
				<view class="input-item"> 
					<u-input  class="input" v-model="coinInfo.coinCode" color="#fff" fontSize="32rpx" border="none"
						:placeholder="i18n.PleaseChooseCoin" :disabled="true"> 
					</u-input>
					<view class="downSelect"  @click="USDTPopupShow = true"></view>
				</view>
				<!-- form地址选择框 -->
				<view class="text">{{ i18n.From }}</view>
				<view class="input-item">
					<u-input class="input" v-model="i18fromWays" color="#fff" fontSize="32rpx" border="none"
						:placeholder="i18n.OptionAccount" :disabled="true">
					</u-input>
					<view class="downSelect" @click="accountPopupShow = true"></view>
				</view>
				<!-- to地址选择框 -->
				<view class="text">{{ i18n.To }}</view>
				<view class="input-item">
					<u-input class="input" v-model="i18toWays" color="#fff" fontSize="32rpx" border="none"
						:placeholder="i18n.OptionAccount" :disabled="true">
					</u-input>
					<view class="downSelect" @click="accountPopupShowTo = true"></view>
				</view>
				<!-- 数量 -->
				<view class="text">{{ i18n.TransferNumber }}</view>
				<view class="input-item">
					<u-input class="input" v-model="coinInfo.tranAmt" color="#fff" fontSize="32rpx" border="none"
						:placeholder="i18n.pamount" >
					</u-input>
					<view class="numberDownSelect">{{coinInfo.coinCode||''}}
						<view class="all" @click="coinInfo.tranAmt=coinWayInfo.userCapital?coinWayInfo.userCapital:info.userCapital">{{i18n.ALL}}</view>
					</view>
				</view>
				<view class="Usable">{{ i18n.Usable }}
				
					<view class="number">{{coinWayInfo.userCapital>=0?coinWayInfo.userCapital:info.userCapital}}{{coinWayInfo.coinCode?coinWayInfo.coinCode:info.coinCode}}</view>
				</view>
			</view>

			<!-- 按钮 -->
			<u-button class="transferButton" color="#00E8A2" throttleTime="500" :disabled="!transferDis"
				@click="transfer">{{
                    i18n.Transfer
            }}</u-button>

			<!-- USDT按钮通知弹出层 -->
			<u-popup class="USDTPopup" :show="USDTPopupShow" round="40rpx" mode="bottom" @close="USDTPopupShow = false"
				@open="USDTPopupShow = true" bgColor="#211F32">
				<view class="content">
					<view class="close" @click="USDTPopupShow = false"></view>
					<scroll-view scroll-y="true" style="height: 432rpx;" scroll-with-animation="true"
						@touchmove.stop.prevent="">
						<radio-group class="radioGroup" @change="USDTRadioChange" v-model="USDTRadioValue">
							<label class="checkBox" v-for="(item, index) in info.coinList" :key="index"
								@click="radioChange(item)">
								<view class="icon">
									<u-icon :name="baseURL+'/coins/'+item.enname+'.png'" size="52rpx" width="52rpx">
									</u-icon>
								</view>
								<view class="iconName">
									<view class="top">{{item.enname}}</view>
									<view class="bottom">{{item.useCapital}}{{" "}}{{item.code}}</view>
								</view>
								<radio color="#00E8A2" shape="square" :checked="coinInfo.coinCode==item.enname"></radio>
							</label>

						</radio-group>
					</scroll-view>

					<u-button class="button" color="#00E8A2" throttleTime="500" @click="getCoin">OK
					</u-button>
				</view>
			</u-popup>

			<!-- account账户按钮form通知弹出层 -->
			<u-popup class="accountPopup" :show="accountPopupShow" round="40rpx" mode="bottom"
				@close="accountPopupShow = false" @open="accountPopupShow = true" bgColor="#211F32">
				<view class="content">
					<view class="close" @click="accountPopupShow = false"></view>
					<scroll-view scroll-y="true" style="height: 200rpx;" scroll-with-animation="true"
						@touchmove.stop.prevent="">
						<radio-group class="radioGroup" >
							<!-- v-for="(item, index) in 3" :key="index" -->
							<label class="checkBox" @click="getAccount('exchange','form'),getCoinOrAccount()">
								<view class="name">{{i18n.Balanceaccount}}</view>
								<radio color="#00E8A2" shape="square" :checked="transCoinInfo.fromWays=='Balance account'"></radio>
							</label>
							<label class="checkBox" @click="getAccount('contract','form'),getCoinOrAccount()">
								<view class="name">{{i18n.Contractaccount}}</view>
								<radio color="#00E8A2" shape="square" :checked="transCoinInfo.fromWays=='Contract account'"></radio>
							</label>
						</radio-group>
					</scroll-view>
					<u-button class="button" color="#00E8A2" throttleTime="500" @click="accountPopupShow=false">OK
					</u-button>
				</view>
			</u-popup>

<!-- account账户按钮to通知弹出层 -->
         <u-popup class="accountPopup" :show="accountPopupShowTo" round="40rpx" mode="bottom"
         	@close="accountPopupShowTo = false" @open="accountPopupShowTo = true" bgColor="#211F32">
         	<view class="content">
         		<view class="close" @click="accountPopupShowTo = false"></view>
         		<scroll-view scroll-y="true" style="height: 200rpx;" scroll-with-animation="true"
         			@touchmove.stop.prevent="">
         			<radio-group class="radioGroup" >
         				<!-- v-for="(item, index) in 3" :key="index" -->
						<label class="checkBox" @click="getAccount('contract','to'),getCoinOrAccount()">
							<view class="name">{{i18n.Contractaccount}}</view>
							<radio color="#00E8A2" shape="square" :checked="transCoinInfo.toWays=='Contract account'"></radio>
						</label>
         				<label class="checkBox" @click="getAccount('exchange','to'),getCoinOrAccount()">
         					<view class="name">{{i18n.Balanceaccount}}</view>
         					<radio color="#00E8A2" shape="square" :checked="transCoinInfo.toWays=='Balance account'"></radio>
         				</label>
         			
         			</radio-group>
         		</scroll-view>
         
         		<u-button class="button" color="#00E8A2" throttleTime="500" @click="accountPopupShowTo=false">OK
         		</u-button>
         	</view>
         </u-popup>


		</view>

	</view>
</template>

<script>
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	export default {
		name: "transfer",
		data() {
			return {
				i18toWays:null,
				i18fromWays:null,
				
				type:'',
				coinWayInfo:{},
				transCoinInfo:{
					coinCode:null,
					fromWays:null,
				},
				coinCode: null,
				coinCode2: null,
				coinInfo: {
					coinCode: null,
					fromWays: null,
					toWays: null,
					tranAmt: null,
				},
				baseURL: '',
				info: {},
				coin: '',
				USDTPopupShow: false,
				accountPopupShow: false,
				accountPopupShowTo: false,
				USDTRadioValue: '',
				accountRadioValue: '',
			};
		},
		computed: {
			i18n() {
				return this.$t("me");
			},
			transferDis() {
				return this.coinInfo.coinCode && this.coinInfo.fromWays && this.coinInfo.toWays && this.coinInfo.tranAmt
			},

		},
		onLoad() {
			this.baseURL = constant.BASE_URL
			
			this.coinInfo.fromWays='exchange';
			this.coinInfo.toWays='contract';
			this.transCoinInfo.fromWays='Balance account';
			this.i18fromWays=this.$t("me").Balanceaccount
			this.transCoinInfo.toWays='Contract account';
			this.i18toWays=this.$t("me").Contractaccount
			
			this.getInfo()
		},
		onShow() {},
		methods: {
			// 重置  					tranAmt: null,
			reset(){
				// this.type=''
				// this.coinWayInfo={}
				// this.transCoinInfo={
				// 	coinCode:null,
				// 	fromWays:null,
				// }
				// this.coinCode=null,
				// this.coinCode2=null,
				this.coinInfo={
					// coinCode: null,
					fromWays: null,
					toWays: null,
				}
			},
			getAccount(e,type){
				this.type=type
				if(type=='form'){
					if(e=='exchange'){
						this.transCoinInfo.fromWays='Balance account'
						this.i18fromWays=this.$t("me").Balanceaccount
						
					}else{
						this.transCoinInfo.fromWays='Contract account'
						this.i18fromWays=this.$t("me").Contractaccount
					}
					this.coinInfo.fromWays=e
					this.getInfo()
				}else{
					if(e=='exchange'){
						this.transCoinInfo.toWays='Balance account'
						this.i18toWays=this.$t("me").Balanceaccount
					}else{
						this.transCoinInfo.toWays='Contract account'
						this.i18toWays=this.$t("me").Contractaccount
					}
					this.coinInfo.toWays=e
				}
				 this.$forceUpdate()
			},
			// 提交划转资金
			transfer() {
				api.transfer(this.coinInfo).then(res => {
					uni.$u.toast(this.$t("login").Transfersucceeded)
					setTimeout(() => {
						this.getInfo(true)
						// this.reset()
						this.coinInfo.tranAmt=null
					}, 1200)
				})
			},
			// 获取币种
			radioChange(e) {
				this.coinCode = e.enname
				this.coinCode2 = e.code
			},
			// 获取币种
			getCoin() {
				this.coinInfo.coinCode = this.coinCode
				this.coinInfo.coinCode2 = this.coinCode2
				this.USDTPopupShow = false
			},
			// 切换币种或转出账户
			getCoinOrAccount() {
				this.transCoinInfo.coinCode=this.coinInfo.coinCode2
			 //    this.coinInfo.fromWays=this.transCoinInfo.fromWays
				// this.coinInfo.toWays=this.transCoinInfo.toWays
				if(this.type=='to'){
					this.accountPopupShowTo = false
					return;
				}
				api.changeCoinWays({
					coinCode:this.transCoinInfo.coinCode,
					fromWays:this.coinInfo.fromWays,
				}).then(res => {
					this.coinWayInfo=res
					
				})
			},
			// 获取配置信息
			getInfo(type) {
				this.coinWayInfo={};
				this.info={};
				api.getTransferConfig({
					fromWays:this.coinInfo.fromWays
				}).then(res => {
					this.info = res
					// 首次进来才默认选择
					if(type){
						return;
					}
					// 3个下拉框默认选中第一个,另外选项弹出框也默认第一个
					this.coinInfo.coinCode=this.info.coinList[0].enname
					this.coinCode = this.info.coinList[0].enname
					this.coinCode2 = this.info.coinList[0].code

				})
			},
			USDTRadioChange(e) {},

		},
	}
</script>

<style lang="scss" scoped>
	/deep/ .u-input--square{
		border-radius: 34rpx !important;
	}
	.main {
		.body {
			.form {
				margin: 232rpx 32rpx 0;
				background: #211F32;
				border-radius: 32rpx;
				padding: 0 32rpx;
				overflow: hidden;

				.text {
					margin: 32rpx 0 20rpx;
					font-size: 32rpx;
					color: #A1A0A8;
				}

				.input-item {
					position: relative;
					background: #323045;
					border-radius: 32rpx;

					.input {
						width: 400rpx;
						height: 112rpx;
						padding-left: 40rpx !important;
						background: #323045 !important;
					}

					.downSelect {
						position: absolute;
						width: 32rpx;
						height: 32rpx;
						top: 36rpx;
						right: 32rpx;
						background-image: url(../../static/me/ic_input_arrow_down.png);
						background-repeat: no-repeat;
						background-size: 32rpx;


					}

					.numberDownSelect {
						position: absolute;
						height: 32rpx;
						top: 36rpx;
						right: 34rpx;

						.all {
							padding-left: 14rpx;
							display: inline;
							font-size: 28rpx;
							color: #00E8A2;
						}
					}

				}

				.Usable {
					margin: 32rpx 0;
					color: #FFFFFF;
					font-size: 12px;

					.number {
						display: inline;
						color: #00E8A2;
					}
				}

			}

			.transferButton {
				box-sizing: border-box;
				margin: 64rpx 32rpx;
				width: 686rpx;
				height: 112rpx;
				line-height: 112rpx;
				border-radius: 32rpx;
				font-size: 32rpx;
				color: #15141F !important;
			}

			.USDTPopup {
				.content {
					height: 730rpx;

					.close {
						margin: 48rpx 346rpx;
						width: 58rpx;
						height: 20rpx;
						background-image: url(../../static/charity/Turn.png);
						background-repeat: no-repeat;
						background-size: 58rpx 20rpx;
					}

					.radioGroup {
						height: 432rpx;

						.checkBox {
							height: 84rpx;
							width: 670rpx;
							display: flex;
							align-items: center;
							margin: 0 40rpx 32rpx;

							.icon {
								width: 84rpx;
								height: 84rpx;
								border-radius: 20rpx;
								overflow: hidden;
								display: inline-block;
								box-sizing: border-box;
								background: #323045;
								padding: 16rpx;
								margin-right: 20rpx;
							}

							.iconName {
								width: 520rpx;

								.top {
									font-size: 32rpx;
									color: #fff;
								}


								.bottom {
									font-size: 24rpx;
									color: #A1A0A8;
								}


							}

							/deep/.uni-radio-input {
								width: 48rpx;
								height: 48rpx;
								border-radius: 16rpx;
								background: #323045;
							}

							/deep/.uni-radio-input-checked::before {
								font-size: 36rpx;
							}
						}

					}

					.button {
						width: 654rpx;
						margin: 40rpx 48rpx;
						border-radius: 32rpx;
						height: 112rpx;
						line-height: 112rpx;
						color: #15141F !important;
					}

				}

			}


			.accountPopup {
				.content {
					height: 484rpx;

					.close {
						margin: 48rpx 346rpx;
						width: 58rpx;
						height: 20rpx;
						background-image: url(../../static/charity/Turn.png);
						background-repeat: no-repeat;
						background-size: 58rpx 20rpx;
					}

					.radioGroup {
						height: 200rpx;

						.checkBox {
							height: 84rpx;
							width: 670rpx;
							display: flex;
							align-items: center;
							margin: 0 40rpx 32rpx;

							.name {
								width: 600rpx;
								font-size: 32rpx;
								color: #fff;
							}

							/deep/.uni-radio-input {
								width: 48rpx;
								height: 48rpx;
								border-radius: 16rpx;
								background: #323045;
							}

							/deep/.uni-radio-input-checked::before {
								font-size: 36rpx;
							}
						}

					}

					.button {
						width: 654rpx;
						margin: 20rpx 48rpx;
						border-radius: 32rpx;
						height: 112rpx;
						line-height: 112rpx;
						color: #15141F !important;
					}

				}

			}
		}




	}
</style>
