<template>
	<view class="me_container">
		<!-- 內容 -->
		<view>
			<view style="border-radius: 30rpx 30rpx 0 0 ;">
				<scroll-view scroll-y="true" class="m_c_footer">
					<view style="padding:0 30rpx;">
						<view class="listBox" v-for="(item,index) in srcollList" :key="index"
							@click="createwallet(item.title)">
							<view class="l_left">
								<view class="l_icon">
									<image :src="item.img" mode="widthFix"></image>
								</view>
								<view class="l_title" style="margin-left: 30rpx; margin-top: 5rpx;">{{item.title}}
								</view>
							</view>
							<view class="l_right"><u-icon name="arrow-right" color="#FFF" size="16"></u-icon></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 钱包币种 -->
		<view style="color: #dfd7fd; margin: 30rpx 0 20rpx 0; font-size: 24rpx;">
			錢包幣種
		</view>
		<view style="border-radius: 30rpx 30rpx 0 0 ;">
			<scroll-view scroll-y="true" class="m_c_footer">
				<view style="padding:0 30rpx;">
					<view class="listBox" v-for="(item,index) in 6" :key="index">
						<view class="l_left">
							<view class="money_img">
								<image src="/static/wallet8.png" mode="widthFix"></image>
							</view>
							<view class="l_title" style="margin-left: 30rpx; margin-top: 5rpx;">比特幣</view>
						</view>
						<view class="l_right"><u-icon name="arrow-right" color="#FFF" size="16"></u-icon></view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-popup :show="show" mode="bottom" @close="close" @open="open" :closeable="true">
			<view style="height: 600rpx; padding: 30rpx;">
				<view style="margin-bottom: 65rpx;">選擇添加方式</view>
				<view class="createwa" @click="tocreatewallet">
					創建{{crewalletval}}
				</view>
				<view class="createwa" style="margin-bottom: 120rpx;">
					導入{{crewalletval}}
				</view>
				<view class="createwa" @click="show = false">
					關閉
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		Log
	} from 'ethers'

	export default {
		data() {
			return {
				srcollList: [{
						title: "身份錢包",
						img: "/static/wallet8.png"
					},
					{
						title: "多簽錢包",
						img: "/static/wallet8.png"
					},
					{
						title: "KeyPal硬件錢包",
						img: "/static/wallet8.png"
					}
				],
				show: false, //彈出層
				crewalletval: ''
			}
		},
		onShow() {},
		methods: {
			tocreatewallet() {
				uni.navigateTo({
						url: '/pages/wallet/createwallet'
					}),
					this.show = false
			},
			// 彈出
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			// 創建錢包
			createwallet(tit) {
				console.log('title', tit);
				this.crewalletval = tit
				this.show = true
			}
		}
	}
</script>

<style lang="scss">
	.me_container {
		border-top: 1px solid dimgrey;
		width: 100vw;
		height: 100vh;
		background-color: #000033;
		font-size: 30rpx;
		padding: 30rpx;
		box-sizing: border-box;

		// 新加
		.m_c_footer {
			height: calc(75% - 40rpx);
			margin-top: 40rpx;
			box-sizing: border-box;
			background-color: #392E7F;
			padding-bottom: 10rpx;
			border-radius: 20rpx;

			.listBox {
				background-color: #392E7F;
				height: 120rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				box-sizing: border-box;
				border-bottom: 2rpx solid #5E6096;
				border-radius: 20rpx;

				.l_left {
					display: flex;
				}

				image {
					width: 55rpx;
					height: 55rpx;
				}
			}
		}

	}

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