<template>
	<view class="container">
		<web-view :webview-styles="webviewStyles" style="visibility: hidden; height: 1px; width: 100%;" src="/static/web3/transfer-web.html" @message="handleWebViewMessage"
			:fullscreen="false" :update-title="false"></web-view>
		<view class="paymoney">
			<view class="titcont">
				<view class="image">
					<image :src="BASE_URL + detail.img" mode=""></image>
				</view>
				<view class="cont">
					{{detail.title_cn}}
				</view>
			</view>
			<view class="money">
				<view class="moneytit">
					支付金額
				</view>
				<view class="moneynum">
					${{detail.usdt}}
				</view>
			</view>
		</view>
		<view class="paymentmethod">
			<view class="p_tit">
				付款方式
			</view>
			<view class="moneybi">
				<view class="m_item">
					<view class="m_left">
						<view class="img">
							<image src="/static/usdt.png" mode="heightFix"></image>
						</view>
						<view class="">
							USDT
						</view>
					</view>
					<view class="m_right">
						<label class="radio">
							<radio value="r1" checked="true" color="#4e5bd9" size="20" />
						</label>
					</view>
				</view>
			</view>
		</view>
		<!-- 轉賬密碼彈框  -->
		<view class="modal" v-if="modalNamezz">
			<view class="modal-content">
				<view class="modal-header">
					<view class="zz_content">請輸入驗證信息</view>
				</view>
				<view class="modal-body">
					<view class="modal-item zf_mod_item">
						<text class="modal-label">郵箱:</text>
						<view class="">{{userInfos.email}}</view>
					</view>
					<view class="modal-item">
						<text class="modal-label">支付密碼:</text>
						<u--input color="#fff" style="width: 70%;" :value="zhifuMimaZz" :password="showPassword2"
							border="none" @input="handleInput2"></u--input>
						<img :src="!showPassword2 ? showpwdImg : hidepwdImg" @tap="changePassword()"
							style="width: 50rpx;height: 50rpx;"></img>
					</view>
					<view class="modal-item zf_mod_item">
						<text class="modal-label">郵箱驗證碼:</text>
						<u--input color="#fff" style="width: 70%;" v-model="emailCode" border="none"></u--input>
						<view class="sendcode" @click="tosendemail">{{emaiTip}}</view>
					</view>
					<view class="modal-item zf_mod_item">
						<text class="modal-label">谷歌驗證碼:</text>
						<u--input color="#fff" style="width: 70%;" v-model="googleCode" border="none"></u--input>
						<view class="sendcode" @click="googleemail">{{googleTip}}</view>
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-button cancel" @tap="offModalBtnZz">取消</button>
					<button class="modal-button confirm" @tap="modalBtnZz">確定</button>
				</view>
			</view>
		</view>
		<!-- 購買 -->
		<view class="buy">
			<view class="label" style="padding-left: 10rpx;">
				<checkbox-group @change="checkboxChange">
					<checkbox :checked="isDisable" style="font-size: 30rpx;" value="1">我已閱讀並同意</checkbox>
				</checkbox-group>
			</view>
			<view style="font-size: 27rpx;color: rgba(255,255,255,0.8);line-height: 40rpx;">
				<text style="color: #5A27DC;">《眾籌採購算力服務器協議、算力服務器租賃協議》</text>
			</view>
			<view class="buypurchase">
				<view class="purchase" @click="purchase">
					購買
				</view>
			</view>
		</view>
		<u-modal :show="show" :title="title" @cancel="cancel" @confirm="confirm" :showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	import {
		BASE_URL
	} from '@/request/config.js'
	import {
		_accountdetail,
		_guidedetail,
		_walletinfo,
		_userInfos
	} from "@/request/api.js"
	import {
		_buyguide,
		_buyaccount,
		_payorderres
	} from "@/request/api2.js"
	import {
		publicjiemi
	} from "@/common/jiemi.js"
	import MD5 from "blueimp-md5";
	export default {
		data() {
			return {
				emailCode:"",
				googleCode:"",
				emaiTip:"發送",
				googleTip:"發送",
				webviewStyles: {
					progress: false,
					width: "0px",
					height: "0px"
				},
				webviewInstance: null,
				show: false,
				title: '確定購買碼？',
				BASE_URL,
				id: null,
				detail: {},
				name: '',
				showpwdImg: "static/icon/eye_on.png",
				hidepwdImg: "static/icon/eye_off.png",
				showPassword2: true,
				zhifuMimaZz: '',
				modalNamezz: false,
				isDisable: false,
				payMoneyStyle: 'USDT',
				toAdress: '',
				userMoneyAdress: "", //用戶錢包地址
				userInfos: {},
				outMoney: '',
				obj: {},
				order_id: ''
			};
		},
		onReady() {
			// 获取当前页面
			const currentWebview = this.$scope.$getAppWebview();
			// 获取web-view组件对象
			this.webviewInstance = currentWebview.children()[0];
		},
		onLoad(options) { 
			// 获取传递的参数
			this.id = options.id;
			console.log('options.id', options.id);
			this.name = options.name;
			console.log('namemeee', options.name);
		},
		async mounted() {
			this.getUserInfos();
			if (this.name == 'account') {
				const res = await _accountdetail({
					id: this.id
				})
				this.detail = res.data
			} else {
				const res = await _guidedetail({
					id: this.id
				})
				this.detail = res.data
			}
		},
		methods: {
			async tosendemail(){
				if (this.emaiTip == "發送") {
					let num = 60;
					let emaiTimer = setInterval(() => {
						this.emaiTip = num + 's';
						num--;
						if (num < 0) {
							this.emaiTip = "發送";
							clearInterval(emaiTimer)
						}
					}, 1000)
					let res = await _emailSend({
						email: this.userInfos.email,
						event: "check"
					});
					if (res.code === 1) {
						uni.showToast({
							title: '發送成功',
							icon: 'none'
						});
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				} else {
					return
				}
			},
			googleemail() {
				let num = 60;
				let googleTimer = setInterval(() => {
					this.googleTip = num + 's';
					num--;
					if (num < 0) {
						this.googleTip = "發送";
						clearInterval(googleTimer)
					}
				}, 1000)
			},
			// 接收WebView消息
			handleWebViewMessage(event) {
				let _that = this;
				let obj = event.detail.data;
				this.obj = event.detail.data;
				console.log('this.objthis.obj:', obj);
				console.log('收到WebView消息:', obj);
				if (obj.length > 0) {
					uni.hideLoading();
					if (obj[0].type == 'USDT') {
						if (obj[0].status == 'success') {
							uni.showToast({
								title: `USDT轉帳成功`,
								icon: 'none'
							})
							_that.payorderres(obj[0].hash)
						} else {
							uni.showToast({
								title: `USDT轉帳失敗`,
								icon: 'none'
							})
						}
					}
					if (obj[0].type == 'BNB') {
						if (obj[0].status == 'success') {
							uni.showToast({
								title: `BNB轉帳成功`,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: `BNB轉帳失敗`,
								icon: 'none'
							})
						}
					}
					_that.emailCode = "";
					_that.googleCode = "";
					_that.emaiTip = "發送";
					_that.googleTip = "發送";
					_that.zhifuMimaZz = "";
					_that.payMoneyStyle = 'USDT';
					_that.modalNamezz = false;
				}
			},
			async getUserInfos() {
				let res = await _userInfos();
				if (res.code === 1) {
					this.userInfos = res.data.userinfo;
					this.userMoneyAdress = this.userInfos.wallet.address;
				}
			},
			purchase() {
				if (this.isDisable) {
					this.show = true
				} else {
					uni.showToast({
						title: "請先同意協議書",
						icon: "none"
					})
				}

			},
			cancel() {
				this.show = false
			},
			offModalBtnZz() {
				this.modalNamezz = false;
				this.zhifuMimaZz = "";
				this.emailCode = "";
				this.googleCode = "";
				this.emaiTip = "發送";
				this.googleTip = "發送";
			},
			changePassword() {
				this.showPassword2 = !this.showPassword2;
			},
			handleInput2(event) {
				this.zhifuMimaZz = event;
			},
			async confirm() {
				// 攻略
				if (this.name == 'account') {
					let res = await _buyaccount({
						id: this.id
					})
					console.log('account',res.data);
					if(res.code === 1){
						this.outMoney = res.data.usdt;
						this.toAdress = res.data.to;
						this.order_id = res.data.order_id;
						this.modalNamezz = true;
						this.show = false;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				} else {
					// 賬號  
					let res = await _buyguide({
						id: this.id
					})
					console.log('guide', res.data);
					if(res.code === 1){
						this.outMoney = res.data.usdt;
						this.toAdress = res.data.to;
						this.order_id = res.data.order_id;
						this.modalNamezz = true;
						this.show = false;
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				}
				
			},
			async modalBtnZz() {
				let _that = this;
				if (!_that.zhifuMimaZz || !this.emailCode || !this.googleCode) return uni.showToast({
					title: '請填寫正確資訊',
					icon: 'none'
				})
				const params = {
					code: this.emailCode,
					googlecode: this.googleCode,
					paykey: MD5(this.zhifuMimaZz + (Math.floor(Date.now() / 1000))),
					timestamp: Math.floor(Date.now() / 1000),
				}

				let res = await _walletinfo(params);
				if (res.code === 1) {
					uni.showLoading({
						title: '打款中......'
					});
					if (_that.payMoneyStyle == 'USDT') {
						let userSiyao = await publicjiemi(2, _that.zhifuMimaZz, _that.userMoneyAdress);
						const params = {
							type: 'USDT',
							fromAdress: _that.userMoneyAdress,
							toAdress: _that.toAdress,
							coin: _that.outMoney,
							privateKey: userSiyao
						};
						console.log('params', params);
						if (_that.webviewInstance) {
							_that.webviewInstance.evalJS(`
										usdtTransfer(${JSON.stringify(params)});
								  `);
						}
					} else if (_that.payMoneyStyle == 'BNB') {
						let userSiyao = await publicjiemi(2, _that.zhifuMimaZz, _that.userMoneyAdress);
						const params = {
							type: 'BNB',
							fromAdress: _that.userMoneyAdress,
							toAdress: _that.toAdress,
							coin: _that.outMoney,
							privateKey: userSiyao
						};
						if (_that.webviewInstance) {
							_that.webviewInstance.evalJS(`
										bnbTransfer(${JSON.stringify(params)});
								  `);
						}
					}
				}
			},
			async payorderres(hash) {
				let res = await _payorderres({
					type: this.name,
					oid: this.order_id,
					tx: hash
				})
				console.log('回调resssss', res)
				if (res.code == 1) {
					uni.navigateTo({
						url: `/pages/game/paysuccess?name=${this.name}`
					})
				}
			},
			checkboxChange(e) {
				this.isDisable = !this.isDisable
			}
		}
	}
</script>

<style lang="scss">
	.container {
		border-top: 1px solid dimgrey;
		width: 100vw;
		min-height: 100vh;
		padding: 10px;
		box-sizing: border-box;
		background-color: #292d5b;

		image {
			width: 100%;
			height: 100%;
			border-radius: 20rpx;
		}

		.paymoney {
			border-radius: 20rpx;
			background-color: #fff;
			padding: 30rpx;

			.titcont {
				padding: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #f4f6f8;

				.image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
				}

				.cont {
					width: 500rpx;
					font-size: 27rpx;
				}
			}

			.money {
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				margin: 30rpx 0 10rpx 0;

				.moneytit {
					font-weight: 600;
					font-size: 30rpx;
				}

				.moneynum {
					color: #FD5C5C;
					font-size: 34rpx;
					font-weight: 600;
				}
			}

		}

		.paymentmethod {
			border-radius: 20rpx;
			height: 240rpx;
			background-color: #fff;
			margin-top: 30rpx;

			.p_tit {
				padding: 30rpx;
				border-bottom: 1rpx solid #ccc;
			}

			.moneybi {
				padding: 30rpx;

				.m_item {
					width: 100%;
					height: 90rpx;
					background-color: #ececf8;
					border-radius: 20rpx;
					padding: 10rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.m_left {
						display: flex;
						align-items: center;

						.img {
							width: 50rpx;
							height: 50rpx;
							margin-right: 50rpx;
						}
					}
				}

			}
		}

		.buy {
			width: 100vw;
			background-color: #fff;
			height: 220rpx;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx 20rpx 0 0;

			.buypurchase {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
			}

			.purchase {
				margin-top: 10rpx;
				width: 620rpx;
				height: 80rpx;
				background-color: #4f5ad8;
				border-radius: 40rpx;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content: center;
			}

		}

		.modal {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			background-color: rgba(0, 0, 0, 0.6);
			display: flex;
			align-items: flex-end;
			z-index: 999;
		}

		.modal-content {
			background-color: #b6b5c8;
			border-radius: 20px 20px 0 0;
			padding: 20px;
			box-sizing: border-box;
			width: 100%;
			animation: slideUp 0.3s ease-out;
			box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1);
		}

		@keyframes slideUp {
			from {
				transform: translateY(100%);
			}

			to {
				transform: translateY(0);
			}
		}

		.modal-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
		}

		.modal-title {
			font-size: 20px;
			font-weight: bold;
			color: #333;
		}

		.modal-close {
			font-size: 24px;
			color: #999;
			cursor: pointer;
		}

		.modal-body {
			margin-bottom: 20px;
		}

		.modal-item {
			display: flex;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 1px solid #f0f0f0;
		}

		.modal-label {
			color: #666;
			font-size: 14px;
			margin-right: 20rpx;
		}

		.modal-value {
			flex: 1;
			font-weight: bold;
			color: #333;
			font-size: 14px;
			word-break: break-all;
			text-align: right;
			overflow: hidden;
			/* 超出部分隱藏 */
			text-overflow: ellipsis;
			/* 超出部分顯示省略號 */
			white-space: nowrap;
			/* 不換行 */
		}

		.modal-footer {
			display: flex;
			justify-content: space-between;
		}

		.modal-button {
			width: 48%;
			height: 44px;
			border-radius: 22px;
			font-size: 16px;
			font-weight: bold;
			border: none;
			cursor: pointer;
			transition: all 0.3s ease;
		}

		.modal-button.cancel {
			background-color: #f0f0f0;
			color: #333;
		}

		.modal-button.cancel:hover {
			background-color: #e0e0e0;
		}

		.modal-button.confirm {
			background-color: #4CAF50;
			color: white;
		}

		.modal-button.confirm:hover {
			background-color: #45a049;
		}
	}
</style>