<template>
	<view class="main">
		<!-- nav -->
		<navigation>{{ i18n.Recharge }}
			<view slot="right" class="right" @click="goto('rechargeRecord')">{{ i18n.Record
        }}
			</view>
		</navigation>
		<!-- headBtn -->

		<!-- #ifdef H5 -->
		<view class="head" style="margin-top: 120rpx;">
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<view class="head">
				<!-- #endif -->

				<view class="headItem" @click="pageState = 'crypto',getRechargeInfo()"
					:class="{ select: pageState === 'crypto' }">
					{{ i18n.CoinRecharge }}
				</view>
				<view class="headItem" @click="pageState = 'online',getRechargeInfo()"
					:class="{ select: pageState === 'online' }">
					{{ i18n.CashRecharge }}
				</view>
			</view>
			<view class="coinContent" v-if="pageState === 'crypto'">
				<!-- coin选择框 -->
				<view class="input-item">
					<u-input class="input" v-model="coin" color="#fff" fontSize="32rpx" border="none"
						:placeholder="i18n.PleaseChooseCoin" :disabled="true">
					</u-input>
					<view class="selectCoinBtn" @click="USDTPopupShow = true">{{coin}}
					</view>
				</view>

				<view class="coin-item">
					<view class="QRCode">
						<u-image class="QRCodeImg" :src="qr" width="310rpx" height="310rpx">
						</u-image>
					</view>
					<view class="CoinAddressTitle">{{ i18n.CoinDepositAddress }}</view>
					<view class="Copy" @click="copyAddress(coinAddress)">{{ i18n.CopyAddress }}</view>
					<view class="CoinAddress">{{ coinAddress }}</view>
					<u-divider text="" :dashed="true"></u-divider>
					<view class="ScanQR">{{ i18n.ScanQR }}</view>
				</view>
				<view class="message-item">
					{{ i18n.message }}
				</view>

				<!-- 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 reInfo.coins" :key="index"
									@click="radioChange(item)">
									<view class="icon">
										<u-icon :name="baseURL+'/coins/'+item.code+'.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="coin==item.enname"></radio>
								</label>

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

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

			<view class="cashContent" v-if="pageState === 'online'">
				<view class="enter">
					<view class="selectTitle">{{ i18n.selectAmount }}</view>
					<view class="numberSelect">
						<view :class="{ select: item === onlineInfo.tranAmt }" class="item"
							v-for="item,index in reInfo.fastAmount" @click="getAmount(item,index)">
							{{item}}{{coinTypeInfo.system_coin_code}}
						</view>
					</view>
					<input class="input" v-model="onlineInfo.tranAmt" focus :placeholder="i18n.EnterNumber"
						placeholder-style="color:#A1A0A8" />
				</view>
				<view class="RechargeMethod">
					<view class="methodTitle">{{ i18n.RechargeMethod }}</view>
					<view class="methodSelect">
						<view class="item" v-for="item,index in reInfo.payTypes"
							:class="{ select:item.payType === onlineInfo.payType }" @click="getCoinType(item,index)">
							{{item.typeName}}
						</view>
					</view>
				</view>

				<u-button class="button" color="#00E8A2" throttleTime="500" @click="recharge">{{ i18n.Submit }}
				</u-button>
			</view>


		</view>
</template>

<script>
	import uniCopy from '@/utils/uni-copy'
	import api from '@/utils/api'
	import constant from '@/utils/constant.js';
	import QR from '@/utils/qrCode/wxqrcode.js'
	export default {
		name: "recharge",
		data() {
			return {
				// 充值地址
				coinAddress: null,
				baseURL: '',
				reInfo: {},
				qr: null,
				pageState: 'crypto',
				// 显示类型
				coin: '',
				// 传后台的虚拟币code
				coinCode: '',
				USDTPopupShow: false,
				USDTRadioValue: '',
				selectNumberValue: 100,
				selectMethod: '1',
				// 法币在线充值下单参数
				onlineInfo: {
					payType: null,
					tranAmt: null,
				},


			};
		},
		computed: {
			i18n() {
				return this.$t("recharge");
			},
			// 获取币种
			coinTypeInfo() {
				return uni.getStorageSync('coinTypeInfo')
			}
		},
		onLoad() {
			this.baseURL = constant.BASE_URL
			this.getRechargeInfo()
		},
		onShow() {},
		methods: {
			// 法币充值
			recharge() {
				api.recharge(this.onlineInfo).then(res => {
					// uni.$u.toast(this.$t("login").Rechargesucceeded)
					if (res.code == 0) {
                      // #ifdef APP-PLUS
                      plus.runtime.openURL(res.msg);
                      // #endif
                      // #ifdef H5
                      window.location.href = res.msg
                      // #endif
				 }
				 if (res.code == 1) {
						uni.$u.toast(res.msg)	  
					}
					setTimeout(() => {
						this.getRechargeInfo()
					}, 1200)
				})
			},
			// 获取选择充值的钱
			getAmount(t, i) {
				this.onlineInfo.tranAmt = t
			},
			// 获取充值类型
			getCoinType(t, i) {
				this.onlineInfo.payType = t.payType
			},
			radioChange(e) {
				this.coin = e.enname
				this.coinCode = e.code
				if (!e.address) {
					let coinInfo = {
						coinCode: e.code
					}
					// 返回的币种没有充值地址就用接口传code换取虚拟币充值地址
					api.rechargeAddress(coinInfo).then(res => {
						this.coinAddress = res.address
						this.qr = this.coinAddress
					})
				} else {
					this.coinAddress = e.address
					this.qr = this.coinAddress
				}
			},
			// 获取二维码
			getQr(e) {
				this.qr = QR.createQrCodeImg(e)
			},
			getRechargeInfo(e) {
				api.rechargeConfig({
					type: this.pageState
				}).then(res => {
					this.reInfo = res
					if (this.pageState == 'crypto') {
						if (this.reInfo.coins[0].address) {
							this.coinAddress = this.reInfo.coins[0].address
							let img = this.reInfo.coins[0].address
							this.coin = this.reInfo.coins[0].enname
							this.coinCode = this.reInfo.coins[0].code
							this.getQr(img)
						} else {
							let coinInfo = {
								coinCode: this.reInfo.coins[0].code
							}
							// 返回的币种没有充值地址就用接口传code换取虚拟币充值地址
							api.rechargeAddress(coinInfo).then(res => {
								this.coinAddress = res.address
								this.qr = this.coinAddress
							})
						}
					} else {
						this.reInfo.fastAmount = this.reInfo.fastAmount.split(',')
						this.onlineInfo.tranAmt = this.reInfo.fastAmount[0]
						this.onlineInfo.payType = this.reInfo.payTypes[0].payType
					}


				})
			},
			goto(page) {
				// console.log(page);
				let url = '';
				switch (page) {
					case 'rechargeRecord':
						url = '/pages/recharge/rechargeRecord'
						break;
					default:
						break;
				}
				if (url) {
					// console.log(url);
					uni.navigateTo({
						url,
					});
				}

			},
			USDTRadioChange(e) {
				console.log(e);
			},

			copyAddress(value = "") {
				console.log(value)
				uniCopy({
					content: value,
					success: (res) => {
						uni.showToast({
							title: this.$t("login").copySuccess,
							duration: 3000,
						})
					},
					error: (e) => {
						uni.showToast({
							title: e,
							icon: 'none',
							duration: 2000,
						})
					}
				})
			},

		},
	}
</script>

<style lang="scss" scoped>
	.main {

		.right {
			position: absolute;
			right: 32rpx;
			font-size: 24rpx;
		}

		.head {
			margin-top: 200rpx;
			margin-left: 60rpx;
			width: 632rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 48rpx 0;

			.headItem {
				width: 300rpx;
				height: 68rpx;
				line-height: 68rpx;
				background: #211F32;
				border-radius: 16rpx;
				text-align: center;
				font-size: 32rpx;
				color: #A1A0A8;

				&.select {
					background: #00E8A2;
					color: #15141F;
				}

			}
		}

		.coinContent {
			padding: 0 32rpx;

			.input-item {
				overflow: hidden;
				position: relative;
				height: 124rpx;
				line-height: 124rpx;
				background: #211F32;
				margin-bottom: 48rpx;
				border-radius: 32rpx;
				padding: 0 40rpx;

				/deep/.u-form-item__body {
					padding: 0;
				}

				.input {
					width: 460rpx;
					height: 124rpx;
					display: inline-block;
					background: #211F32 !important;
				}

				.selectCoinBtn {
					position: absolute;
					height: 54rpx;
					top: 36rpx;
					right: 65rpx;
					line-height: 56rpx;
					font-size: 36rpx;
					padding: 0;
					color: #fff;

					&::after {
						display: block;
						position: absolute;
						content: '';
						background-image: url(../../static/me/ic_input_arrow_down.png);
						background-repeat: no-repeat;
						background-size: 32rpx;
						width: 32rpx;
						height: 32rpx;
						top: 12rpx;
						right: -40rpx;
					}
				}
			}

			.coin-item {
				height: 622rpx;
				background: #211F32;
				border-radius: 10px;
				overflow: hidden;
				padding: 0 40rpx;

				.QRCode {
					margin: 60rpx auto 32rpx;
					width: 310rpx;
				}

				.CoinAddressTitle {
					width: 340rpx;
					height: 40rpx;
					font-size: 14px;
					display: inline-block;
					color: #00E8A2;
				}

				.Copy {
					position: relative;
					height: 40rpx;
					display: inline-block;
					color: #00E8A2;
					font-size: 20rpx;
					margin-left: 70rpx;
					padding-left: 40rpx;

					&::before {
						display: block;
						position: absolute;
						content: '';
						background-image: url(../../static/recharge/ic_copy.png);
						background-repeat: no-repeat;
						background-size: 32rpx;
						width: 32rpx;
						height: 32rpx;
						top: 0rpx;
						left: 0rpx;
					}
				}

				.CoinAddress {
					margin-top: 12rpx;
					font-size: 20rpx;
					// transform: scale(0.83333);
					// transform-origin: 0 0;
					color: #A1A0A8;
				}

				.ScanQR {
					font-size: 20rpx;
					// transform: scale(0.83333);
					// transform-origin: 0 0;
					color: #A1A0A8;
				}

			}

			.message-item {
				margin: 32rpx 0 120rpx;
				padding: 0 16rpx;
				font-size: 24rpx;

				color: #A1A0A8;
			}

			.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: 64rpx;
								height: 64rpx;
								border-radius: 20rpx;
								overflow: hidden;
								display: inline-block;
								box-sizing: border-box;
								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;
					}

				}

			}
		}

		.cashContent {
			.enter {
				box-sizing: border-box;
				height: 422rpx;
				margin: 0 32rpx;
				background: #211F32;
				border-radius: 20rpx;
				padding: 24rpx 32rpx;

				.selectTitle {
					font-size: 24rpx;

				}

				.numberSelect {
					margin-top: 32rpx;
					height: 168rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					align-content: space-between;
					flex-wrap: wrap;

					.item {
						height: 68rpx;
						line-height: 68rpx;
						width: 186rpx;
						color: #A1A0A8;
						background: #323045;
						border-radius: 40rpx;
						text-align: center;
						font-size: 32rpx;

						&.select {
							background: #FF844B;
							color: #FFFFFF;
						}
					}
				}

				.input {
					height: 112rpx;
					background: #323045;
					border-radius: 32rpx;
					padding-left: 40rpx;
					margin-top: 32rpx;
					color: #fff;
				}
			}

			.RechargeMethod {
				box-sizing: border-box;
				height: 178rpx;
				margin: 32rpx;
				background: #211F32;
				border-radius: 20rpx;
				padding: 24rpx 32rpx;

				.methodTitle {
					font-size: 24rpx;
				}

				.methodSelect {
					margin-top: 32rpx;
					height: 112rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					align-content: space-between;
					flex-wrap: wrap;

					.item {
						height: 68rpx;
						line-height: 68rpx;
						width: 306rpx;
						color: #A1A0A8;
						background: #323045;
						border-radius: 40rpx;
						text-align: center;
						font-size: 32rpx;

						&.select {
							background: #FF844B;
							color: #FFFFFF;
						}
					}
				}


			}

			.button {
				width: 686rpx;
				box-sizing: border-box;
				height: 112rpx;
				margin: 16rpx 32rpx;
				background: #00E8A2;
				border-radius: 32rpx;
				font-weight: 700;
				font-size: 32rpx;
				color: #15141F !important;

			}
		}



	}
</style>
