<template>
	<view class="container">

		<!-- 页面头部 -->
		<view class="header">
			<!--      <view class="title">
        <text>账号登录</text>
      </view> -->
			<view class="logo">
				<image src="https://wx.qlogo.cn/mmhead/Q3auHgzwzM6r6ngnJicOXYQpXicJiazznz68m2kXIbY1SibhPtzX4dc6BQ/0" mode="widthFix"></image>
			</view>
			<!-- <view class="sub-title">
        <text>未注册的手机号登录后将自动注册</text>
      </view> -->
		</view>
		<!-- 表单 -->
		<!-- #ifdef H5 -->
		<view class="login-form">
			<!-- 手机号 -->
			<view class="form-item">
				<input class="form-item--input" type="text" v-model="mobile" maxlength="20"
					placeholder="请输入登录账号|手机号码|邮箱" />
			</view>
			<view class="form-item">
				<input class="form-item--input" type="password" v-model="password" maxlength="30"
					placeholder="请输入登录密码" />

			</view>
			<!-- 图形验证码 -->
			<view class="form-item" style="display: none;">
				<input class="form-item--input" type="text" v-model="captchaCode" maxlength="5"
					placeholder="请输入图形验证码" />
				<view class="form-item--parts">
					<view class="captcha" @click="getCaptcha()">
						<image class="image" :src="captcha.base64"></image>
					</view>
				</view>
			</view>
			<!-- 短信验证码 -->
			<view class="form-item" style="display: none;">
				<input class="form-item--input" type="number" v-model="smsCode" maxlength="6" placeholder="请输入短信验证码" />
				<view class="form-item--parts">
					<view class="captcha-sms" @click="handelSmsCaptcha()">
						<text v-if="!smsState" class="activate">获取验证码</text>
						<text v-else class="un-activate">重新发送({{ times }})秒</text>
					</view>
				</view>
			</view>
			<!-- 登录按钮 -->
			<view class="login-button" @click="handleLogin">
				<text>立即登录 找对象</text>
			</view>
			<view class="agree">
				<view class="item">
					<radio value="index" :checked="disabled" @click="onRadio" />已阅读并同意以下协议
					<view class="xieyi" @click="$push('pages/article/detail/detail?id=114')">《服务协议》</view>
					<view class="xieyi" @click="$push('pages/article/detail/detail?id=115')">《隐私政策》</view>
				</view>
			</view>

			<!-- 企业微信授权登录 -->
			<!-- <view class="login-button-ww" @click="onWWLogin">
				<image src="@/static/login-wx-work.png"></image>
			</view> -->
		</view>
		<!-- #endif -->

		<!-- 微信授权手机号一键登录 -->
		<!-- #ifdef MP-WEIXIN -->
		<MpWeixinMobile :isParty="isParty" :partyData="partyData" />
		<!-- #endif -->

		<!-- <div id="ww_login" style="width: 100%; height: 100%"></div> -->

	

	</view>
</template>

<script>
	import store from '@/store'
	import storage from '@/utils/storage'
	import {
		ACCESS_TOKEN,
		USER_ID,
	} from '@/store/mutation-types'
	import {
		appId,
		tenantId
	} from '@/config.js'
	import {
		getCaptcha,
		login,
		sendSmsCaptcha
	} from '@/api/login.js'
	import * as Verify from '@/utils/verify'
	import http from '@/api'
	import MpWeixinMobile from './mp-weixin-mobile'

	// 倒计时时长(秒)
	const times = 60

	// 表单验证场景
	const GET_CAPTCHA = 10
	const SUBMIT_LOGIN = 20

	export default {
		components: {
			MpWeixinMobile
		},

		props: {
			// 是否存在第三方用户信息
			isParty: {
				type: Boolean,
				default: () => false
			},
			// 第三方用户信息数据
			partyData: {
				type: Object
			}
		},

		data() {
			return {
				// 正在加载
				isLoading: false,
				// 图形验证码信息
				captcha: {},
				// 短信验证码发送状态
				smsState: false,
				// 倒计时
				times,
				// 手机号
				mobile: '',
				password: '',
				// 图形验证码
				captchaCode: '',
				// 短信验证码
				smsCode: '',
				disabled: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		created() {
			// 获取图形验证码
			this.getCaptcha()
		},

		methods: {
			openXieyi(url){
				console.log("url: ",url);
				this.$navTo(url)
			},
			// 获取图形验证码
			getCaptcha() {
				const app = this
				getCaptcha()
					.then(result => app.captcha = result.data)
			},

			// 点击发送短信验证码
			handelSmsCaptcha() {
				const app = this
				if (!app.isLoading && !app.smsState && app.formValidation(GET_CAPTCHA)) {
					app.sendSmsCaptcha()
				}
			},

			// 表单验证
			formValidation(scene = GET_CAPTCHA) {
				const app = this
				// 验证获取短信验证码
				if (scene === GET_CAPTCHA) {
					if (!app.validteMobile(app.mobile) || !app.validteCaptchaCode(app.captchaCode)) {
						return false
					}
				}
				// 验证提交登录
				if (scene === SUBMIT_LOGIN) {
					if (!app.validteMobile(app.mobile) || !app.validteSmsCode(app.smsCode)) {
						return false
					}
				}
				return true
			},

			// 验证手机号
			validteMobile(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入手机号')
					return false
				}
				if (!Verify.isMobile(str)) {
					// this.$toast('请输入正确格式的手机号')
					// return false
				}
				return true
			},

			// 验证图形验证码
			validteCaptchaCode(str) {
				if (Verify.isEmpty(str)) {
					this.$toast('请先输入图形验证码')
					return false
				}
				return true
			},

			// 验证短信验证码
			validteSmsCode(str) {
				if (Verify.isEmpty(str)) {
					// this.$toast('请先输入短信验证码')
					// return false
				}
				return true
			},

			onRadio(){
				this.disabled = !this.disabled
			},

			// 请求发送短信验证码接口
			sendSmsCaptcha() {
				const app = this
				app.isLoading = true
				sendSmsCaptcha({
						phone: app.mobile
					})
					.then(result => {
						// 显示发送成功
						app.$toast(result.message)
						// 执行定时器
						app.timer()
					})
					.catch(() => app.getCaptcha())
					.finally(() => app.isLoading = false)

			},

			// 执行定时器
			timer() {
				const app = this
				app.smsState = true
				const inter = setInterval(() => {
					app.times = app.times - 1
					if (app.times <= 0) {
						app.smsState = false
						app.times = times
						clearInterval(inter)
					}
				}, 1000)
			},

			// 点击登录
			handleLogin() {
				const app = this
				if (!app.isLoading && app.formValidation(SUBMIT_LOGIN)) {
					app.submitLogin()
				}
			},

			// 确认登录
			submitLogin() {
				const app = this
				app.isLoading = true
				console.log("登录: ", '登录');
				store.dispatch('Login', {
				  	username: app.mobile,
				  	password: app.password
				  })
				  .then(result => {
					  // 一键登录成功
					  app.$toast(result.message)
					  // 跳转回原页面
					  setTimeout(() => {
						uni.reLaunch({
					    	url: '/pages/index/index',
							complete(res) {
								console.log(res)
							}
					    })
					  }, 1000)
				 //    // 显示登录成功
				 //    app.$toast(result.message)
				 //    // 跳转回原页面
					// uni.redirectTo({
					// 	url: 'pages/user/user'
					// })
				    // setTimeout(() => {
				    //   app.onNavigateBack(1)
				    // }, 2000)
				  })
				  .catch(err => {
				    // 跳转回原页面
				    if (err.result.data.isBack) {
				      setTimeout(() => app.onNavigateBack(1), 2000)
				    }
				  })
				  .finally(() => app.isLoading = false)
			},

			/**
			 * 登录成功-跳转回原页面
			 */
			onNavigateBack(delta = 1) {
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack({
						delta: Number(delta || 1)
					})
				} else {
					this.$navTo('pages/index/index')
				}
			},

			onWWLogin() {

			}

		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 80vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	// 页面头部
	.header {
		margin-bottom: 5rpx;

		.title {
			color: #191919;
			font-size: 54rpx;
		}

		.sub-title {
			margin-top: 20rpx;
			color: #b3b3b3;
			font-size: 28rpx;
		}
	}

	// 输入框元素
	.form-item {
		display: flex;
		padding: 18rpx;
		border-bottom: 1rpx solid #f3f1f2;
		margin-bottom: 30rpx;
		height: 96rpx;

		&--input {
			font-size: 28rpx;
			letter-spacing: 1rpx;
			flex: 1;
			height: 100%;
		}

		&--parts {
			min-width: 100rpx;
			height: 100%;
		}

		// 图形验证码
		.captcha {
			height: 100%;

			.image {
				display: block;
				width: 192rpx;
				height: 100%;
			}
		}

		// 短信验证码
		.captcha-sms {
			font-size: 28rpx;
			line-height: 50rpx;
			padding-right: 20rpx;

			.activate {
				color: $main-bg;
			}

			.un-activate {
				color: #9e9e9e;
			}
		}
	}

	.logo {
		display: flex;
		justify-content: center;
		width: 180rpx;
		height: 180rpx;
		overflow: hidden;
		border-radius: 20rpx;
		margin: auto;
		image {
			width: 180rpx;
			border-radius: 50%;
		}
	}

	// 登录按钮
	.login-button {
		width: 100%;
		height: 86rpx;
		margin-top: 80rpx;
		background: linear-gradient(#ff0077, #4d0d68);
		// background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
		color: $main-text;
		border-radius: 80rpx;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
		letter-spacing: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login-button-ww {
		margin-top: 80rpx;
		display: flex;
		justify-content: center;

		image {
			height: 96rpx;
		}
	}
	.agree{
		text-align: center;
		width: 750rpx;
		color: rgba(75,13,99,1);
		.item{
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}
			.xieyi{
				text-decoration:underline;
			}
		}
	}
</style>
