<template>
	<view class="me_container" v-cloak v-if="userInfos.token">
		<view class="m_c_header">
			<view class="header_top"> 
				<view class="h_t_left">
					<view class="avt">
						<image :src="userInfos.avatar" mode=""></image>
					</view>
					<view class="identity">
						<view class="" @tap="modalUserName = true">{{userInfos.nickname}}</view>
						<view style="margin-top: 20rpx;font-size: 28rpx;">身份資格：{{userInfos.level_text.title}}</view>
					</view>
				</view>
				<view class="h_t_right" @click="toShenfen">
					升級
				</view>
			</view>
			<!-- <view style="font-size: 20px;margin-top: 20px;">身份資格</view> -->
			<!-- 遊客 -->
			<!--      <view v-if="userInfos.level_text.title" style=" 
					font-size: 29px;
					font-weight: 700;
				">{{userInfos.level_text.title}}</view> -->
			<!-- 第二部分 -->
			<!--      <view v-if="userInfos.area && userInfos.level && userInfos.level > 2 && userInfos.area.slice(0,2) != '99'">
        {{ "("+chineseCity(userInfos.area)+")" }}</view>
      <view v-if="userInfos.area && userInfos.area.slice(0,2) == '99'">(直營代理)</view>
      <view class="btnSj" @tap="toShenfen">升級</view> -->
			<!-- 名字錢包地址 -->
			<!-- <view class="user_name" v-if="userInfos.nickname" @tap="modalUserName = true">{{userInfos.nickname}}</view> -->
			<!-- 			<view class="user_adress" v-if="userInfos.wallet.address" @tap="copyAdress(userInfos.wallet.address)">{{userMoneyAdressOptions(userInfos.wallet.address)}}</view> -->
		</view>
		<!-- 內容 -->
		<view style="padding: 30rpx;">
			<view style="background-color: #3B3D83;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"
							@tap="listClick(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;">{{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 class="outlogin">
			<view class="out_cent" @click="outlogin">
				<view class="out_img">
					<image src="/static/icon/uid.png" mode=""></image>
				</view>
				<view class="out">
					退出登錄
				</view>
			</view>
		</view>
		<!-- 測試舔磚 -->
		<!-- 用戶名彈窗 -->
		<view class="modal" v-if="modalUserName">
			<view class="modal-content">
				<view class="modal-header">
					<view class="zz_content">請輸入新用戶名</view>
				</view>
				<view class="modal-body">
					<view class="modal-item">
						<text class="modal-label">用戶名:</text>
						<input v-model="newUserName" type="text" style="flex: 1;"/>
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-button cancel" @tap="modalUserName = false">取消</button>
					<button class="modal-button confirm" @tap="submitUserName">確定</button>
				</view>
			</view>
		</view>
		<!-- 密碼彈窗 -->
		<view class="modal" v-if="modalName">
			<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 zf_mod_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 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="modalName = false">取消</button>
					<button class="modal-button confirm" @tap="modalBtn">確定</button>
				</view>
			</view>
		</view>
		<!-- 助記詞私鑰彈窗 -->
		<view class="modal" v-if="modalNameZj">
			<view class="modal-content">
				<view class="modal-header">
					<view class="zz_content" v-if="exportType == 1 || exportType == 2">點擊可複製：</view>
					<view class="zz_content" v-if="exportType == 3">關聯錢包</view>
				</view>
				<view class="modal-body" v-if="exportType == 1" @tap="copeZhuji(userMnemonic)" style="
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					">
					助記詞：{{userMnemonic}}
				</view>
				<view class="modal-body" v-if="exportType == 2" @tap="copeZhuji(userPrivateKey)" style="
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					">
					私鑰：{{privateKeyOptions(userPrivateKey)}}
				</view>
				<view class="modal-body" v-if="exportType == 3">
					<view class="modal-item">
						<text class="modal-label">關聯地址:</text>
						<text class="modal-value" style="text-align: left;">
							<input v-model="acconToAdress" type="text" style="color: #fff;" />
						</text>
					</view>
				</view>
				<view class="modal-footer">
					<button class="modal-button cancel" @tap="modalNameZj = false">取消</button>
					<button class="modal-button confirm" @tap="modalNameZj = false">確定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
	publicjiemi
} from "@/common/jiemi.js";
import area from "@/components/mpvue-citypicker/city-data/area.js";
import city from "@/components/mpvue-citypicker/city-data/city.js";
import province from "@/components/mpvue-citypicker/city-data/province.js";
import {
	_emailSend,
	_profile,
	_userInfos,
	_walletinfo
} from "@/request/api.js";
import MD5 from "blueimp-md5";
	export default {
		data() {
			return {
				emailCode:"",
				googleCode:"",
				emaiTip:"發送",
				googleTip:"發送",
				acconToAdress: "",
				showPassword: true,
				showpwdImg: "static/icon/eye_on.png",
				hidepwdImg: "static/icon/eye_off.png",
				newUserName: "",
				modalUserName: false,
				exportType: "",
				allProvince: null,
				allCity: null,
				allArea: null,
				modalName: false,
				modalNameZj: false,
				zhifuMima: "",
				userInfos: {},
				userMnemonic: "",
				userPrivateKey: "",
				srcollList: [{
						title: "邀請好友",
						img: "/static/icon/tongxunlu.png"
					},
					{
						title: "推薦客戶",
						img: "/static/icon/tuandui1.png"
					},
					{
						title: "導出助記詞",
						img: "/static/icon/zhuciqi.png"
					},
					{
						title: "導出私鑰",
						img: "/static/icon/yinsi.png"
					},
					{
						title: "修改密碼",
						img: "/static/icon/qianbao.png"
					},
					{
						title: "重置密碼",
						img: "/static/icon/reset.png"
					}
				]
			}
		},
		watch: {
			modalName: {
				handler(val) {
					if (val == false) {
						this.emailCode = "";
						this.googleCode = "";
						this.zhifuMima = "";
						this.emaiTip = "發送";
						this.googleTip = "發送";
					}
				}
			}
		},
		onShow() {
			this.allProvince = province;
			this.allCity = city;
			this.allArea = area;
		},
		mounted(){
			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)
			},
			privateKeyOptions(data) {
				let start = data.substring(0, 26);
				let end = data.substring(data.length - 4);
				let middle = "…";
				let finalString = start + middle + end;
				return finalString
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			async submitUserName() {
				if (!this.newUserName) {
					uni.showToast({
						title: "請輸入新用戶名",
						icon: "none"
					})
					return
				}
				const params = {
					nickname: this.newUserName,
					newpassword: "",
					newpaykey: ""
				};
				let res = await _profile(params);
				if (res.code === 1) {
					uni.showToast({
						title: '修改成功',
						icon: "success",
						duration: 1000
					})
					this.newUserName = "";
					this.modalUserName = false;
					this.getUserInfos();
				}
			},
			copyAdress(adress) {
				uni.setClipboardData({
					data: adress,
					success: () => {
						uni.showToast({
							title: '複製成功',
							icon: 'success'
						})
					}
				})
			},
			chineseCity(cityCode) {
				let _that = this;
				let pppp = "";
				let qqqq = "";
				if (cityCode) {
					let a = cityCode.substring(0, 2);
					let b = cityCode.substring(0, 4);
					_that.allProvince.map((item, index) => {
						if (item.value == a) {
							pppp = item.label;
							if (b == "00") {
								return
							} else {
								_that.allCity[index].map((item1, index1) => {
									if (item1.value == b) {
										_that.allArea[index][index1].map((item2, index2) => {
											if (item2.value == cityCode) {
												qqqq = item2.label;
											}
										})
									}
								})
							}
						}
					})
					return (pppp + qqqq)
				} else {
					return ""
				}
			},
			async getUserInfos() {
				let res = await _userInfos();
				if (res.code === 1) {
					this.userInfos = res.data.userinfo;
					console.log('userInfos',this.userInfos);
				}
			},
			copeZhuji(address) {
				uni.setClipboardData({
					data: address,
					success: () => {
						uni.showToast({
							title: '複製成功',
							icon: 'success'
						})
					}
				})
			},
			async modalBtn() {
				if (!this.zhifuMima || !this.emailCode || !this.googleCode) return uni.showToast({
					title: '請填寫正確資訊',
					icon: 'none'
				})
				const params = {
					code: this.emailCode,
					googlecode: this.googleCode,
					paykey: MD5(this.zhifuMima + (Math.floor(Date.now() / 1000))),
					timestamp: Math.floor(Date.now() / 1000),
				}
				let res = await _walletinfo(params);
				if (res.code === 1) {
					this.modalName = false;
					let jiemiinfos = await publicjiemi(this.exportType, this.zhifuMima, this.userInfos.wallet.address);
					console.log('sssss')
					this.exportType == 1 ? this.userMnemonic = jiemiinfos : this.userPrivateKey = jiemiinfos;
					this.modalNameZj = true;
					this.emailCode = "";
					this.googleCode = "";
					this.zhifuMima = "";
					this.emaiTip = "發送";
					this.googleTip = "發送";
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				}
			},
			toShenfen() {
				uni.navigateTo({
					url: "/pages/myProxy/myProxy"
				})
			},
			userMoneyAdressOptions(data) {
				let start = data.substring(0, 4);
				let end = data.substring(data.length - 4);
				let middle = "…";
				let finalString = start + middle + end;
				return finalString
			},
			listClick(title) {
				switch (title) {
					case "邀請好友":
						uni.navigateTo({
							url: "/pages/myuser/myuser"
						})
						break;
					case "推薦客戶":
						uni.navigateTo({
							url: `/pages/mymoney/allDetail?detailLabel=${title}`
						})
						break;
					case "修改關聯錢包":
						this.exportInfos(3);
						break;
					case "導出助記詞":
						this.exportInfos(1);
						break;
					case "導出私鑰":
						this.exportInfos(2);
						break;
					case "修改密碼":
						uni.navigateTo({
							url: "/pages/me/editUserInfo"
						})
						break;
					case "重置密碼":
						uni.navigateTo({
							url: "/pages/me/resetPwd"
						})
						break;
						// case "退出登錄":
						//   uni.removeStorageSync("token");
						//   uni.reLaunch({
						//     url: "/pages/login/login"
						//   })
						//   break;
				}
			},
			// 退出登錄
			outlogin() {
				uni.removeStorageSync("token");
				uni.reLaunch({
					url: "/pages/login/login"
				})
			},
			//導出助記詞私鑰
			exportInfos(n) {
				this.modalName = true;
				this.exportType = n;
			},
			handleInput(event) {
				this.zhifuMima = event;
			}
		}
	}
</script>

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

		.m_c_header {
			height: 10%;
			color: #fff;
			// display: flex;
			// flex-direction: column;
			// align-items: center;
			padding: 0 15px;
			box-sizing: border-box;
			position: relative;

			>view {
				margin-bottom: 10px;
			}

			.user_name {
				position: absolute;
				left: 15px;
				top: 20px;
				font-size: 10px;
				background-color: #4e538b;
				padding: 5px 10px;
			}

			.user_adress {
				position: absolute;
				left: 15px;
				top: 50px;
				font-size: 10px;
				background-color: #4e538b;
				padding: 5px 10px;
			}

			.btnSj {
				background-color: #4caf50;
				width: 40%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border-radius: 15px;
			}
		}

		// 新加
		.header_top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 80rpx;

			.h_t_left {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 120rpx;

				.avt {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}

				.identity {
					font-size: 40rpx;
					margin-left: 20rpx;
				}
			}

			.h_t_right {
				width: 135rpx;
				height: 55rpx;
				background-color: #263773;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 30rpx;
				font-size: 24rpx;
			}

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

		.m_c_footer {
			height: calc(75% - 40rpx);
			margin-top: 40rpx;
			box-sizing: border-box;

			.listBox {
				background-color: #3B3D83;
				height: 120rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: #fff;
				box-sizing: border-box;
				border-bottom: 2rpx solid #534a84;

				.l_left {
					display: flex;
				}

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

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

		.zf_mod_item {
			display: flex;
			align-items: center;
		}

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

	// 退出登錄
	.outlogin {
		padding: 0 30rpx;

		.out_cent {
			background-color: #515496;
			width: 100%;
			height: 110rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 10rpx;
			color: #fff;

			.out_img {
				width: 60rpx;
				height: 60rpx;
				margin-right: 20rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>