<template>
	<view style="background-color: #fff">
		<view class="logo_bg">
			<text class="">您好，<br />欢迎来到 太湖云医</text>
			<image src="@/static/icon/login_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
			<image src="@/static/icon/login_icon_2.png" mode="aspectFit" class="icon_hua_2"></image>
		</view>
		<view class="register_page">
			<view class="login_method">
				<view class="title" :class="{ active: type == 2000 }" v-if="type == 2000">验证码登录/注册</view>
				<view class="title" :class="{ active: type == 1000 }" v-if="type == 1000">密码登录</view>
			</view>

			<!-- 验证码登录 -->
			<view v-if="type == 2000">
				<view class="flexbox" style="margin-top: 50rpx">
					<view class="input_tit emaPho" style="margin-top: 0; margin-right: 20rpx">
						<view @click="changeBrand(3000)" :class="{ active: brand == 3000 }">手机号</view>
						<span>/</span>
						<view @click="changeBrand(4000)" :class="{ active: brand == 4000 }">邮箱</view>
					</view>
				</view>
				<!-- 带区号手机号 -->
				<view class="flexbox" v-if="brand == 3000" style="margin: 36rpx 0; justify-content: space-between">
					<view class="quhao">
						<uni-data-select class="myselect" placeholder="请选择区号" v-model="loginForm.quCode"
							:localdata="quCodeList" style="height: 30rpx !important"
							@change="quChange"></uni-data-select>
					</view>
					<view class="triangle borderBottom phoneNumberInput"
						:clasfs="[type == 1000 ? 'left_triangle' : 'right_triangle']">
						<u--input class="form_input_box" type="number" v-model="loginForm.phone" 
							placeholder="请输入您的手机号" placeholder-class="grey" />
					</view>
				</view>

				<view class="input_box" v-if="brand == 4000">
					<u--input class="form_input_box" v-model="loginForm.email" placeholder="请输入您的邮箱"
						placeholder-class="grey"/>
				</view>
				<view class="input_tit">验证码</view>
				<view class="input_box">
					<u--input class="form_input_box" v-model="loginForm.code" placeholder="请输入您的验证码"
						placeholder-class="grey" maxlength="6" @confirm="onSubmit" />
					<button class="active" @click="onSetCode">{{ codeText }}</button>
				</view>
			</view>

			<!-- 密码登录 -->
			<view v-if="type == 1000">
				<!-- 手机号/邮箱 -->
				<view class="input_tit" style="margin-top: 80rpx">手机号 / 邮箱</view>
				<view class="input_box">
					<u--input class="form_input_box" v-model="loginForm.phoneEmail" placeholder="请输入您的手机号或者邮箱"
						placeholder-class="grey" />
				</view>
				<view class="input_tit">密码</view>
				<view class="input_box">
					<u--input v-model="loginForm.password" :password="!isSee" placeholder="请输入密码"
						placeholder-class="grey" @confirm="onSubmit" class="form_input_box">
					</u--input><u-icon class="active" :name="isSee ? 'eye-fill' : 'eye-off'" @click="isSee = !isSee"
						:color="isSee ? '#5188e5' : '#b0b0b0'" size="22"
						style="display: block; margin-right: 10rpx"></u-icon>
				</view>
			</view>

			<view class="protocol_box">
				<view class="select" :class="{ active: agree }" @click="agree = !agree"></view>
				我已同意

				<span class="highlight" @click="yhxyShow = true">《用户协议》</span>
				和
				<span class="highlight" @click="yszcShow = true">《隐私协议》</span>
			</view>
			<view class="btn_box">
				<button @click="onSubmit">登 录</button>
			</view>
			<view class="loginHelp" v-if="submitClickNum > 0">
				<text>登录遇到问题？</text><text class="link"
					@click="onPageJump('/pages/user/workOrder', 'login')">去反馈问题</text>
			</view>

			<view class="qie_huan" style="display: flex; justify-content: center">
				<view style="width: 30%" @click="changeType(1000)" v-if="type == 2000">密码登录</view>
				<view style="width: 50%; display: flex; justify-content: space-between" v-if="type == 1000">
					<text @click="changeType(2000)">验证码登录</text>
					<text v-if="type == 1000" @click="onPageJump('/pages/user/forget')">忘记密码？</text>
				</view>
			</view>
			<view class="youKeL" v-if="$platform=='ios'">
				<view @click="onPageJump('/pages/visitor/index')">免登录体验</view>
			</view>

			<u-popup :show="yhxyShow" title="用户协议" :round="10" @close="yhxyShow = false">
				<view class="tanchu">
					<view class="dp_title" v-html="yhxyText.title"></view>
					<view class="dp_content" v-html="yhxyText.content"></view>
				</view>
			</u-popup>

			<u-popup :show="yszcShow" title="隐私政策" :round="10" @close="yszcShow = false">
				<view class="tanchu">
					<view class="dp_title" v-html="yszcText.title"></view>
					<view class="dp_content" v-html="yszcText.content"></view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
var clear;
import { mapState, mapMutations } from "vuex";
import socket from "@/config/socket";
export default {
	data() {
		return {
			appForm: {
				loginName: 18834844847,
				loginPwd: "Zy123456",
			},
			passShowIcon: require("@/static/icon/ic_logon_display.png"),
			passHideIcon: require("@/static/icon/ic_logon_hide.png"),
			type: 2000,
			brand: 3000,
			isSee: false,
			//验证码
			codeText: "获取验证码",
			//验证码已发
			readonly: false,
			agree: false,
			isIos: true,
			system: 13,
			clearTime: null,
			HealthOpen: false,
			health_phone: "",
			health_password: "",
			isSee_H: false,
			yhxyShow: false,
			yszcShow: false,
			yhxyText: {
				title: "",
				content: "",
			},
			yszcText: {
				title: "",
				content: ""
			},
			quShow: false,
			quCodeList: [], // 国家区域码
			loginForm: {},
			urlList: {
				registerOrLogin: "common/user/registerOrLogin", //验证码登录
				passwordLogin: "common/user/login", //密码登录
				sendcode: "common/user/sms/sendcode", //密码登录
				sendEmailcode: "common/user/getMailCaptcha", //密码登录
				apiLogin: "app/phone.do?loginV2",
			},
			submitClickNum: 0, //登录按钮点击次数
		};
	},
	//第一次加载
	onLoad(e) {
		// #ifdef APP-PLUS
		this.isIos = plus.os.name == "iOS";
		let systemInfo = uni.getSystemInfoSync();
		this.system = parseFloat(systemInfo["system"].replace(/[a-zA-Z]/g, ""));
		this.type = 2000;
		this.brand = 3000;

		this.loginForm = {};
		// #endif
	},
	created() {
		this.getCountyCode();
	},
	//页面显示
	onShow() {
		this.getSettlement(113, "yszcText");
		this.getSettlement(112, "yhxyText");
	},
	//方法
	methods: {
		...mapMutations(["setUserInfo"]),
		...mapMutations(["setHealthMes"]),
		changeType(val) {
			this.loginForm = {};
			this.type = 2000;
			this.type = val;
			this.isSee = false;
			this.agree = false;
			if (val == 2000) {
				this.loginForm.quCode = this.quCodeList[0].value;
			}
		},
		changeBrand(val) {
			this.loginForm = {};
			this.loginForm.quCode = this.quCodeList[0].value;
			this.brand = val;
		},
		// 获取国家区域编码
		getCountyCode() {
			this.$http
				.request({
					url: "book/baseArea/getAllBaseArea",
					method: "POST",
					data: {},
					header: {
						"Content-Type": "application/json",
					},
				})
				.then((res) => {
					if (res.code == 0 && res.baseAreas.length > 0) {
						this.quCodeList = res.baseAreas.map((item) => {
							let obj = {
								text: item.title + " (+" + item.code + ")",
								value: item.code,
							};
							return obj;
						});
						this.loginForm.quCode = this.quCodeList[0].value;
						this.$forceUpdate();
					} else {
						this.quCodeList = [];
					}
				})
				.catch((e) => {
					console.log(e, "e");
				});
		},
		// 获取协议内容
		async getSettlement(id, type) {
			//隐私策略
			var data = await this.$commonJS.getAgreement(id);
			if (data.content) {
				data.content = data.content.replace(
					/<h5>/g,
					'<view style="font-weight: bold;font-size: 32rpx;margin-top: 20rpx;margin-bottom: 20rpx;">'
				);
				data.content = data.content.replace(/<\/h5>/g, "</view>");
			}
			if (type == "yszcText") {
				this.yszcText = data;
			}
			if (type == "yhxyText") {
				this.yhxyText = data;
			}
		},

		quChange(e) {
			console.log(e, "e");
		},
		onPageJump(url, name) {
			if(name){
				uni.navigateTo({
					url: `${url}?name=${name}`
				});
			}else{
				uni.navigateTo({
					url: url
				});
			}
		},
		//验证码按钮文字状态
		getCodeState() {
			clear && clearInterval(clear);
			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);
		},
		// 发送验证码
		onSetCode() {
			if (this.readonly) {
				return;
			}

			if (!this.agree) {
				uni.showToast({
					title: "请先同意《用户协议》和《隐私协议》",
					icon: "none",
				});
				return;
			}

			if (this.brand == 3000) {
				if (!this.loginForm.phone) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					});
					return;
				}
				if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
					// 如果没选择国家code，默认是中国大陆
					if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
						this.submitClickNum += 1
						uni.showToast({
							title: "手机格式不正确",
							icon: "none",
						});
						return;
					}
				}

				this.$http
					.post(this.urlList.sendcode, {
						phone: this.loginForm.phone,
						areaCode: this.loginForm.quCode,
						type: 2000,
					})
					.then((res) => {
						uni.showToast({
							title: "验证码发送成功",
							icon: "none",
						});
						this.getCodeState();
					});
			} else {
				if (!this.loginForm.email) {
					uni.showToast({
						title: "请输入邮箱",
						icon: "none",
					});
					return;
				}
				if (!this.$base.mailRegular.test(this.loginForm.email)) {
					uni.showToast({
						title: "邮箱格式不正确",
						icon: "none",
					});
					return;
				}
				this.$http
					.get(this.urlList.sendEmailcode, {
						email: this.loginForm.email,
					})
					.then((res) => {
						uni.showToast({
							title: "验证码发送成功",
							icon: "none",
						});
						this.getCodeState();
					});
			}
		},
		// 手机密码登录
		async onSubmit() {
			if (!this.agree) {
				this.$commonJS.showToast("请先同意《用户协议》和《隐私协议》");

				return;
			}

			let httpData = {};
			if (this.type == 2000) {
				if (this.brand == 3000) {
					if (!this.loginForm.phone) {
						uni.showToast({
							title: "请输入手机号",
							icon: "none",
						});
						return;
					}
					if (this.loginForm.quCode == null || this.loginForm.quCode == 86) {
						if (!this.$base.phoneRegular.test(this.loginForm.phone)) {
							this.submitClickNum += 1
							this.$commonJS.showToast("手机格式不正确");

							return;
						}
					}
					httpData.tel = this.loginForm.phone;
				} else {
					if (!this.loginForm.email) {
						this.$commonJS.showToast("请输入邮箱");

						return;
					}
					if (!this.$base.mailRegular.test(this.loginForm.email)) {
						this.$commonJS.showToast("邮箱格式不正确");

						return;
					}
					httpData.tel = this.loginForm.email;
				}
				if (!this.loginForm.code) {
					this.$commonJS.showToast("请输入验证码");

					return;
				}
				httpData.code = this.loginForm.code;

				await this.$http
					.get(this.urlList.registerOrLogin, httpData)
					.then(async (res) => {
						this.submitClickNum = 0
						res.userInfo.token = res.token.token;
						await this.setUserInfo(res.userInfo);
						console.log(
							"res.userInfo哈哈红红火火恍恍惚惚 at line 593:",
							res.token
						);
						uni.setStorageSync("token", res.token.token);
						uni.showToast({
							title: "登录成功",
						});

						setTimeout(() => {
							uni.setStorageSync("isJump", "false");
							uni.reLaunch({
								url: "/pages/home/index"
							});
						}, 100);
					}).catch(e => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
						this.submitClickNum += 1
					});
			} else {
				if (!this.loginForm.phoneEmail) {
					uni.showToast({
						title: "请输入手机号或邮箱",
						icon: "none",
					});
					return;
				}
				if (!this.loginForm.password) {
					uni.showToast({
						title: "请输入密码",
						icon: "none",
					});
					return;
				}
				httpData.password = this.loginForm.password;
				httpData.phone = this.loginForm.phoneEmail;
				await this.$http
					.post(this.urlList.passwordLogin, httpData)
					.then(async (res) => {
						this.submitClickNum = 0
						res.userInfo.token = res.token.token;
						await this.setUserInfo(res.userInfo);
						uni.setStorageSync("token", res.token.token);
						uni.showToast({
							title: "登录成功",
						});
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/home/index"
							});
						}, 500);
					}).catch(e => {
						uni.showToast({
							title: '登录失败',
							icon: 'none'
						})
						this.submitClickNum += 1
					});
			}
		},
	},
};
</script>
<style lang="scss" scoped>
@import "@/static/mixin.scss";

.phoneNumberInput {
	width: calc(100% - 160rpx);
	// width: 100%;
	height: 67rpx;

	input {
		font-size: 28rpx;
		margin: 20rpx 0;
	}
}

.borderBottom {
	border-bottom: 1px solid #efeef4;
}

.flexbox {
	display: flex;
}

.quhao {
	height: 50rpx;
	width: 290rpx;
	margin: 12rpx 15rpx 0 0;
}

.myselect {
	width: 240rpx;
	height: 50rpx !important;

	/deep/.uni-select {
		font-size: 24rpx;
	}

	/deep/.uni-select__selector-item {
		font-size: 24rpx;
	}
}

.highlight {
	color: $themeColor;
}

.tanchu {
	padding: 40rpx 30rpx 40rpx 30rpx;
	position: relative;
}

.logo_bg {
	background-image: url("@/static/login_bg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	height: 25vh;
	position: relative;

	text {
		font-size: 45upx;
		line-height: 65rpx;
		position: absolute;
		bottom: 140rpx;
		left: 45rpx;
		color: #fff;
		font-weight: bold;
		letter-spacing: 6rpx;
	}

	.icon_hua_1 {
		position: absolute;
		bottom: 60rpx;
		left: 245rpx;
		width: 150rpx;
		height: 150rpx;
		opacity: 0.08;
	}

	.icon_hua_2 {
		position: absolute;
		bottom: 10rpx;
		right: 30rpx;
		width: 250rpx;
		height: 250rpx;
		opacity: 0.15;
	}
}

.register_page {
	padding: calc(var(--status-bar-height)) 50rpx 40rpx;
	background-color: #fff;
	min-height: 75vh;

	.login_method {
		justify-content: space-between;
		padding: 0 96rpx;
		text-align: center;

		.title {
			margin: 0 auto;
			font-size: 40rpx;
			letter-spacing: 3rpx;
			color: #666;
		}
	}

	.left_triangle {
		&::before {
			left: 140rpx;
		}

		&::after {
			left: 140rpx;
		}
	}

	.right_triangle {
		&::before {
			left: 470rpx;
		}

		&::after {
			left: 470rpx;
		}
	}

	.input_tit {
		margin-top: 20rpx;
		font-size: 38rpx;
		font-weight: bold;
		color: $themeColor;
	}

	.emaPho {}

	.emaPho>view {
		display: inline-block;
		padding: 10rpx 0;
		color: #888;
	}

	.emaPho>view.active {
		color: $themeColor;
		padding: 10rpx 10rpx;
		border-bottom: 2px solid $themeColor;
		font-weight: bold;
	}

	.emaPho>span {
		display: inline-block;
		margin: 0 30rpx;
		color: #ccc;
	}

	.input_box {
		display: flex;
		align-items: center;
		border-radius: 8rpx;
		border-bottom: solid 2rpx #efeef4;
		margin: 30rpx 0;

		image {
			width: 36rpx;
			height: 24rpx;
		}

		input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			height: 70rpx;
		}

		.input_item {
			font-size: 28rpx;
			border: 0px;
			flex: 1;
			height: 70rpx;
			width: 100%;
			outline: none;
		}

		button {
			height: 60rpx;
			background-color: #f8f9fb;
			font-size: 28rpx;
			padding: 0 14rpx;
			color: $themeColor;
			line-height: 60rpx;
			margin-left: 20rpx;
		}

		.grey {
			color: #999999;
		}
	}

	.btn_box {
		margin-top: 40rpx;

		button {
			font-size: 32rpx;
			background-color: $themeBgColor;
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;

			&.active {
				@include theme("btn_bg") color: #fff;
			}
		}
	}

	.password_register {
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;

		text {
			font-size: 28rpx;
			color: #333333;
		}
	}

	.protocol_box {
		margin-top: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		font-size: 30rpx;
		color: #333333;

		.select {
			width: 35rpx;
			height: 35rpx;
			background-image: url("@/static/icon/ic_gender_unselected.png");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 100% auto;
			margin-right: 10rpx;

			&.active {
				background-image: url("@/static/icon/ic_agreed.png");
			}
		}

		>text {
			color: $themeColor;
		}
	}
}

.station {
	height: 230rpx;
}

.third_party_login_box {
	position: fixed;
	bottom: 60rpx;
	width: 100%;
	left: 0;
	padding: 0 30rpx;

	.third_party_title {
		display: flex;
		align-items: center;

		&:before,
		&:after {
			content: "";
			flex: 1;
			height: 2rpx;
			background-color: #f5f5f5;
		}

		text {
			font-size: 24rpx;
			color: #999999;
			flex-shrink: 0;
			padding: 0 20rpx;
		}
	}

	.third_party_content {
		margin-top: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 80upx;
			height: 80upx;
			margin: 0 20rpx;
		}
	}
}

.popup_box {
	width: 600upx;
	border-radius: 10rpx;

	.popup_title {
		display: flex;
		justify-content: center;
		height: 88upx;
		line-height: 88upx;

		view {
			align-items: center;
			font-size: 30upx;
			display: flex;

			image {
				width: 50upx;
				height: 50upx;
				margin: 0 20rpx 0 0;
			}
		}
	}

	.popup_content {
		padding: 30rpx 40rpx;
	}

	.popup_footer {
		display: flex;
		justify-content: center;

		view {
			width: 45%;
			flex-shrink: 0;
			text-align: center;
			font-size: 28upx;
			color: #999;
			line-height: 70upx;
			margin: 0 0 30rpx 0;
		}

		view:last-child {
			background-color: $themeColor;
			color: #fff;
			border-radius: 50rpx;
		}
	}
}

.dp_title {
	font-size: 36rpx;
	margin-bottom: 50rpx;
	color: #555;
	text-align: center;
	font-weight: bold;
}

.dp_content {
	max-height: 1000rpx;
	overflow-y: scroll;
	font-size: 28rpx;
	color: #555;
	line-height: 45rpx;

	.dp_con1 {
		font-weight: bold;
		font-size: 32rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
}

.qie_huan {
	font-size: 26rpx;
	margin: 20rpx 0 0 0;
	text-align: center;
}

.comTy {
	font-size: 28rpx;
	line-height: 46rpx;
	text-align: left;
}

.youKeL {
	display: flex;
	justify-content: center;
	margin: 60rpx 0 0 0;
	font-size: 28rpx;
	color: $themeColor;

	view {
		border: 1px solid $themeColor;
		border-radius: 10rpx;
		padding: 5rpx 15rpx;
	}
}

.loginHelp {
	border: 1px solid #f5dab1;
	margin-top: 16rpx;
	font-size: 26rpx;
	text-align: center;
	padding: 10rpx;
	background-color: #fdf6ec;
	border-radius: 15rpx;

	.link {
		color: #e6a23c;
	}
}
</style>