<template>
	<view class="container">
		<view class="wollet">
			<view class="wollet_top">
				<view class="top_left">
					<!-- @click="oneshow = true" -->
					<u-icon name="list" color="#9e9cba" size="28" @click="showMoneyList"></u-icon>
				</view>
				<view class=" top_right">
					<view class="top_wollet" @click="tocreatewallet">
						<image src="/static/wallet.png" mode=""></image>
					</view>
					<view class="top_code" @click="scanCode">
						<image src="/static/wallet2.png" mode=""></image>
					</view>
				</view>
			</view>
			<!-- 錢包餘額 -->
			<view class="balance">
				<view class="balance_left">
					<view class="num" v-if="showbalance">
						$0
					</view>
					<view class="num" v-else>
						****
					</view>
					<view class="eye" @click="changebalance">
						<image :src="!showbalance ? showbalanceimg : hidebalanceimg" mode=""></image>
					</view>
				</view>
				<view class="balance_right">
					<view class="money" style="font-size: 40rpx;">
						$
					</view>
				</view>
			</view>
			<!-- thr -->
			<view class="codelist">
				<view class="codeitem" @click="accountsshowdialog">
					<view class="item_image">
						<image src="/static/wallet6.png" mode="widthFix"></image>
					</view>
					<view class="item_tit">
						轉賬
					</view>
				</view>
				<view class="codeitem" @click="topaymentcode">
					<view class="item_image">
						<image src="/static/wallet5.png" mode="widthFix"></image>
					</view>
					<view class="item_tit">
						收款
					</view>
				</view>
				<view class="codeitem" @click="flashexchange">
					<view class="item_image">
						<image src="/static/wallet4.png" mode="widthFix"></image>
					</view>
					<view class="item_tit">
						閃兌
					</view>
				</view>
				<view class="codeitem" @click="flashexchange">
					<view class="item_image">
						<image src="/static/wallet3.png" mode="widthFix"></image>
					</view>
					<view class="item_tit">
						更多工具
					</view>
				</view>
			</view>
			<!-- cont -->
			<view class="tabs">
				<view class="tabs_left">
					<u-tabs :list="tabslist" @click="tabs" lineColor="#4c56d6" :activeStyle="{
            color: '#fff'
        }"></u-tabs>
				</view>
				<view class="tabs_right">
					<view class="search" style="width: 220rpx;">
						<u-search placeholder="搜索" v-model="searchvalue" :showAction="false" height="60rpx"
							bgColor="#3f3a63"></u-search>
					</view>
					<view class="add">
						<u-icon name="plus" color="#FFF" size="14" @click="toassets"></u-icon>
					</view>
				</view>
			</view>
			<!-- moneybi -->
			<view class="moneylist">
				<view class="moneyitem" @click="biDetail" v-for="item in 4">
					<view class="item_le">
						<image src="/static/wallet7.png" mode="heightFix"></image>
					</view>
					<view class="item_ri">
						<view class="name">
							<view class="">
								BNB
							</view>
							<view style="margin-top: 12rpx; font-size: 25rpx;">
								<text style="color: #908baf;">$0</text><text
									style="color: limegreen;">+0%</text>
							</view>
						</view>
						<view class="number">
							<view class="" style="color:#fff">
								0
							</view>
							<view style="margin-top: 12rpx; font-size: 25rpx;">
								<text style="color: #908baf;">$0</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出 -->
		<u-popup :show="oneshow" mode="bottom" @close="oneclose" round="10" :closeable="true"
			:closeOnClickOverlay="false">
			<view style="height: 950rpx;">
				<view class="search">
					<template v-if="!showsearch">
						<u-icon name="search" color="black" size="28" @click="showsearch = true"></u-icon>
						<view class="tit">
							錢包列表
						</view>
					</template>
					<template v-else>
						<view class="" style="width: 500rpx;">
							<u-search placeholder="請輸入錢包名稱" v-model="onesearchvalue" :showAction="false" height="60rpx"
								bgColor="#f6f6f6"></u-search>
						</view>
						<view style="margin-left: 20rpx;" @click="showsearch = false">
							取消
						</view>
					</template>
				</view>
				<!-- cont -->
				<view class="onecontent">
					<!-- 左邊 -->
					<view class="onecont-left">
						<scroll-view scroll-y="true" class="scroll-Y" style="height: 860rpx;">
							<view :class="[{'onecont-leftitem':true},{'oneactive':oneactive == index}]"
								v-for="(index,item) in 6" :key="index" @click="Oneclassification(index)">
								<view class="oneleftimg">
									<image src="/static/wallet7.png" mode="heightFix"></image>
								</view>
							</view>
						</scroll-view>
					</view>
					<!-- 右邊 -->
					<view class="onecont-right">
						<view class="rig-top">
							<view class="rig-tit">
								幣安智能鏈
							</view>
							<view class="rig-add" @click="show = true">
								<u-icon name="plus" color="#050419" :bold="true" size="10"></u-icon>
							</view>
						</view>
						<!-- item -->
						<view class="rig-cont">
							<scroll-view scroll-y="true" style="height: 760rpx;">
								<view class="onecont-rightitem" v-for="(item,index) in 6" :key="index"
									@click="pitchon(index)">
									<view class="item_ri">
										<view class="name">
											<view class="" style="color: #6975FF;">
												hi-2
											</view>
											<view style="margin-top: 12rpx; font-size: 25rpx;">
												<text
													style="color: #172463;">️{{userMoneyAdressOptions(userMoneyAdress)}}</text>
												<image @tap="copyAdress(userMoneyAdress)" src="/static/copy1.png"
													style="width: 30rpx;height: 30rpx;margin-left: 10px;"></image>
											</view>
										</view>
										<view class="number">
											<view class="">
												<!-- v-show="correctval == index" -->
												<u-icon name="checkmark" color="#6975FF" size="24"
													:class="{'hide':true,'show':correctval == index}"></u-icon>
											</view>
											<view style="margin-top: 12rpx; font-size: 25rpx; color:#6975FF">
												1.5588 <text style="margin-left: 10rpx;">BNB</text>
											</view>
										</view>
									</view>
								</view>
							</scroll-view>
						</view>
					</view>
					<view class="botmore">
						<u-icon name="grid" color="#2979ff" size="28"></u-icon>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 二层弹框 -->
		<u-popup :show="show" mode="bottom" @close="close" :closeable="true">
			<view style="height: 600rpx; padding: 30rpx;">
				<view style="margin-bottom: 65rpx;">選擇添加方式</view>
				<view class="createwa" @click="towallet">
					創建錢包
				</view>
				<view class="createwa" style="margin-bottom: 120rpx;">
					導入錢包
				</view>
				<view class="createwa" @click="show = false">
					關閉
				</view>
			</view>
		</u-popup>
		<!-- 轉賬弹框 -->
		<u-popup :show="accountsshow" mode="bottom" @close="accountsclose" round="10" :closeable="true">
			<view style="height: 800rpx; padding: 30rpx;">
				<view class="accounts">選擇轉賬代幣</view>
				<view class="search" style="width: 655rpx;">
					<u-search placeholder="請輸入代幣名稱進行搜索" v-model="accountsvalue" :showAction="false" height="80rpx"
						bgColor="#f6f6f6"></u-search>
				</view>
				<view class="accountslist">
					<scroll-view scroll-y="true" style="height: 600rpx;">
						<view class="accountsitem" v-for="(item,index) in 5" :key="index" @click="totransfer">
							<view class="item_le">
								<image src="/static/wallet7.png" mode="heightFix"></image>
							</view>
							<view class="item_ri">
								<view class="name">
									<view class="">
										ETH
									</view>
									<view style="margin-top: 12rpx; font-size: 25rpx;">
										<text style="color: #908baf;">$2,158.98</text><text
											style="color: limegreen;">+5.17%</text>
									</view>
								</view>
								<view class="number">
									<view class="">
										0
									</view>
									<view style="margin-top: 12rpx; font-size: 25rpx;">
										<text style="color: #908baf;">= $0</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabslist: [{
					name: '資產',
				}, {
					name: 'DeFi',
				}, {
					name: 'NFT'
				}],
				searchvalue: '',
				onesearchvalue: '',
				showbalanceimg: "/static/eye_on.png",
				hidebalanceimg: "/static/eye_off.png",
				showbalance: false,
				oneshow: false, // 一层
				show: false, //二层
				accountsshow: false,
				userMoneyAdress: '0x8622572752752752752727527527FDc3675',
				oneactive: 1,
				correctval: 0,
				showsearch: false,
				accountsvalue: '' // 轉賬
			};
		},
		methods: {
			accountsshowdialog(){
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
				this.accountsshow = true;
			},
			showMoneyList(){
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
				this.oneshow = true;
			},
			biDetail(){
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
			},
			tabs(item) {
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
				console.log('item', item);
			},
			towallet() {
				uni.navigateTo({
					url: '/pages/wallet/createmethod'
				})
				this.show = false
				this.oneshow = false
			},
			// 餘額
			changebalance() {
				this.showbalance = !this.showbalance
			},
			// 一层彈窗
			oneclose() {
				this.oneshow = false
			},
			close() {
				this.show = false
			},
			accountsclose() {
				this.accountsshow = false
			},
			Oneclassification(i) {
				console.log("iiiiii", i)
				this.oneactive = i
			},
			// 弹框列表
			pitchon(i) {
				this.correctval = i
			},
			userMoneyAdressOptions(data) {
				let start = data.substring(0, 14);
				let end = data.substring(data.length - 4);
				let middle = "…";
				let finalString = start + middle + end;
				return finalString
			},
			tocreatewallet() {
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
				uni.navigateTo({
					url: '/pages/wallet/choosewallet'
				})
			},
			// 掃碼
			scanCode() {
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
				uni.scanCode({
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			//暫未開放
			flashexchange() {
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
			},
			// 收款碼
			topaymentcode() {
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
				uni.navigateTo({
					url: '/pages/wallet/paymentcode'
				})
			},
			// 資產
			toassets() {
				uni.showToast({
					icon: 'none',
					title: '功能暫未開放',
					duration: 2000
				});
				return
				uni.navigateTo({
					url: '/pages/wallet/assets'
				})
			},
			// 轉賬
			totransfer() {
				uni.navigateTo({
					url: '/pages/wallet/transfer'
				})
				this.accountsshow = false
			},
			copyAdress(adress) {
				uni.setClipboardData({
					data: adress,
					success: () => {
						uni.showToast({
							title: '複製成功',
							icon: 'success'
						})
					}
				})
			},
		}
	}
</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);

		image {
			width: 100%;
			height: 100%;
		}

		.wollet {
			.wollet_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.top_left {}

				.top_right {
					display: flex;

					.top_wollet {
						width: 45rpx;
						height: 45rpx;
					}

					.top_code {
						width: 45rpx;
						height: 45rpx;
						margin-left: 40rpx;
					}
				}
			}

			.balance {
				width: 100%;
				height: 180rpx;
				background: linear-gradient(to bottom, #392a94, #7c7dd5);
				margin: 30rpx 0;
				border-radius: 20rpx;
				color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx;
				box-sizing: border-box;

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

					.num {
						font-size: 40rpx;
					}

					.eye {
						width: 40rpx;
						height: 40rpx;
						margin-left: 20rpx;
					}
				}

			}

			.codelist {
				display: flex;
				justify-content: space-between;
				margin-bottom: 30rpx;

				.codeitem {
					width: 145rpx;
					height: 120rpx;
					background-color: #392e7f;
					color: #fff;
					font-size: 20rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.item_image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 5rpx;
					}
				}
			}

			.tabs {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.tabs_right {
					display: flex;
					justify-content: center;
					align-items: center;

					.add {
						width: 60rpx;
						height: 60rpx;
						background-color: #3f3a63;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-left: 20rpx;
					}
				}
			}

			.moneylist {
				margin-top: 30rpx;

				.moneyitem {
					display: flex;
					justify-content: space-between;
					margin-bottom: 50rpx;
					align-items: center;

					.item_le {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
					}

					.item_ri {
						width: 540rpx;
						height: 100rpx;
						display: flex;
						justify-content: space-between;
						border-bottom: 2rpx solid #534a84;

						.name {
							color: #fff;
							display: flex;
							flex-direction: column;
							padding-bottom: 10rpx;
						}
					}
				}
			}
		}

		.search {
			display: flex;
			align-items: center;
			padding: 25rpx;

			.tit {
				margin-left: 240rpx;
			}
		}

		.onecontent {
			display: flex;
			position: relative;

			.botmore {
				width: 160rpx;
				height: 160rpx;
				display: flex;
				justify-content: center;
				align-content: center;
				position: absolute;
				left: 0;
				bottom: 0;
				background-color: #fff;
			}

			.onecont-left {
				width: 160rpx;
				background-color: #f6f6f6;
				height: 860rpx;
				box-sizing: border-box;
				display: flex;
				flex-wrap: wrap;

				.onecont-leftitem {
					width: 160rpx;
					height: 160rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 10rpx;
					box-sizing: border-box;
				}
			}

			.onecont-right {
				height: 760rpx;
				padding: 25rpx;
				flex: 1;

				.rig-top {
					display: flex;
					justify-content: space-between;
					margin-bottom: 25rpx;

					.rig-add {
						width: 30rpx;
						height: 30rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border-radius: 50%;
						border: 4rpx solid #323232;
					}
				}

				.rig-cont {
					.onecont-rightitem {
						margin-bottom: 30rpx;

						.item_ri {
							display: flex;
							width: 100%;
							height: 140rpx;
							display: flex;
							justify-content: space-between;
							background-color: #07052f;
							padding: 20rpx;
							box-sizing: border-box;
							border-radius: 15rpx;

							.number {
								display: flex;
								flex-direction: column;
								align-items: end;
							}
						}
					}
				}
			}

			.oneleftimg {
				width: 90rpx;
				height: 90rpx;
			}
		}

		.oneactive {
			background-color: #fff;
		}
	}

	.createwa {
		width: 100%;
		height: 116rpx;
		border-radius: 20rpx;
		background-color: #f6f6f6;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.hide {
		visibility: hidden;
	}

	.show {
		visibility: visible;
	}

	.accounts {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 34rpx;
		font-weight: 600;
		border-bottom: 2rpx solid #f6f6f6;
		padding-bottom: 15rpx;
	}

	.accountslist {
		margin-top: 30rpx;

		.accountsitem {
			display: flex;
			justify-content: space-between;
			margin-bottom: 50rpx;
			align-items: center;
			border-bottom: 2rpx solid #f6f6f6;
			padding-bottom: 20rpx;


			.item_le {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
			}

			.item_ri {
				width: 590rpx;
				height: 75rpx;
				display: flex;
				justify-content: space-between;

				.name {
					display: flex;
					flex-direction: column;
					justify-content: space-between;
				}

				.number {
					display: flex;
					flex-direction: column;
					align-items: end;
				}
			}

		}
	}
</style>