<template>
	<view class="personal">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="headBox">
			<!-- #ifdef MP || APP-PLUS -->
			<!-- 登录 -->
			<view class="u-flex u-p-l-30 u-p-r-20 u-p-t-75 u-p-b-30">
				<block v-if="userInfo.isToken || userInfo.isThirdLogin">
					<view @click.top="openPersonalInfo" class="u-m-r-20">
						<image class="avatar" mode="aspectFill" :src="!userInfo.avatar ? '../../static/logo.png' : userInfo.avatar || thirdObj.avatarUrl"></image>
					</view>
					<view class="u-flex-1" @click.top="openPersonalInfo">
						<view class="nickName u-flex">
							<view class="name u-m-r-10" v-if="userInfo.realName || userInfo.nickName">
								<text style="#FFFFFF;font-size: 18px;">{{ userInfo.realName || userInfo.nickName }}</text>
							</view>
							<view v-if="userInfo.isThirdLogin" @click.stop="clickAccountFunc" class="detail"><text class="text">绑定账号</text></view>
						</view>
						<view style="color:#FFFFFF;font-size: 14px;" v-if="userInfo.phoneNumber">{{ handlePhoneFunc(userInfo.phoneNumber || '') }}</view>
					</view>
				</block>
				<block v-else>
					<view class="u-m-r-20" @click="openLoginFunc">
						<view class="avatar u-flex"><image class="avatar" mode="aspectFill" src="../../static/logo.png"></image></view>
					</view>
					<view class="u-flex-1"><view @click="openLoginFunc" class="u-font-lg click-login login-btn ">请点击登录</view></view>
				</block>
				<view v-if="userInfo.isToken" @click="openPersonalInfo"><u-icon name="arrow-right" color="white" size="13"></u-icon></view>
			</view>
			<!-- 登录 -->
			<!-- #endif -->
		</view>
		<view class="u-flex my-nav">
			<view class="nav-main">
				<view @click="onTokenJump('/sysNotifySubPage/sysNotifyPage/systemNotify')" class="u-flex nav-link">
					<view class="nav-image"><image class="image" src="../../static/sys-not.png"></image></view>
					<view class="nav-center"><text class="text">系统通知</text></view>
					<view class="nav-right"><image class="image" src="../../static/arrow-right.png"></image></view>
				</view>
				<view @click="onTokenJump('/feedBackSubPage/feedback/feedback')" class="u-flex nav-link">
					<view class="nav-image"><image class="image" src="../../static/find-sugg.png"></image></view>
					<view class="nav-center"><text class="text">意见反馈</text></view>
					<view class="nav-right"><image class="image" src="../../static/arrow-right.png"></image></view>
				</view>
			</view>
			<view @click="onLoginoutFunc" class="u-flex" style="justify-content: center; width: 600rpx">
				<button class="submit" size="default" @click="onLoginoutFunc"><text class="text">退出账号</text></button>
			</view>
		</view>
		<!-- 绑定账号 -->
		<view>
			<u-modal :showConfirmButton="false" :show="show" :title="title">
				<view v-if="!bindPhone" class="loginPhone">
					<view class="form-row">
						<u--input shape="circle" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="bindAccountObj.appUserKey"></u--input>
					</view>
					<view class="form-row item-bind">
						<u--input
							class="input"
							shape="circle"
							prefixIcon="lock-fill"
							suffixIconStyle="color: #909399"
							type="password"
							placeholder="登录密码"
							v-model="bindAccountObj.appUserSecret"
						></u--input>
					</view>
					<view class="u-flex item-phone">
						<view class="phone-hide">手机验证码登录</view>
						<view class="bind-phone-text" @click="bindPhoneFunc">手机绑定</view>
					</view>
				</view>
				<view v-else class="loginPhone">
					<view class="form-row">
						<u--input
							shape="circle"
							class="input"
							type="text"
							v-model="bindPhoneObj.appUserKey"
							placeholder="请输入手机号码"
							placeholder-style="font-weight:normal;color:#bbbbbb;"
						></u--input>
					</view>
					<view class="form-row row-top">
						<u--input
							shape="circle"
							class="input"
							type="text"
							v-model="bindPhoneObj.appUserSecret"
							placeholder="请输入验证码"
							placeholder-style="font-weight:normal;color:#bbbbbb;"
						></u--input>
						<view style="color: #377dff" class="getvcode" :class="{ forhidden: readonly }" @click="getVcode">{{ codeText }}</view>
					</view>
					<view class="u-flex item-phone">
						<view class="phone-hide">手机验证码登录</view>
						<view class="bind-phone-text" @click="bindAccountFunc">账号绑定</view>
					</view>
				</view>
				<view class="bottom-content">
					<view class="u-flex content">
						<view class="cancel"><u-button @click="show = false" type="info" shape="circle" text="取消"></u-button></view>
						<view class="confrim"><u-button @click="bindConfirm" type="primary" shape="circle" text="确认"></u-button></view>
					</view>
				</view>
			</u-modal>
		</view>
		<!-- 退出登录 -->
		<view>
			<u-popup bgColor="transparent" :overlay="true" :show="showLogout" mode="bottom">
				<view class="u-flex logout-main">
					<view class="main"><text style="color: #999999">确定要退出当前账号？</text></view>
					<view @click.top="logoutBtn" class="main"><text style="color: #f95e5a">退出登录</text></view>
					<view class="main1"><text @click.top="closeLogout" style="color: #3478f7">取消</text></view>
				</view>
			</u-popup>
		</view>
		<!-- 退出登录 -->
		<f-tabbar></f-tabbar>
	</view>
</template>

<script>
var clear;
import base from '@/config/baseUrl';
import fTabbar from '@/components/module/f-tabbar/f-tabbar';
import fNavbar from '@/components/module/f-navbar/f-navbar';
import { mapState, mapMutations } from 'vuex';
import { appId } from '@/config/constant.js';

export default {
	components: {
		fTabbar,
		fNavbar
	},
	data() {
		return {
			PrimaryColor: '#0079fe', //主题色
			showLogout: false,
			readonly: false,
			codeText: '获取验证码',
			tips: '验证码',
			bindPhone: false,
			show: false,
			title: '绑定账号',
			systemInfo: base.systemInfo,
			PrimaryButtonColor: '#0079fe', //主题色
			bindAccountObj: {
				appUserKey: '',
				appUserSecret: ''
			},
			bindPhoneObj: {
				appUserKey: '',
				appUserSecret: ''
			},
			thirdObj: {},
			getOpenId: ''
		};
	},
	onLoad(e) {
		// 隐藏原生的tabbar
		uni.hideTabBar();
		// if (e.obj != null) {
		// 	const params = JSON.parse(decodeURIComponent(e.obj));
		// 	// uni.$u.toast('eee', params.avatarUrl);
		// 	this.thirdObj = params;
		// }
		this.getOpenId = getApp().globalData.openId;
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		handlePhoneFunc(e) {
			//前三后四位*号
			const y = e.replace(/(\d{3})\d{4}(\d{4})/, '***$2****');
			return y;
		},
		...mapMutations(['emptyUserInfo', 'setUserInfo']),
		// 跳转前判断登录
		onTokenJump(url) {
			this.judgeLogin(() => {
				uni.navigateTo({
					url: url
				});
			});
		},
		onJump(url) {
			uni.navigateTo({
				url: url
			});
		},
		openLoginFunc() {
			uni.navigateTo({
				url: '/publicLoginSubPage/public/login'
			});
		},
		openPersonalInfo() {
			let obj = {
				data: this.userInfo,
				third: this.thirdObj
			};
			uni.navigateTo({
				url: '/publicLoginSubPage/other/set?data=' + JSON.stringify(obj)
			});
		},
		clickAccountFunc() {
			this.show = true;
			this.resetFunc();
		},
		resetFunc() {
			this.bindPhone = false;
			this.bindAccountObj = {};
			this.bindPhoneObj = {};
		},
		bindConfirm() {
			//需要绑定
			if (!this.bindPhone) {
				if (this.bindAccountObj.appUserKey == '') {
					return uni.$u.toast('请输入登录账号~');
				}
				const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
				if (this.bindAccountObj.appUserSecret == '') {
					uni.showToast({
						title: '请输入登录密码~',
						icon: 'none'
					});
					return;
				} else if (!passReg.test(this.bindAccountObj.appUserSecret)) {
					uni.showToast({
						title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',
						icon: 'none',
						duration: 3000
					});
					return;
				}
				const postData = {
					loginMethod: 'ACCOUNT',
					...this.bindAccountObj,
					platformName: 'WECHAT',
					thirdUserId: this.getOpenId
				};
				uni.$u.http
					.post('/yt/third/bind', postData)
					.then(res => {
						if (res) {
							this.show = false;
							// 储存登录信息
							let resObj = {
								refreshToken: res.refreshToken,
								isToken: res.token
							};
							let userInfo = {
								...resObj,
								token: true, //token用于判断是否登录
								isThirdLogin: false,
								isThirdLoginAndNoDind: true
							};
							if (userInfo.token) {
								this.setUserInfo(userInfo);
							}
							uni.showToast({
								title: '账号绑定成功~',
								icon: 'none'
							});
							this.saveUserInfo();
						}
					})
					.catch(e => {
						uni.$u.toast(e.data?.msg);
						this.show = true;
					});
			} else {
				const phoneRegular = /^1\d{10}$/;
				if (this.bindPhoneObj.appUserKey == '') {
					uni.showToast({
						title: '请输入手机号码~',
						icon: 'none'
					});
					return;
				} else if (!phoneRegular.test(this.bindPhoneObj.appUserKey)) {
					uni.showToast({
						title: '手机号格式不正确~',
						icon: 'none'
					});
					return;
				}
				if (this.bindPhoneObj.appUserSecret == '') {
					uni.showToast({
						title: '请输入验证码~',
						icon: 'none'
					});
					return;
				} else if (!/^\d{6}$/.test(this.bindPhoneObj.appUserSecret)) {
					uni.showToast({
						title: '验证码格式不正确~',
						icon: 'none'
					});
					return;
				}
				const postData = {
					loginMethod: 'PHONE',
					...this.bindPhoneObj,
					platformName: 'WECHAT',
					thirdUserId: this.getOpenId
				};
				uni.$u.http
					.post('/yt/third/bind', postData)
					.then(res => {
						this.show = false;
						// 储存登录信息
						let resObj = {
							refreshToken: res.refreshToken,
							isToken: res.token
						};
						let userInfo = {
							...resObj,
							token: true, //token用于判断是否登录
							isThirdLogin: false,
							isThirdLoginAndNoDind: true
						};
						if (userInfo.token) {
							this.setUserInfo(userInfo);
						}
						uni.showToast({
							title: '手机绑定成功~',
							icon: 'none'
						});
						this.saveUserInfo();
					})
					.catch(e => {
						uni.$u.toast(e.data?.msg);
						this.show = true;
					});
			}
		},
		saveUserInfo() {
			//储存个人信息
			uni.$u.http.get('/yt/user/me/info').then(res => {
				if (res) {
					this.setUserInfo(res);
				}
			});
		},
		bindPhoneFunc() {
			this.bindPhone = true;
		},
		bindAccountFunc() {
			this.bindPhone = false;
		},
		//验证码按钮文字状态
		getCodeState() {
			const _this = this;
			this.readonly = true;
			this.codeText = '60S后重新获取';
			var s = 60;
			clear = setInterval(() => {
				s--;
				_this.codeText = s + 'S后重新获取';
				if (s <= 0) {
					clearInterval(clear);
					_this.codeText = '获取验证码';
					_this.readonly = false;
				}
			}, 1000);
		},
		//获取验证码
		getVcode() {
			if (this.readonly) {
				uni.showToast({
					title: '验证码已发送~',
					icon: 'none'
				});
				return;
			}
			if (this.bindPhoneObj.appUserKey == '') {
				uni.showToast({
					title: '请输入手机号~',
					icon: 'none'
				});
				return;
			}
			const phoneRegular = /^1\d{10}$/;
			if (!phoneRegular.test(this.bindPhoneObj.appUserKey)) {
				uni.showToast({
					title: '手机号格式不正确~',
					icon: 'none'
				});
				return;
			}
			let httpData = {};
			// 获取验证码接口
			uni.$u.http.post(`/yt/noauth/sendLoginSmsCode/${this.bindPhoneObj.appUserKey}`).then(res => {
				if (res) {
					this.getCodeState(); //开始倒计时
				}
			});
		},
		onLoginoutFunc() {
			this.showLogout = true;
		},
		closeLogout() {
			this.showLogout = false;
		},
		logoutBtn() {
			let that = this;
			uni.showModal({
				title: '退出登录',
				content: '你确定退出登录吗？',
				success(res) {
					if (res.confirm) {
						that.emptyUserInfo();
						that.showLogout = false;
						setTimeout(() => {
							uni.navigateTo({
								url: '/publicLoginSubPage/public/login'
							});
						}, 500);
					} else if (res.cancel) {
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import './static/personal.scss';
</style>