<template>
	<view v-show="showPage">
		<tabBar :currentPage="'pages/mine/index'"></tabBar>
		<view class="logo">
			<image src="../../static/image/home/fontree.png" mode="" class="img"></image>
		</view>
		<scroll-view scroll-y :scroll-anchoring="true" :style="'height:' + listHeight + 'px;'">
			
			<view class="user-box">
				<u-avatar :src="userInfo.avatar" class="avatar" size="75" fontSize="18" bg-color="#558BF2"></u-avatar>
				<view class="info">
					<view class="username">{{ userInfo.nickName }}</view>
					<view class="blockchain">{{ $t("mine.blockchain") }}：{{ userInfo.account }}</view>
				</view>
			</view>
			<view class="mine-icon">
				<view class="message" @click="goMess">
					<u-badge v-if="notReadNum > 0" class="point" numberType="overflow" max="99" :value="notReadNum">
					</u-badge>
					<image src="../../static/image/mine/message-icon.png" mode="" style="width: 60rpx; height: 60rpx">
					</image>
					<view class="value">{{ $t("mine.message") }}</view>
				</view>
				<view class="scan" @click="goScan" v-if="canScan">
					<image src="../../static/image/mine/scan-icon.png" mode="" style="width: 60rpx; height: 60rpx"></image>
					<view class="value">{{ $t("mine.scan") }}</view>
				</view>
				<view @click="goLang" class="tag">
					<image src="../../static/image/mine/language.png" mode="" style="width: 60rpx; height: 60rpx"></image>
					<view class="value">{{ $t("mine.language") }}</view>
				</view>
				<view class="setting" @click="goSets">
					<image src="../../static/image/mine/setting-icon.png" mode="" style="width: 60rpx; height: 60rpx">
					</image>
					<view class="value">{{ $t("mine.setting") }}</view>
				</view>
			</view>
			<view class="his-title-text">
				<view>我的历史购买记录</view>
				<view class="line"></view>
			</view>
			<view class="his-box">
				<view class="item" v-for="(item, index) in paymentList" :key="index"
					@click="goDetail(item.ID, item.artworkUid)">
					<image src="../../static/image/mine/icon-logo1.png" v-if="item.artworkLevel == 'D'" mode=""
						class="icon"></image>
					<image src="../../static/image/mine/icon-logo2.png" v-if="item.artworkLevel == 'C'" mode=""
						class="icon"></image>
					<image src="../../static/image/mine/icon-logo3.png" v-if="item.artworkLevel == 'B'" mode=""
						class="icon"></image>
					<image src="../../static/image/mine/icon-logo4.png" v-if="item.artworkLevel == 'A'" mode=""
						class="icon"></image>
					<image :src="item.coverImg || item.artworkImg" mode="" class="img"> </image>
					<view class="contentD content" v-if="item.artworkLevel == 'D'">{{
						item.artworkName
					}}</view>
					<view class="contentC content" v-if="item.artworkLevel == 'C'">{{
						item.artworkName
					}}</view>
					<view class="contentB content" v-if="item.artworkLevel == 'B'">{{
						item.artworkName
					}}</view>
					<view class="contentA content" v-if="item.artworkLevel == 'A'">{{
						item.artworkName
					}}</view>
				</view>
			</view>
			<u-empty mode="favor" v-if="!paymentList" :text="$t('mine.noData')" marginTop="100"></u-empty>
		</scroll-view>
		<u-popup :show="showLocale" mode="center" @close="closeLocale" @open="openLocale" bgColor="transparent">
			<view class="popupLocale-box">
				<view class="title">{{ $t("mine.updateLang") }}</view>
				<view class="item" v-for="(item, index) in locales" :key="index"
					:style="{ borderBottom: (item.code !== 'en' ? '1px solid #dedede' : 'none') }">
					<view class="left">{{ item.text }}</view>
					<view class="right">
						<text v-if="item.code == applicationLocale">{{
							$t("updateLang.done")
						}}</text>
						<u-tag v-else :text="$t('updateLang.change')" @click="onLocaleChange(item)" class="tag-btn"
							shape="circle" bgColor="#699A70" borderColor="#699A70"></u-tag>
					</view>
				</view>
			</view>
			<u-button :text="$t('navbar.back')" color="#EDC466" @click="closeLocale" style="
									          width: 260rpx;
									          height: 56rpx;
									          border-radius: 40rpx;
									          margin-top: 30rpx;
									        "></u-button>
		</u-popup>
		<u-popup :show="showSetPass" mode="bottom" @close="closeBack" bgColor="transparent">
			<view class="step-top">{{ $t("password.title") }}</view>
			<view class="step-box">
				<view class="title">{{ $t("password.set") }}</view>
				<view class="step-pl">
					{{ $t("password.name") }}
					<text>{{ userInfo.telNum | disposeTel }}</text>
					{{ $t("password.set") }}
				</view>
				<view class="verfy-box">
					<view>
						<view class="label">{{ $t("password.input") }}：</view>
						<u-code-input v-model="setPwd" dot :maxlength="6" hairline color="#ffffff"
							borderColor="transparent"></u-code-input>
					</view>
				</view>
				<view class="verfy-box">
					<view>
						<view class="label">{{ $t("password.com") }}：</view>
						<u-code-input v-model="confirmPwd" dot :maxlength="6" hairline color="#ffffff"
							borderColor="transparent"></u-code-input>
					</view>
				</view>
				<u-button :text="$t('password.step')" color="#699A70" @click="step2" style="
									            width: 484rpx;
									            height: 56rpx;
									            border-radius: 40rpx;
									            margin-top: 150rpx;
									          "></u-button>
			</view>
		</u-popup>
		<u-popup :show="showVerfyPass" mode="bottom" @close="closeBack" bgColor="transparent">
			<view class="step-top">{{ $t("password.title") }}</view>
			<view class="step-box">
				<view class="title">{{ $t("password.get") }}</view>
				<view class="verfy-box">
					<view>
						<view class="label">{{ $t("password.input") }}：</view>
						<u-code-input v-model="userPwd" dot :maxlength="6" hairline color="#ffffff"
							borderColor="transparent"></u-code-input>
					</view>
				</view>
				<view class="verfy-box" style="margin-top: 40upx">
					<view>
						<view class="label">{{ $t("password.com") }}：</view>
						<u-code-input v-model="confirmUserPwd" dot :maxlength="6" hairline color="#ffffff"
							borderColor="transparent"></u-code-input>
					</view>
				</view>
				<u-button :text="$t('buyVerfy.done')" color="#699A70" @click="stepDone" style="
									            width: 484rpx;
									            height: 56rpx;
									            border-radius: 40rpx;
									            margin-top: 150rpx;
									          "></u-button>
			</view>
		</u-popup>
		<u-popup :show="showAuthentication" mode="center" @close="closePass" bgColor="transparent">
			<view class="pass-box">
				<view class="title">{{ $t("password") }}</view>
				<view class="verfy-box">
					<view>
						<view class="label" style="margin-top:30rpx">{{ $t("password.input") }}：</view>
						<u-code-input v-model="userPwd" dot :maxlength="6" hairline color="#ffffff"
							borderColor="transparent"></u-code-input>
					</view>
				</view>
				<view class="flex-end">
					{{ $t("password.vername") }}
					<text>{{ userInfo.telNum | disposeTel }}</text>
					{{ $t("password.username") }}
				</view>
				<u-button :text="$t('comfrim')" color="#699A70" @click="comPass" style="
									            width: 484rpx;
									            height: 56rpx;
									            border-radius: 40rpx;
									            margin-top:30rpx;
									          "></u-button>
				<u-button :text="$t('payment.back')" color="#EDC466" @click="closePass" style="
									            width: 484rpx;
									            height: 56rpx;
									            border-radius: 40rpx;
									            margin-top: 30rpx;
									          "></u-button>
			</view>
		</u-popup>
		<!-- 邀请码弹窗 -->
		<u-popup :show="showInvite" mode="center" @close="closeInvite" bgColor="transparent">
			<view class="invite-box">
				<view style="margin-bottom: 20upx">{{ $t("payInfo.copyCode") }}</view>
				<u-input v-model="codeSC" shape="circle" border="none" class="login-input"></u-input>
				<u-button :text="$t('comfrim')" color="#558BF2" @click="sendConfirm" style="
									            width: 484rpx;
									            height: 56rpx;
									            border-radius: 40rpx;
									            margin-top: 20rpx;
									          "></u-button>
				<u-button :text="$t('close')" color="rgb(224,119,115)" @click="closeInvite" style="
									            width: 484rpx;
									            height: 56rpx;
									            border-radius: 40rpx;
									            margin-top: 20rpx;
									          "></u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			src: "",
			showLocale: false,
			applicationLocale: "",
			userInfo: {},
			showSetPass: false,
			showVerfyPass: false,
			showAuthentication: false,
			setPwd: "",
			confirmPwd: "",
			userPwd: "",
			confirmUserPwd: "",
			paymentList: [],
			notReadNum: 0,
			showPage: false,
			isAndroid: false,
			canScan: false,
			showInvite: false,
			codeSC: "",
			showPull: false,
			listHeight: uni.getSystemInfoSync().windowHeight - 88 - 61,
		};
	},
	computed: {
		locales() {
			return [
				// {
				//   text: this.$t("locale.auto"),
				//   code: "auto",
				// },
				{
					text: this.$t("locale.zh-hans"),
					code: "zh-Hans",
				},
				{
					text: this.$t("locale.zh-hant"),
					code: "zh-Hant",
				},
				{
					text: this.$t("locale.en"),
					code: "en",
				},
			];
		},
	},
	filters: {
		disposeTel(phoneNum) {
			return Number(phoneNum).toString().slice(0, 3) + '****' + Number(phoneNum).toString().slice(-4);
		}
	},
	methods: {

		toJSON() { },

		goLang() {
			this.showLocale = true;
		},
		closeLocale() {
			this.showLocale = false;
		},
		closeInvite() {
			this.showInvite = false;
			this.codeSC = "";
		},
		openLocale() {
			// console.log(uni.getLocale());
			let systemInfo = uni.getSystemInfoSync();
			this.systemLocale = systemInfo.language;
			this.applicationLocale = uni.getLocale();
			this.isAndroid = systemInfo.platform.toLowerCase() === "android";
			uni.onLocaleChange((e) => {
				this.applicationLocale = e.locale;
			});
		},
		onLocaleChange(e) {
			// console.log(e)
			if (this.isAndroid) {
				uni.showModal({
					content: this.$t("index.language-change-confirm"),
					success: (res) => {
						if (res.confirm) {
							uni.setLocale(e.code);
						}
					},
				});
			} else {
				uni.setLocale(e.code);
				this.$i18n.locale = e.code;
			}
			// console.log(this.$refs.tabbarRef);
			this.$refs.tabbarRef.tabBarList = [{
				pagePath: "pages/index/index",
				iconPath: "../../static/image/tabbar/home.png",
				selectedIconPath: "../../static/image/tabbar/home_check.png",
				text: this.$t("tabbar.home"),
				customIcon: false,
			},
			{
				pagePath: "pages/mine/index",
				iconPath: "../../static/image/tabbar/mine.png",
				selectedIconPath: "../../static/image/tabbar/mine_check.png",
				text: this.$t("tabbar.mine"),
				customIcon: false,
			},
			];
		},
		goDetail(ID, artworkUid) {
			uni.navigateTo({
				url: "/pages/mine/detail/detail?ID=" + ID + "&artworkUid=" + artworkUid,
			});
		},
		goMess() {
			uni.navigateTo({
				url: "/pages/mine/notice/notice",
			});
		},
		goSets() {
			uni.navigateTo({
				url: "/pages/mine/setting/setting",
			});
		},
		// 唤起扫描二维码
		goScan() {
			this.showInvite = true;
			// 判断当前页面是不是H5
			// try {
			//   uni.scanCode({
			//     success: (res) => {
			//       if (res.result) {
			//         console.log(res.result, "res.result");
			//         uni.navigateTo({
			//           url: `/pages/mine/confirmOrder/confirmOrder?code=${res.result}`,
			//         });
			//       }
			//     },
			//   });
			// } catch (error) {
			//   console.log(123123);
			// }
		},
		sendConfirm() {
			uni.navigateTo({
				url: `/pages/mine/confirmOrder/confirmOrder?code=${this.codeSC}`,
			});
			this.closeInvite();
		},
		// 获取未读消息
		async getNotReadMsg() {
			let res = await this.$api.airdrop.checkPoint();
			if (res.status === 0) {
				this.notReadNum = res.data.Count;
			}
		},
		// 设置密码
		step2() {
			if (!this.setPwd || !this.confirmPwd) {
				this.$common.msgToast(this.$t("password.inputPass"), null, "error");
				return;
			}
			if (this.setPwd !== this.confirmPwd) {
				this.$common.msgToast(this.$t("password.messError"), null, "error");
				return;
			}
			this.setPassword();
		},
		// 设置密码接口
		async setPassword() {
			let res = await this.$api.mine.update({
				password: this.confirmPwd,
			});
			if (res.status === 0) {
				uni.$u.toast(this.$t("password.setSucc"));
				this.showSetPass = false;
				this.showVerfyPass = true;
			} else {
				uni.$u.toast(res.msg || this.$t("password.setError"));
			}
		},
		// 验证密码接口
		async verifyPwd(setFlag) {
			let res = await this.$api.mine.verifyPwd({
				password: this.userPwd,
			});
			if (res.status === 0) {
				uni.$u.toast(this.$t("password.verSucc"));
				this.showVerfyPass = false;
				this.showAuthentication = false;
				// 如果有setFlag 说明是验证操作密码,在localStorage中存储一个标识
				if (setFlag) {
					uni.setStorageSync("isSetPass", 1);
				}
			} else {
				uni.$u.toast(res.msg || this.$t("password.verError"));
			}
		},
		// 第一次验证操作密码
		async stepDone() {
			if (!this.userPwd || !this.confirmUserPwd) {
				this.$common.msgToast(this.$t("password.inputPass"), null, "error");
				return;
			}
			if (this.userPwd !== this.confirmUserPwd) {
				this.$common.msgToast(this.$t("password.messError"), null, "error");
				return;
			}
			await this.verifyPwd();
			this.showVerfyPass = false;
		},
		// 验证操作密码
		async comPass() {
			let vef = this.$common.vefEmpty(
				this.userPwd,
				this.$t("password.inputPass")
			);
			if (!vef) return;
			await this.verifyPwd(true);
			this.userPwd = "";
			//
		},
		// 返回
		closePass() {
			this.showAuthentication = false;
			uni.switchTab({
				url: "/pages/index/index",
			});
		},
		// 返回主页
		closeBack() {
			this.showSetPass = false;
			this.showVerfyPass = false;
			uni.switchTab({
				url: "/pages/index/index",
			});
		},
		// 获取信息
		async getInfo() {
			uni.showLoading();
			await this.$api.mine
				.getInfo()
				.then(async (res) => {
					if (res.status === 0) {
						this.userInfo = res.data;
						this.showPage = true;
						await this.getPaymentInfo();
						await this.getNotReadMsg();
					} else if (res.status === 401) {
						uni.navigateTo({
							url: "/pages/login/login",
						});
						uni.clearStorageSync();
					} else {
						this.$common.msgToast(res.msg, null, "error");
					}
				})
				.catch((err) => {
					uni.showToast({
						title: this.$t("load.failed"),
						icon: "none"
					});
				});
			uni.hideLoading();
			/* let res = await this.$api.mine.getInfo();
			if (res.status === 0) {
				this.userInfo = res.data;
			} else {
				this.$common.msgToast(res.msg , null, "error");
			} */
		},
		// 获取藏品
		async getPaymentInfo() {
			let res = await this.$api.mine.paymentList();
			console.log(1111, res)
			if (res.status === 0) {
				this.paymentList = res.data.data;
			} else {
				this.$common.msgToast(res.msg || this.$t("load.failed"), null, "error");
			}
		},
	},
	async onShow() {
		this.showPage = false;
		await this.getInfo();
		this.canScan = uni.getStorageSync("mall-user-info")?.canScan;

		// 判断是否是第一次设置
		if (this.userInfo.isNeedChange === 1) {
			this.showSetPass = true;
		} else {
			this.userPwd = "";
			// 如果localStorage中有isSetPass 说明已经设置过操作密码,不需要再次验证
			this.showAuthentication = uni.getStorageSync("isSetPass") !== 1;
		}
	},
};
</script>

<style lang="scss">
page {
	background: url("@/static/image/home/mine-bg.png") no-repeat;
	background-size: 100% 100%;
	background-attachment: fixed;
	height: 100vh;
	box-sizing: border-box;
	// border: 1px solid red;696.1123
}
.login-input {
	height: 68upx;
	background-color: rgba(255, 255, 255, 0.6);
	padding: 0 20rpx;

	/deep/ .uni-input-placeholder {
		padding: 0 20rpx;
	}

	/deep/ .uni-input-input {
		color: #E4E4E4;
		padding: 0 20rpx;
	}
}


.logo {
	width: 100vw;
	height: 122rpx;
	background: #FFFFFF;
	overflow: hidden;

	.img {
		width: 188rpx;
		height: 56rpx;
		margin-top: 36rpx;
		margin-left: 48rpx;
	}
}

.user-box {
	background: #FFFFFF;
	border-radius: 20rpx;
	height: 210rpx;
	margin: 20rpx 28rpx 20rpx 28rpx;
	padding: 22rpx 20rpx;
	display: flex;
	box-sizing: border-box;
	align-items: center;

	.avatar {
		margin-left: 50rpx;
	}

	.info {
		flex: 1;
		display: flex;
		flex-direction: column;
		margin-left: 10rpx;

		.username {
			width: 75%;
			color: #000000;
			font-size: 34rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.blockchain {
			color: #699A70;
			font-size: 20rpx;
			margin-top: 10rpx;
			width: 75%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
	}
}

.mine-icon {
	background: #FFFFFF;
	border-radius: 20rpx;
	height: 130rpx;
	margin: 0rpx 28rpx 40rpx 28rpx;
	padding: 20rpx 20rpx;
	display: flex;
	box-sizing: border-box;
	justify-content: space-around;
	align-items: center;

	.value {
		color: #000000;
		font-size: 12px;
	}

	.tag,
	.message,
	.scan,
	.setting {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.message {
		position: relative;

		.point {
			position: absolute;
			z-index: 999;
			left: 35rpx;
			top: 0rpx;
		}
	}

	// .scan {

	// 	width: 60rpx;

	// 	font-size: 20rpx;
	// }


}

.his-title-text {
	font-size: 24rpx;
	margin: 28rpx;
	padding-bottom: 4upx;
	color: #959595;
	display: flex;
	align-items: center;

	&>.line {
		flex: 1;
		height: 0.5rpx;
		background: #D0D0D0;
		margin-left: 5rpx;
	}
}

.his-box {
	margin: 0 8rpx;
	display: flex;
	flex-wrap: wrap;

	.item {
		width: 332rpx;
		height: 418rpx;
		// background: #000000;
		// border-radius: 8rpx;
		overflow: hidden;
		position: relative;
		margin: 20rpx 10rpx 0 18rpx;
		box-sizing: border-box;

		.icon {
			width: 28rpx;
			height: 28rpx;
			position: absolute;
			top: 16rpx;
			right: 18rpx;
			z-index: 10;
		}

		.img {
			width: 100%;
			height: 324rpx;
		}

		.content {
			height: 96rpx;
			width: 100%;
			position: absolute;
			bottom: 0;
			font-size: 32rpx;
			text-align: center;
			line-height: 96rpx;
			background-position: center center;
			background-size:cover !important;
		}

		.contentD {
			background: url("../../static/image/mine/item-bg1.png") no-repeat;
		}

		.contentC {
			background: url("../../static/image/mine/item-bg2.png") no-repeat;
		}

		.contentB {
			background: url("../../static/image/mine/item-bg3.png") no-repeat;
		}

		.contentA {
			background: url("../../static/image/mine/item-bg4.png") no-repeat;
		}
	}
}

.invite-box {
	text-align: center;
}

.popupLocale-box {
	background: rgba(0, 0, 0, 0.8);
	width: 582rpx;
	overflow: hidden;
	padding: 30rpx 42rpx;

	.content3 {
		background: url("../../static/image/mine/item-bg3.png") no-repeat;
	}

	.content4 {
		background: url("../../static/image/mine/item-bg4.png") no-repeat;
	}

	.content {
		height: 96rpx;
		width: 100%;
		background-size: 100% 100%;
		position: absolute;
		bottom: 0;
		font-size: 32rpx;
		text-align: center;
		line-height: 96rpx;
	}
}

.popupLocale-box {
	background: rgba(0, 0, 0, 0.8);
	width: 582rpx;
	overflow: hidden;
	padding: 30rpx 42rpx 0 42rpx;

	.title {
		font-size: 40rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.u-button {
		width: 260rpx;
		height: 56rpx;
		border-radius: 40rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		padding: 34rpx 50rpx 38rpx 0;
		// border-bottom: 1px solid #dedede;
		align-items: center;

		.right {
			font-size: 20rpx;

			.tag-btn {
				width: 100rpx;

				/deep/ .u-tag {
					justify-content: center;
				}

				/deep/ .u-tag__text--medium {
					font-size: 20rpx;
					text-align: center;
					height: 40rpx;
					line-height: 40rpx;
				}
			}
		}
	}
}

.u-popup__content {
	border-radius: 8rpx;
}

.step-top {
	width: 466rpx;
	padding: 16rpx 40rpx;
	background: #699A70;
	margin: auto;
	text-align: center;
}

.step-box {
	width: 100%;
	margin-top: 26rpx;
	background: #FFFFFF;
	padding-bottom: 80rpx;

	.title {
		font-size: 40rpx;
		text-align: center;
		margin: 46rpx 0 34rpx 0;
		color: #434343;
	}

	.step-pl {
		text-align: center;
		color: #878787;
		font-size: 28rpx;


	}
}

.verfy-box {
	display: flex;
	justify-content: center;

	.label {
		font-size: 24rpx;
		text-align: left;
		margin-bottom: 20rpx;
		margin-top: 90rpx;
		color: #878787;
	}

	/deep/ .u-code-input__item {
		background: rgba(228, 228, 228, 0.7);
		width: 60rpx !important;
		height: 60rpx !important;
	}
}

.pass-box {
	width: 582rpx;
	height: 484rpx;
	background: #FFFFFF;

	.title {
		font-size: 40rpx;
		text-align: center;
		margin: 46rpx 0 34rpx 0;
		color: #434343;
	}

	.flex-end {
		margin-top: 70rpx;
		padding: 58rpx;
		text-align: right;
		font-size: 24rpx;
		color: #878787;
	}
}</style>
