<template>
	<view class="container">
		<image class="login-bg" src="../../static/images/login-bg.png"></image>
		<view class="login-content">
			<view class="page-title flex-center">{{login_name}} </view>
			<view class="login-content-home">
				<view class="login-content-home-wd100">
					<view class="bg-img1">
					</view>
				</view>
				<view class="login-content-home-wd100 login-content-home2">
					<view class="bg-img2">
					</view>
				</view>
				<view class="login-content-home-wd100 login-content-home3">
					<view class="bg-img3">
					</view>
				</view>
				<view class="cell-home">
					<view class="cell-home-content">
						<view class="cell-home-title-text flex-y-bottom">
							<view @click="Verifier(item.number)" :class="is_login==item.number?'cell-home-title':''"
								v-for="(item,index) of loginArr" :key="index">
								{{item.name}}
							</view>
						</view>
						<form @submit="login" v-if="is_login==1">
							<view class="cell flex-row-between">
								<input name="tel" @input="getphone" :value="phone" placeholder="请输入登录账号"></input>
								<i class="iconfont iconquchu flex-center" @click="onClearPhone" v-show="phone"></i>
							</view>
							<view class="cell flex-row-between" v-if="is_pwd">
								<input :password="is_password" type="text" name="pwd" maxlength="16"
									placeholder="请输入密码"></input>
								<image v-if="isLook" @click="bindLook" class="islook"
									src="../../static/images/isLook.png">
								</image>
								<image v-else @click="bindLook" class="islooks" src="../../static/images/hide_Look.png">
								</image>
							</view>
							<view class="cell flex-row-between" v-else>
								<input type="number" name="code" :value="pwd" maxlength="6"
									placeholder="请输入验证码"></input>
								<view class="code-btn" @click="getCode">
									{{codeConfig.type == 1?'获取验证码':'重试('+codeConfig.time+'s)'}}
								</view>
							</view>
							<view class="xieyi flex-row" @click="changeXieyi">
								<image src="../../static/images/select_on.png" mode="aspectFit" class="icon"
									v-if="xieyiActive">
								</image>
								<image src="../../static/images/select.png" mode="aspectFit" class="icon" v-else>
								</image>
								<view class="xieyi-text">登录即代表你已阅读并同意</view>
								<view @click.stop="agreement" style="color: #007AFF;">《用户服务协议》</view>
							</view>
							<!-- <button form-type="submit" class="login-btn">登录</button> -->
							<button hover-class="none" class="login-btn flex-center" form-type="submit"
								:class="toggleDelay?'shake_animation':''">
								<image src="../../static/images/login-btn.png" mode=""
									style=" width: 180rpx;height: 180rpx;margin-top: 30rpx;"></image>
							</button>
							<view class="login-text" @click="bindpwd">
								{{is_pwd?'验证码登录':'密码登录'}}
							</view>
							<!-- #ifdef  MP-WEIXIN-->
							<button open-type="getUserInfo" @getuserinfo='mylogin' hover-class="none"
								class="wxlogin flex-center">
								<image src="../../static/images/wxlogin.png" mode=""></image>
							</button>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<button @click="gzhurl" hover-class="none" class="wxlogin flex-center">
								<image src="../../static/images/wxlogin.png" mode=""></image>
							</button>
							<!-- #endif -->
						</form>

						<form @submit="login3" v-if="is_login==2">
							<view class="cell flex-row-between">
								<input name="name" @input="getphone" :value="phone" placeholder="请输入登录账号"></input>
								<i class="iconfont iconquchu flex-center" @click="onClearPhone" v-show="phone"></i>
							</view>
							<view class="cell flex-row-between">
								<input :password="is_password" type="text" name="password" maxlength="16"
									placeholder="请输入密码"></input>
								<image v-if="isLook" @click="bindLook" class="islook"
									src="../../static/images/isLook.png">
								</image>
								<image v-else @click="bindLook" class="islooks" src="../../static/images/hide_Look.png">
								</image>
							</view>
							<button hover-class="none" class="login-btn" form-type="submit"
								:class="toggleDelay?'shake_animation':''">
								<image src="../../static/images/login-btn.png" mode=""></image>
							</button>
						</form>

						<form @submit="login3" v-if="is_login==3">

							<view class="cell flex-row-between">
								<input name="name" @input="getphone" :value="phone" placeholder="请输入登录账号"></input>
								<i class="iconfont iconquchu flex-center" @click="onClearPhone" v-show="phone"></i>
							</view>

							<view class="cell flex-row-between">
								<input :password="is_password" type="text" name="password" maxlength="16"
									placeholder="请输入密码"></input>
								<image v-if="isLook" @click="bindLook" class="islook"
									src="../../static/images/isLook.png">
								</image>
								<image v-else @click="bindLook" class="islooks" src="../../static/images/hide_Look.png">
								</image>
							</view>
							<button hover-class="none" class="login-btn" form-type="submit"
								:class="toggleDelay?'shake_animation':''">
								<image src="../../static/images/login-btn.png" mode=""></image>
							</button>
							<!-- <button form-type="submit" class="login-btn">登录</button> -->
						</form>
					</view>
				</view>
			</view>
		</view>
		
		<view class="model_notice flex-center" v-if="is_text">
			<view class="model_notice_content">
				<view class="bgf model_notice_title ft32">
					<image src="../../static/images/Privacy.png"></image>
				</view>
				<view class="model_notice_color">
					<scroll-view scroll-y style="min-height: 500rpx;height: 500rpx;" scroll-y="true">
						<rich-text :nodes="nodes">
						</rich-text>
					</scroll-view>
				</view>
				<view class="box-pack-between ft32 " style="padding: 38rpx 40rpx;">
					<navigator class="guanbis flex-center" hover-class="none" target="miniProgram" open-type="exit">
						拒绝
					</navigator>
					<view class="confirm flex-center" @click="bindconfirm">
						同意并继续
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				toggleDelay: false,
				phone: null,
				code: null,
				xieyiActive: true,
				codeConfig: {
					type: 1,
					time: 60
				},
				tel: '',
				pwd: '',
				is_pwd: false,
				login_name: "",
				isLook: false,
				is_password: true,
				loginArr: [{
					name: "用户登录",
					number: 1
				}, {
					name: "商家登录",
					number: 2
				}, {
					name: "门店登录",
					number: 3
				}, ],
				is_login: 1,
				is_text: false,
				nodes:'',
			}
		},
		onLoad(e) {
			// #ifdef H5
			this.isweb();
			// #endif
			
			// this.xieyi();
			if (!uni.getStorageSync("agree_user")) {
				this.Privacyadvance();
			}
			
		},
		onShow() {
			this._getStorage();
			this.getname();
			
		},

		onShareAppMessage(e) {

		},

		methods: {
			
			bindconfirm() {
				this.is_text = false;
				uni.setStorageSync("agree_user", true)
			},
			
			Privacyadvance() {
				this.request({
					url: "user/yixie",
					data: {
						kc_id: "",
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.is_text = true;
						this.nodes = res.data.kc_text.replace('<img',
							'<img style="max-width:100%;height:auto;display:block;margin:10px 0;"')
					}
				});
			},
			
			_getStorage() {
				uni.getStorage({
					key: this.is_login + 'login',
					success: (res) => {
						this.phone = res.data.tel;
					},
					fail: (err) => {
						this.phone = "";
					}
				});
			},

			Verifier(e) {
				console.log(e, "e")
				this.is_login = e;
				this._getStorage();
			},

			bindLook(e) {
				this.isLook = !this.isLook;
				this.is_password = !this.is_password;
			},

			getname() {
				this.request({
					url: "index/login_name",
				}).then(res => {
					console.log(res, "res")
					if (res.code == "200") {
						this.login_name = res.data.login_name;
					}
				}).catch((res) => {
					console.log("message", res)
				});
			},


			// 公众号授权
			isweb() {
				function GetRequest() {
					var url = location.search; //获取url中"?"符后的字串
					var theRequest = new Object();
					if (url.indexOf("?") != -1) {
						//判断是否有参数
						var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
						var strs = str.split("&");
						console.log(strs)
						for (var i = 0; i < strs.length; i++) {
							theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
						}
					}
					return theRequest;
				}
				if (GetRequest().code) {
					//发起网络请求
					this.request({
						url: "user/gzh_login",
						data: {
							code: GetRequest().code,
						},
					}).then(res => {
						console.log(res, "res")
						uni.setStorageSync("token", res.data.token);
						setTimeout(() => {
							uni.reLaunch({
								url: "../index/index"
							})
						}, 500)

					}).catch((res) => {
						console.log("message", res)
						if (res.message == "获取openid失败") {
							return
						}
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					});
				}
			},

			gzhurl(e) {
				this.request({
					url: "user/gzhurl",
					data: {
						type: 1,
					},
				}).then(res => {
					if (res.data.url) {
						window.location.href = res.data.url
					}
				}).catch((res) => {
					console.log("message", res)
				});
			},

			// 微信授权
			mylogin(e) {
				if (e.detail.errMsg == "getUserInfo:ok") {
					uni.login({
						success: (res) => {
							console.log(res)
							let code = res.code;
							if (code) {
								//发起网络请求
								this.request({
									url: "user/wx_login",
									data: {
										code: code,
									},
								}).then(res => {
									console.log(res, "res")
									uni.setStorageSync("token", res.data.token);
									setTimeout(() => {
										uni.reLaunch({
											url: "../index/index"
										})
									}, 500)
								}).catch((res) => {
									console.log("message", res)
									uni.showModal({
										title: '提示',
										content: res.message,
										success: (res) => {
											if (res.confirm) {
												uni.navigateTo({
													url: "./bindphone?code=" +
														code + '&type=1'
												})
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									})


								});
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				} else {
					uni.showToast({
						title: '请允许授权',
						icon: 'none',
					})
				}
			},

			bindpwd() {
				this.is_pwd = !this.is_pwd;
			},

			agreement(e) {
				uni.navigateTo({
					url: "../text/text?title=注册服务协议"
				})
			},

			getphone(e) {
				this.phone = e.detail.value;
			},

			onClearPhone() {
				this.tel = "";
				this.phone = "";
			},
			changeXieyi() {
				this.xieyiActive = true
			},
			getCode() {
				if (this.codeConfig.type == 2) {
					return false
				}
				if (!/^1[0-9]{10}/.test(this.phone)) {
					uni.showToast({
						title: "请正确输入手机号",
						icon: 'none'
					})
					return false
				}
				//请求验证码
				this.request({
					url: "user/sendcode",
					data: {
						tel: this.phone,
					},
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						this.codeConfig.type = 2
						this._timer = setInterval(() => {
							if (this.codeConfig.time == 1) {
								this.codeConfig = {
									type: 1,
									time: 30
								}
								clearInterval(this._timer)
							}
							this.codeConfig.time--
						}, 1000)
					}
				}).catch((res) => {
					console.log("message", res)
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			login(e) {
				let data, url;

				// if (!/^1[0-9]{10}/.test(e.detail.value.tel)) {
				// 	uni.showToast({
				// 		title: "请正确输入手机号",
				// 		icon: 'none'
				// 	})
				// 	this.toggleDelay = true;
				// 	setTimeout(() => {
				// 		this.toggleDelay = false;
				// 	}, 1000)
				// 	return false
				// }

				if (!this.xieyiActive) {
					uni.showToast({
						title: "请同意注册协议",
						icon: 'none'
					})
					return false
				}

				if (this.is_pwd) {
					if (!e.detail.value.pwd) {
						uni.showToast({
							title: "请输入密码",
							icon: 'none'
						})
						return false
					}
					data = {
						tel: e.detail.value.tel,
						pwd: e.detail.value.pwd,
					}
					url = "user/pass_login";
				} else {
					if (e.detail.value.code === '' || e.detail.value.code === null) {
						uni.showToast({
							title: "请输入验证码",
							icon: 'none'
						})
						return false
					}
					data = {
						tel: e.detail.value.tel,
						code: e.detail.value.code,
					}
					url = "user/login";
				}
				this.request({
					url,
					data,
				}).then(res => {
					console.log(res, "res")
					if (res.code === '200') {
						uni.setStorageSync("token", res.data.token);
						uni.setStorage({
							key: 'login',
							data: {
								tel: e.detail.value.tel,
							},
							success: () => {
								console.log('success');
								if (!this.is_pwd) {
									uni.reLaunch({
										url: "./password?tel=" + e.detail.value.tel
									})
								} else {
									uni.reLaunch({
										url: "../index/index"
									})
								}
							}
						});
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

			login3(e) {
				console.log(e, "e")
				if (!e.detail.value.name) {
					uni.showToast({
						title: "请输入账号",
						icon: 'none'
					})
					this.toggleDelay = true;
					setTimeout(() => {
						this.toggleDelay = false;
					}, 1000)
					return false
				}
				if (!e.detail.value.password) {
					uni.showToast({
						title: "请输入密码",
						icon: 'none'
					})
					return false
				}
				let url = "Smdcshop/login";
				let data = e.detail.value;
				data.type = this.is_login == 2 ? 9 : 10;
				this.request({
					url,
					data,
				}).then(res => { 
					
					console.log('res',res);
					if (res.code === '200') {
						uni.setStorageSync("store_user", res.data);
						uni.setStorageSync("is_login", this.is_login);
						uni.setStorage({
							key: this.is_login + 'login',
							data: {
								tel: e.detail.value.name,
							},
							success: () => {
								console.log('success');
								// 门店
								if (this.is_login == 3) {
									uni.setStorageSync("admin_id", res.data.id);
									uni.setStorageSync("store_id", res.data.store_id);
									uni.reLaunch({
										url: "../../storeInfoIng/storeInfo"
									})
								}
								// 商家
								if (this.is_login == 2) {
									uni.setStorageSync("admin_id", res.data.id);
									uni.reLaunch({
										url: "../../statistics/index/index"
									})
								}
							}
						});
					}
				}).catch((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
				});
			},

		},


		onUnload() {
			clearInterval(this._timer)
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
	}

	.model_notice {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.5);
	}

	.model_notice_content {
		border-radius: 16rpx;
		background: #fff;
		font-size: 28rpx;
		overflow: hidden;
	}

	.model_notice_color {
		width: 650rpx;
		min-height: 350rpx;
		padding: 20rpx 40rpx;
		padding-bottom: 0;
		overflow: hidden;
	}

	.model_notice_title {
		height: 220rpx;
		text-align: center;
	}

	.model_notice_title image {
		height: 100%;
		width: 100%;
	}

	.guanbis {
		width: 200rpx;
		height: 88rpx;
		background: #f6f6f6;
		border-radius: 8rpx;
		color: #666666;
	}

	.confirm {
		width: 330rpx;
		height: 88rpx;
		background: linear-gradient(142deg, #ff3427 0%, #fc6e4d 95%);
		border-radius: 8rpx;
		box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(253, 70, 51, 0.16);
		color: #FFFFFF;
	}

	.container {

		height: 100%;
		width: 100%;

		.login-bg {
			height: 100%;
			width: 100%;
			display: block;
		}

		.login-content {
			position: absolute;
			top: 0;
			left: 0;
			height: 100%;
			width: 100%;

			.page-title {
				// margin: 50rpx 20rpx 0rpx;
				// line-height: 1;
				font-weight: 700;
				color: #FFFFFF;
				text-align: center;
				height: 20%;
				font-size: 48rpx;
				font-family: PingFang SC, PingFang SC-Semibold;
				font-weight: 600;
				text-align: center;
				color: #ffffff;
				text-shadow: 0rpx 3rpx 16rpx 0rpx rgba(1, 82, 198, 0.20);
				padding-top: 80rpx;
			}

			.login-content-home {
				position: relative;
				height: 800rpx;

				.login-content-home-wd100 {
					width: 100%;
					height: 100%;

					.bg-img1 {
						width: 490rpx;
						height: 800rpx;
						opacity: 1;
						background: #4893ff;
						border-radius: 50rpx;
						margin: 0 auto;
					}

					.bg-img2 {
						width: 582rpx;
						height: 100%;
						opacity: 1;
						background: #7fb4ff;
						border-radius: 50rpx;
						margin: 0 auto;
					}

					.bg-img3 {
						width: 670rpx;
						height: 100%;
						opacity: 1;
						background: #ffffff;
						border-radius: 50rpx;
						box-shadow: 0rpx 8rpx 24rpx 0rpx rgba(0, 83, 201, 0.30);
						margin: 0 auto;
					}
				}

				.login-content-home2 {
					width: 100%;
					position: absolute;
					top: 26rpx;
					height: 800rpx;
				}

				.login-content-home3 {
					width: 100%;
					position: absolute;
					top: 59rpx;
					height: 927rpx;
				}
			}

			.cell-home {
				width: 100%;
				position: absolute;
				top: 59rpx;
				height: 927rpx;

				.cell-home-content {
					width: 670rpx;
					margin: 0 auto;
					padding: 60rpx 40rpx 0 40rpx;

					.cell-home-title-text {
						opacity: 1;
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: left;
						color: #999999;
						margin-bottom: 70rpx;

						view {
							margin-left: 30rpx;
						}

						.cell-home-title {
							opacity: 1;
							font-size: 40rpx;
							font-weight: 600;
							text-align: left;
							color: #333333;
						}
					}

					.cell {
						margin-bottom: 40rpx;
						display: flex;
						height: 100rpx;
						opacity: 1;
						background: #f7f8fc;
						border-radius: 8rpx;
						padding: 0 20rpx 0 40rpx;

						.cell-text {
							font-size: 30rpx;
						}

						.iconquchu {
							flex: none;
							font-size: 23rpx;
							color: #cbcbcb;
							width: 50rpx;
							height: 50rpx;
						}

						.code-btn {
							flex: none;
							width: 170rpx;
							height: 60rpx;
							border-radius: 30rpx;
							background-color: #3387FF;
							text-align: center;
							line-height: 60rpx;
							color: #fff;
							font-size: 24rpx;
						}

						input {
							flex: auto;
							margin-right: 40rpx;
						}
					}

					.login-btn {

						// width: 630rpx;
						// height: 98rpx;
						// background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
						// border-radius: 8rpx;
						// box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
						image {
							width: 213rpx;
							height: 226rpx;
							margin-top: 30rpx;
						}
					}


					.shake_animation {
						animation-duration: .5s;
						animation-timing-function: ease-out;
						animation-fill-mode: both;
						animation-name: shake
					}

					@keyframes shake {

						0%,
						100% {
							transform: translateX(0)
						}

						10% {
							transform: translateX(-9px)
						}

						20% {
							transform: translateX(8px)
						}

						30% {
							transform: translateX(-7px)
						}

						40% {
							transform: translateX(6px)
						}

						50% {
							transform: translateX(-5px)
						}

						60% {
							transform: translateX(4px)
						}

						70% {
							transform: translateX(-3px)
						}

						80% {
							transform: translateX(2px)
						}

						90% {
							transform: translateX(-1px)
						}
					}

					.login-text {
						font-size: 30rpx;
						font-family: Source Han Sans CN, Source Han Sans CN-Regular;
						font-weight: 400;
						text-align: left;
						color: #999999;
						margin-top: 28rpx;
					}

				}
			}
		}
	}



	// .container {
	// 	padding: 0 60rpx;
	// }

	.islook {
		width: 40rpx;
		height: 30rpx;
	}

	.islooks {
		width: 43rpx;
		height: 41rpx;
	}

	// .page-title {
	// 	// padding: 100rpx 0 50rpx;
	// 	font-size: 54rpx;
	// 	// line-height: 1;
	// 	font-weight: 700;
	// 	color: #242424;
	// }

	.cell {
		height: 90rpx;
		border-bottom: 2rpx solid #ededed;
		margin-bottom: 55rpx;
	}

	.cell .iconquchu {
		flex: none;
		font-size: 23rpx;
		color: #cbcbcb;

	}

	.cell .code-btn {
		flex: none;
		width: 170rpx;
		height: 60rpx;
		border-radius: 30rpx;
		background-color: #3387FF;
		text-align: center;
		line-height: 60rpx;
		color: #fff;
		font-size: 24rpx;
	}

	.cell input {
		flex: auto;
		margin-right: 40rpx;
	}

	.xieyi {
		font-size: 26rpx;
	}

	.xieyi .icon {
		flex: none;
		margin-right: 12rpx;
		display: block;
		width: 28rpx;
		height: 28rpx;
	}


	.xieyi .xieyi-text {
		color: #a8a8a8;
	}

	.xieyi navigator {
		color: #3387FF;
	}

	.wxlogin {
		width: 100%;
		margin-top: 20rpx;
	}

	.wxlogin image {
		width: 86rpx;
		height: 86rpx;
	}

	// .login-btn {
	// 	width: 530rpx;
	// 	height: 98rpx;
	// 	background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
	// 	border-radius: 8rpx;
	// 	box-shadow: 0px 0px 8rpx 0px rgba(51, 135, 255, 0.2);
	// 	font-size: 32rpx;
	// 	font-weight: 500;
	// 	text-align: center;
	// 	color: #fff;
	// 	line-height: 98rpx;
	// 	margin: 100rpx auto 0;
	// }

	.login-text {
		font-size: 30rpx;
		font-family: Source Han Sans CN, Source Han Sans CN-Regular;
		font-weight: 400;
		text-align: left;
		color: #999999;
		margin-top: 32rpx;
	}

	button {
		border: none;
		background-color: transparent;
		outline: none;
	}

	button::after {

		border: none;
	}
</style>
