<template>
	<view class="home">
		<view class="top">
			<view class="top-div">
				<image src="../../static/images/yonghu.png"></image>
				<view class="top-right">
					<view class="top-name">
						<view style="margin-right: 30rpx;font-weight: bold;">{{userName}}</view>
						<view>{{phone}}</view>
					</view>
				</view>
			</view>
			<view class="yy-list">
				<view class="yy-one" v-for="(item,index) in myApp" :key="index">
					<view class="yy-img">
						<image :src="item.base64Url"></image>
					</view>
					<view class="yy-name">{{item.appName}}</view>
				</view>
			</view>
		</view>
		<view class="center-bar" @click="restPwd">
			<image src="../../static/images/edit.png"></image>
			<view>修改密码</view>
		</view>
		<view class="center-bar" @click="logout1()">
			<image src="../../static/images/logout.png"></image>
			<view>退出登录</view>
		</view>
		<view class="center-bar" @click="deleteUser1()">
			<image src="../../static/images/zhuxiao.png"></image>
			<view>注销账号</view>
		</view>

		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view style="text-align: center;font-size: 40rpx;padding-top: 30rpx;">密码修改</view>
				<view class="popup-content">
					<u--form :model="restForm" ref="uForm3" :rules="rules3" labelWidth="60">
						<u-form-item label="新密码" prop="password">
							<u-input class="login-input" :type="isOpen?'text':'password'" placeholder="请输入密码" prefixIcon="lock"
								v-model="restForm.password" save="false" autocomplete="new-password">
								<template slot="suffix">
									<image @click="isOpen=!isOpen"
										style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
										:src="isOpen?'../../static/images/design_ic_visibility.png':'../../static/images/design_ic_visibility_off.png'">
									</image>
								</template>
							</u-input>
						</u-form-item>
						<u-form-item label="再次确认" prop="passwordA">
							<u-input class="login-input" :type="isOpen2?'text':'password'" placeholder="请再次输入密码" prefixIcon="lock"
								v-model="restForm.passwordA" save="false" autocomplete="new-password">
								<template slot="suffix">
									<image @click="isOpen2=!isOpen2"
										style="width: 40rpx;height: 40rpx;margin-right: 10rpx; z-index: 999;"
										:src="isOpen2?'../../static/images/design_ic_visibility.png':'../../static/images/design_ic_visibility_off.png'">
									</image>
								</template>
							</u-input>
						</u-form-item>
						<view style="color: red;line-height: 30rpx;font-size: 24rpx;padding-top: 20rpx;">
							注：密码必须至少包含一个大写字母、一个小写字母、一个数字和一个特殊符号，并且长度在8到16个字符之间
						</view>
						<view style="display: flex;">
							<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;color: black;"
								@click="closePwd" color="#d0d2d5">退出</u-button>
							<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;" @click="submit"
								color="#00367a">确认</u-button>
						</view>

					</u--form>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup2" background-color="#fff">
				<view>
					<view style="width: 400rpx;height: 140rpx;padding: 40rpx;">
						<view style="font-size: 24rpx;margin-bottom: 10rpx;">
							确定要退出登录吗？
						</view>
						<view style="display: flex;">
							<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;color: black;"
								@click="closePwd" color="#d0d2d5">取消</u-button>
							<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;" @click="logout"
								color="#00367a">确定</u-button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup3" background-color="#fff">
				<view>
					<view style="width: 400rpx;height: 140rpx;padding: 40rpx;">
						<view style="font-size: 24rpx;margin-bottom: 10rpx;">
							确定要注销账号吗？
						</view>
						<view style="display: flex;">
							<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;color: black;"
								@click="closePwd" color="#d0d2d5">取消</u-button>
							<u-button class="loginBtn" style="margin-top: 30rpx;width: 30%;" @click="deleteUser"
								color="#00367a">确定</u-button>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
		<u-toast ref="uToast"></u-toast>
		<m-tabbar fixed fill :current="3" :tabbar="tabbar"></m-tabbar>
	</view>
</template>

<script>
	import TabbarConfig from '@/totalTabbar.js'
	import {
		getMyAppByUser,
		updatePwdByApp
	} from "@/api/index.js"
	
	import {setDeleteUser,getDeleteUser} from "@/utils/auth.js"
	export default {
		data() {
			const equalToPassword = (rule, value, callback) => {
				if (this.restForm.password !== value) {
					callback(new Error("两次输入的密码不一致"));
				} else {
					callback();
				}
			};
			// 密码校验 长度不能小于8位且不能大于16位字符,必须包含大写字母、小写字母、数字和特殊符号
			var ISPWD =
				/^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*,\._\+(){}])[0-9a-zA-Z!@#$%^&*,\\._\+(){}]{8,16}$/;
			// 密码校验
			const validatePassword = (rule, value, callback) => {
				if (!ISPWD.test(this.restForm.password)) {
					callback(new Error("用户密码必须包含大写字母、小写字母、数字和特殊符号"));
				} else {
					callback();
				}
			}
			return {
				tabbar: TabbarConfig,
				userName: this.$store.state.user.userName,
				phone: this.$store.state.user.phone,
				myApp: [],
				restForm: {
					password: "",
					passwordA: ""
				},

				rules3: {
					password: [{
							required: true,
							trigger: "blur",
							message: "请输入您的密码"
						},
						{
							min: 8,
							max: 16,
							message: '用户密码长度必须介于 8 和 16 之间',
							trigger: 'blur'
						},
						{
							required: true,
							validator: validatePassword,
							trigger: 'blur'
						}
					],
					passwordA: [{
							required: true,
							message: '请再次输入新密码',
							trigger: ['blur', 'change']
						},
						{
							required: true,
							validator: equalToPassword,
							trigger: "blur"
						}
					]
				},
				isOpen:false,
				isOpen2:false,
			}
		},
		onShow() {
			this.getMyAppByUser()
		},
		methods: {
			getMyAppByUser() {
				getMyAppByUser({}).then(response => {
					console.log(response);
					if (response.code == 200) {
						this.myApp = response.data
					} else {
						uni.$u.toast('获取我的应用失败');
					}
				});
			},
			deleteUser1(){
				this.$refs.popup3.open("center")
			},
			deleteUser(){
				var user= getDeleteUser()||[]
				user.push(this.$store.state.user.phone)
				setDeleteUser(user)
				this.logout() 
			},
			logout1() {
				this.$refs.popup2.open("center")
			},
			logout() {
				this.$store.dispatch('LogOut').then(res => {
					uni.redirectTo({
						url: "/pages/login"
					})
				})
			},
			restPwd() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open("center")
			},
			closePwd() {
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.close("center")
				this.$refs.popup2.close("center")
				this.$refs.popup3.close("center")
			},
			submit() {
				let _this = this
				this.$refs.uForm3.validate().then(res => {
					let form = {
						id: this.$store.state.user.userId,
						pd: this.restForm.password
					}
					updatePwdByApp(form).then(res => {
						if (res.code == 200) {
							this.closePwd()
							this.$refs.uToast.show({
								type: 'success',
								message: "密码修改成功",
							})
							// setTimeout(_this.logout(), 50000);
						} else {
							uni.$u.toast(res.msg)
						}
					})
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #eef3fa !important;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 480rpx;
		background-color: #fff;
		max-width: 600rpx;
	}

	.home {
		.top {
			background-color: white;
			margin-bottom: 30rpx;
			padding-top: 50rpx;

			.top-div {
				display: flex;
				padding: 50rpx;

				image {
					width: 60rpx;
					height: 60rpx;
					margin-right: 20rpx;
					margin-left: 20rpx;
				}

				.top-right {
					font-size: 30rpx;
					line-height: 30rpx;
					padding-top: 20rpx;

					.top-name {
						display: flex;
					}
				}
			}

			.yy-list {
				display: flex;
				flex-wrap: wrap;
				justify-content: start;
				padding: 0 45rpx;

				.yy-one {
					margin-top: 10rpx;
					width: calc(100% / 3);
					height: 200rpx;
					text-align: center;
					font-size: 24rpx;

					.yy-img image {
						width: 100rpx;
						height: 100rpx;
					}
				}
			}
		}

		.center-bar {
			font-size: 28rpx;
			margin-top: 10rpx;
			background-color: white;
			height: 80rpx;
			display: flex;
			line-height: 80rpx;
			padding-left: 50rpx;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-top: 20rpx;
				margin-right: 30rpx;
			}
		}

	}
</style>