<template>
	<view class="container">
		<view style="
				height: 40px;
				color: #fff;
				text-align: right;
				display: flex;
			">
			<view style="display: flex;align-items: center;height: 40px;flex: 1;">
				<view style="height: 40px;line-height: 40px;margin-right: 5px;">
					<image style="height: 25px;border-radius: 50%;margin-top: 6px;" src="/static/logo.png"
						mode="heightFix">
					</image>
				</view>
				<view style="display: flex;flex-direction: column;height: 40px;align-items: center;">
					<view style="height: 18px;font-size: 13px;margin-top: 2px;">元算力</view>
					<view style="font-size: 8px;height: 18px;">--Onlife--</view>
				</view>
			</view>
			<view class="top-rig">
				<view style="color: black;font-weight: bold;font-size: 15px;">
					{{userMoneyAdressOptions(userMoneyAdress)}}
				</view>
				<view class="">
					<u-icon @tap="showMoney" size="20" style="margin-left: 10rpx;"
						:name="isShowMoney ? 'eye-fill' : 'eye-off'"></u-icon>
				</view>
			</view>
		</view>
		<view class="card" style="margin-top: 20px;">
			<view class="info-row">
				<text class="info-label">我的認購（USDT）:</text>
				<text v-if="isShowMoney" class="info-value">{{ computingPower.my_miner_fee || 0 }}</text>
				<text v-else class="info-value">****</text>
			</view>
		</view>
		<view class="card">
			<view class="card-header">
				<text>我的算力 (G)</text>
				<!-- <button @tap="getMinerlist" class="small-button">查看訂單</button> -->
				<view class="todel" @click="getMinerlist">
					查看訂單<u-icon name="arrow-right" color="#A0A0FF" size="16" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
			<view class="info-row">
				<text class="info-label">認購的算力（G）:</text>
				<text v-if="isShowMoney" class="info-value">{{ computingPower.my_miner || 0 }}</text>
				<text v-else class="info-value">****</text>
			</view>
			<view class="info-row">
				<text class="info-label">服務中的算力（G）:</text>
				<text v-if="isShowMoney" class="info-value">{{ computingPower.valid_miner || 0 }}</text>
				<text v-else class="info-value">****</text>
			</view>
			<!-- 剩餘 -->
			<view class="info-row">
				<text class="info-label">算力總花費（USDT）:</text>
				<text v-if="isShowMoney" class="info-value"> {{ computingPower.my_miner_fee }}</text>
				<text v-else class="info-value">****</text>
			</view>
		</view>
		<view class="card">
			<view class="card-header">
				<text>資產收益</text>
				<!-- <button class="small-button" @tap="socreGet('資產收益領取')">立即領取</button> -->
				<view class="todel" @click="socreGet('資產收益領取')">
					立即領取<u-icon name="arrow-right" color="#A0A0FF" size="16" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
			<view class="info-row">
				<text class="info-label">我的總收益（USDT）:</text>
				<text v-if="isShowMoney" class="info-value">{{ zichanshouyi.all }}</text>
				<text v-else class="info-value">****</text>
			</view>
			<view class="info-row">
				<text class="info-label">待領取收益（USDT）:</text>
				<text v-if="isShowMoney" class="info-value">{{ zichanshouyi.await }}</text>
				<text v-else class="info-value">****</text>
			</view>
			<view class="info-row">
				<text class="info-label">已領取收益（USDT）:</text>
				<text v-if="isShowMoney" class="info-value">{{ zichanshouyi.collected }}</text>
				<text v-else class="info-value">****</text>
			</view>
		</view>
		<view class="card">
			<view class="card-header">
				<text>市場佣金</text>
				<!-- <button class="small-button" @tap="socreGet('佣金收益領取')">立即領取</button> -->
				<view class="todel" @click="socreGet('佣金收益領取')">
					立即領取<u-icon name="arrow-right" color="#A0A0FF" size="16" style="margin-left: 10rpx;"></u-icon>
				</view>
			</view>
			<view class="info-row">
				<text class="info-label">我的總收益（USDT）:</text>
				<text v-if="isShowMoney" class="info-value">{{ shicyongj.all }}</text>
				<text v-else class="info-value">****</text>
			</view>
			<view class="info-row">
				<text class="info-label">待領取收益（USDT）:</text>
				<text v-if="isShowMoney" class="info-value">{{ shicyongj.await }}</text>
				<text v-else class="info-value">****</text>
			</view>
			<view class="info-row">
				<text class="info-label">已領取收益（USDT）:</text>
				<text v-if="isShowMoney" class="info-value">{{ shicyongj.collected }}</text>
				<text v-else class="info-value">****</text>
			</view>
		</view>
		<view class="card">
			<view class="card-header">
				<text>領取記錄</text>
			</view>
			<view class="withdrawal-container">
				<view class="table-header">
					<view class="th">提現金額</view>
					<view class="th">狀態</view>
					<view class="th">操作</view>
				</view>
				<scroll-view class="table-body" scroll-y @scrolltolower="loadMore" :style="{height: 250 + 'px'}">
					<view class="no-data" v-if="list.length === 0">暫無數據</view>
					<view class="tr" v-for="(item, index) in list" :key="index">
						<view v-if="isShowMoney" class="td">{{ item.amount }}</view>
						<view v-else class="td">****</view>
						<view v-if="isShowMoney" class="td">
							<text v-if="item.status == 0" style="color: orange;">審核中</text>
							<text v-if="item.status == 1" style="color: green;">已完成</text>
							<text v-if="item.status == -1" style="color: red;">已拒絕</text>
						</view>
						<view v-else class="td">****</view>
						<view v-if="isShowMoney" class="td">
							<button class="btn-detail" @click="viewDetail(item)">詳細</button>
						</view>
						<view v-else class="td">****</view>
					</view>

					<view class="loading" v-if="loading">加載中...</view>
					<view class="no-more" v-if="noMore">沒有更多數據了</view>
				</scroll-view>
			</view>
		</view>
		<!-- 查看訂單 -->
		<view class="modal" v-if="showModal">
			<view class="modal-content">
				<view class="modal-header">
					<text class="modal-title">訂單詳細</text>
					<text class="modal-close" @click="showModal = false">×</text>
				</view>
				<view class="modal-body" v-for="item in suanliList" :key="item.id">
					<view class="modal-item" style="display: flex;border-bottom: 1px solid darkgrey;">
						<text class="modal-label">訂單號：</text>
						<text class="modal-value">{{item.order_no}}</text>
					</view>
					<view class="modal-item">
						<text class="modal-label">訂單算力（G）：</text>
						<text class="modal-value">{{item.value}}</text>
					</view>
					<view class="modal-item">
						<text class="modal-label">收益天數：</text>
						<view class="modal-value">{{item.reward_day}}</view>
					</view>
					<view class="modal-item">
						<text class="modal-label">服務期限：</text>
						<view class="modal-value">{{item.timeline}}</view>
					</view>
					<view class="modal-item">
						<text class="modal-label">累計收益：</text>
						<text class="modal-value">{{item.reward_all}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 顯示資產信息 -->
		<view class="modal" v-if="moneyModal">
			<view class="modal-content" style="height: 32vh;">
				<view class="modal-header">
					<view class="zz_content">請輸入支付密碼</view>
				</view>
				<view class="modal-body" style="border:none;">
					<view class="modal-item">
						<text class="modal-label">支付密碼:</text>
						<u--input color="#fff" style="width: 70%;" :value="zhifuMima" :password="showPassword"
							border="none" @input="handleInput"></u--input>
						<img :src="!showPassword ? showpwdImg : hidepwdImg" @tap="changePassword()"
							style="width: 50rpx;height: 50rpx;"></img>
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-button cancel" @tap="moneyModal = false">取消</button>
					<button class="modal-button confirm" @tap="modalBtn">確定</button>
				</view>
			</view>
		</view>
		<view class="modal" v-if="detailDialog">
			<view class="modal-content" style="height: 50vh;">
				<view class="modal-header">
					<text class="modal-title">領取詳細</text>
					<text class="modal-close" @click="detailDialog = false">×</text>
				</view>
				<view class="modal-body">
					<view class="modal-item" style="display: flex;border-bottom: 1px solid darkgrey;">
						<text class="modal-label">申請金額：</text>
						<text class="modal-value">{{detailrowinfos.amount}}</text>
					</view>
					<view class="modal-item">
						<text class="modal-label">到賬金額：</text>
						<text class="modal-value">{{detailrowinfos.paid_fee}}</text>
					</view>
					<view class="modal-item">
						<text class="modal-label">手續費：</text>
						<view class="modal-value">{{detailrowinfos.charge_fee}}</view>
					</view>
					<view class="modal-item">
						<text class="modal-label">手續費率：</text>
						<view class="modal-value">{{detailrowinfos.charge_rate}}</view>
					</view>
					<view class="modal-item">
						<text class="modal-label">交易hash：</text>
						<text class="modal-value">{{detailrowinfos.tx}}</text>
					</view>
					<view class="modal-item">
						<text class="modal-label">申請時間：</text>
						<view class="modal-value">{{formatDate(detailrowinfos.createtime * 1000)}}</view>
					</view>
					<view class="modal-item">
						<text class="modal-label">到賬時間：</text>
						<text class="modal-value"
							v-if="detailrowinfos.updatetime">{{formatDate(detailrowinfos.updatetime * 1000)}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		_miners,
		_cashoutscore,
		_taxinfo,
		_minerordlist,
		_rewardstatic,
		_userInfos,
		_walletinfo,
		_getwithdrawlogs
	} from "@/request/api.js"
	import MD5 from "blueimp-md5";
	export default {
		data() {
			return {
				emailCode:"",
				googleCode:"",
				emaiTip:"發送",
				googleTip:"發送",
				detailrowinfos: {},
				detailDialog: false,
				list: [],
				page: 1,
				pageSize: 10,
				loading: false,
				noMore: false,
				scrollHeight: 500,
				showpwdImg: "static/icon/eye_on.png",
				hidepwdImg: "static/icon/eye_off.png",
				showPassword: true,
				zhifuMima: "",
				moneyModal: false,
				userMoneyAdress: "",
				showModal: false,
				computingPower: {}, //我的算力
				taxinfoNum: {}, //領取相關
				suanliList: [], //算力訂單詳細
				zichanshouyi: {}, //資產收益
				shicyongj: {}, //市場佣金
				userInfos: {},
				isShowMoney: false,
			}
		},
		onShow() {
			// 計算滾動區域高度
			const sysInfo = uni.getSystemInfoSync();
			this.scrollHeight = sysInfo.windowHeight - 100; // 減去表頭和其他元素高度
			this.list = [];
			this.page = 1;
			this.pageSize = 10;
			this.getUserInfos();
		},
		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)
			},
			viewDetail(item) {
				this.detailrowinfos = {};
				this.detailDialog = true;
				this.detailrowinfos = {
					...item
				};
			},
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hour = String(date.getHours()).padStart(2, '0');
				const minute = String(date.getMinutes()).padStart(2, '0');
				const miao = String(date.getSeconds()).padStart(2, '0');
				return `${year}-${month}-${day} ${hour}:${minute}:${miao}`;
			},
			loadMore(){
				this.page++;
				this.getrawLogs();
			},
			handleData(newData) {
				if (newData.length < this.pageSize) {
					this.noMore = true;
				}

				this.list = [...this.list, ...newData];
				this.page++;
				this.loading = false;
			},
			async getrawLogs() {
				let res = await _getwithdrawlogs({page:this.page,listrow:this.pageSize});
				if (res.code === 1) {
					const newData = res.data.data;
					this.handleData(newData);
				}
				console.log(res, '領取記錄')
			},
			async modalBtn() {
				let _that = this;
				if (!_that.zhifuMima) return uni.showToast({
					title: '請輸入您的支付密碼',
					icon: 'none'
				})
				const params = {
					paykey: MD5(_that.zhifuMima + (Math.floor(Date.now() / 1000))),
					timestamp: Math.floor(Date.now() / 1000),
					event: "seepanel"
				}
				let res = await _walletinfo(params);
				if (res.code === 1) {
					_that.isShowMoney = true;
					_that.moneyModal = false;
					_that.zhifuMima = "";
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
					})
				}
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			handleInput(event) {
				this.zhifuMima = event;
			},
			showMoney() {
				if (this.isShowMoney) {
					this.isShowMoney = false;
				} else {
					this.moneyModal = true;
				}
			},
			async getUserInfos() {
				let res = await _userInfos();
				if (res.code === 1) {
					this.userInfos = res.data.userinfo;
					this.userMoneyAdress = this.userInfos.wallet.address;
					this.getMiners();
					this.getrawLogs();
					this.getTaxinfo();
					this.getRewardstatic();
				}
			},
			userMoneyAdressOptions(data) {
				let start = data.substring(0, 6);
				let end = data.substring(data.length - 4);
				let middle = "……";
				let finalString = start + middle + end;
				return finalString
			},
			//算力訂單
			async getMinerlist() {
				let res = await _minerordlist();
				if (res.code === 1) {
					this.suanliList = res.data;
					if (this.suanliList.length > 0) {
						this.showModal = true;
					} else {
						uni.showToast({
							title: "暫無訂單",
							icon: "none"
						})
					}
				}
			},
			//算力列表
			async getMiners() {
				let res = await _miners();
				if (res.code === 1) {
					this.computingPower = res.data;
					this.getTaxinfo();
					this.getRewardstatic();
				}
			},
			async getRewardstatic() {
				let res = await _rewardstatic();
				if (res.code === 1) {
					this.zichanshouyi = res.data.prop; //資產收益
					this.shicyongj = res.data.commission; //市場佣金
				}
			},
			//領取收益相關
			async getTaxinfo() {
				let res = await _taxinfo();
				if (res.code === 1) {
					this.taxinfoNum = res.data;
				}
			},
			//領取收益
			async socreGet(type) {
				let score = null;
				let a = Number(this.zichanshouyi.await);
				let b = Number(this.shicyongj.await);
				let c = Number(this.taxinfoNum.cashoutmin);
				type == "資產收益領取" ? score = a : score = b;
				if (score < c) {
					uni.showToast({
						title: `待領取收益大於等於${this.taxinfoNum.cashoutmin}可領取`,
						icon: "none",
						duration: 1000
					})
					return
				}
				const params = {
					score,
					type
				};
				let res = await _cashoutscore(params);
				if (res.code === 1) {
					uni.showToast({
						title: `領取成功！`,
						icon: "none",
						duration: 1000
					})
					this.getRewardstatic();
				} else {
					uni.showToast({
						title: `領取失敗！`,
						icon: "none",
						duration: 1000
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		border-top: 1px solid dimgrey;
		width: 100vw;
		min-height: 100vh;
		padding: 20px;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #000033, #51599b);
	}

	.card {
		background: linear-gradient(to bottom, #393C84, #9193C6);
		border-radius: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 40rpx;
	}


	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
		color: white;
		border-bottom: 1.5px solid #A8AAE0;
		height: 40px;
		line-height: 40px;
	}

	.small-button {
		background-color: #4caf50;
		height: 25px;
		line-height: 25px;
		color: white;
		border-radius: 15px;
		font-size: 12px;
		margin-right: 2%;
	}

	.info-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 13px;
	}

	.info-label {
		color: #e0e0e0;
		width: 55%;
	}

	.info-value {
		color: white;
		font-weight: bold;
		border: 1px solid #A8AADD;
		flex: 1;
		border-radius: 10px;
		height: 60rpx;
		display: flex;
		justify-content: center;
		align-items: 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);
		height: 37vh;
		overflow: auto;
	}

	@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;
	}

	.todel {
		display: flex;
		font-size: 24rpx;
		color: #A0A0FF;
	}

	.top-rig {
		padding: 10rpx 20rpx;
		display: flex;
		background-color: #DADBF1;
		justify-content: center;
		align-items: center;
		border-radius: 30rpx;
		box-sizing: border-box;
	}
	.withdrawal-container {
		width: 100%;
	}
	
	.table-header {
		display: flex;
		font-weight: bold;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.th {
		flex: 1;
		padding: 20rpx 0rpx;
		text-align: center;
		font-size: 28rpx;
		color: #fff;
	}
	
	.table-body {
		width: 100%;
	
	}
	
	.tr {
		display: flex;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.td {
		flex: 1;
		padding: 20rpx 10rpx;
		text-align: center;
		font-size: 26rpx;
		color: #fff;
	}
	
	.btn-detail {
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		background-color: #45a049;
		color: white;
		border-radius: 6rpx;
		border: none;
		line-height: 1.5;
	}
	
	.loading,
	.no-more,
	.no-data {
		text-align: center;
		padding: 20rpx;
		color: #999;
		font-size: 26rpx;
	}
	
	.no-data {
		padding: 100rpx 0;
	}
</style>