<template>
	<view class="login">
		<view class="box">
			<view v-if="changeLogin == '账号密码登录'" class="form">
				<u-form :model="form" ref="uForm">
					<u-form-item prop="mobile"
						:leftIconStyle="{width:'40rpx',height:'40rpx', position:'relative', right:'8rpx'}"
						left-icon="/static/img/my/login_mobile.png" borderBottom>
						<u-input v-model="form.mobile" border="none" maxlength='11' placeholder="请输入手机号"
							:customStyle="{fontSize:'17px'}" />
					</u-form-item>
					<u-form-item prop="verifyCode"
						:leftIconStyle="{width:'40rpx',height:'40rpx', position:'relative', right:'8rpx'}"
						left-icon="/static/img/my/login_code1.png" borderBottom>
						<u-input v-model="form.password" border="none" placeholder="请输入验证码"
							:customStyle="{fontSize:'17px'}" />
						<u-button type="default" size="mini" slot="right" :hair-line="false"
							:custom-style="{color:'#0CB17A', border:'none',fontSize:'30rpx'}" @click="getCode">
							{{codeText}}
						</u-button>
						<u-code ref="uCode" @change="codeChange"></u-code>
					</u-form-item>
				</u-form>
			</view>
			<view v-else class="form">
				<u-form :model="form" ref="uForm">
					<u-form-item prop="mobile"
						:left-icon-style="{width:'40rpx',height:'40rpx', position:'relative', right:'8rpx'}"
						left-icon="/static/img/my/login_mobile.png" borderBottom>
						<u-input v-model="form.mobile" border="none" placeholder="请输入账号"
							:customStyle="{fontSize:'17px'}" />
					</u-form-item>
					<u-form-item prop="verifyCode"
						:left-icon-style="{width:'40rpx',height:'40rpx', position:'relative', right:'8rpx'}"
						left-icon="/static/img/my/login_code2.png" borderBottom>
						<u-input v-model="form.password" border="none" type='password' placeholder="请输入密码"
							:customStyle="{fontSize:'17px'}" />
					</u-form-item>
				</u-form>
			</view>

			<view class="btn button_warp">
				<c-button type="confirm" shape="circle"
					:customStyle="{borderRadius:'48rpx',fontSize:'34rpx',color:'#fff',fontWeight:'400'}" text="登录"
					:disabled="isDisable" @click="phoneLogin"></c-button>
			</view>

			<view class="changeLogin" @click="onchangeLogin">
				{{changeLogin}}
			</view>

			<view class="agreement">
				<view class="check">
					<u-checkbox-group @change="checkboxChange" v-model="checked">
						<u-checkbox size="28" activeColor="#0CB17A" shape="circle">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="text">
					<text>您已阅读理解并同意</text>
					<text class="span" @click="linkService">《优学乐业服务协议》、</text>
					<text class="span" @click="linkPolicy">《优学乐业隐私政策》</text>
				</view>
			</view>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getSmsCodeApi,
	} from '@/config/api.js';
	import md5 from '@/common/md5';

	export default {
		data() {
			return {
				errorType: 'toast',
				isDisable: true,
				checked: [],
				service: "https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/agreement/%E3%80%8A%E4%BC%98%E5%AD%A6%E4%B9%90%E4%B8%9A%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE%E3%80%8B.htm",
				policy: "https://yxlypublic.oss-cn-beijing.aliyuncs.com/WeChat/agreement/%E3%80%8A%E4%BC%98%E5%AD%A6%E4%B9%90%E4%B8%9A%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE%E3%80%8B.htm",
				form: {
					mobile: '',
					password: '',
				},
				changeLogin: '账号密码登录',
				codeText: '发送验证码',
			}
		},

		onLoad() {
			const {
				dispatch
			} = this.$store;

		},

		onShow() {

		},
		
		watch: {
			checked: function(newVal, oldVal) {
				this.isDisable = newVal.length != 0 ? false : true;
				
			}
		},
		

		computed: {
			...mapState('user', {
				// 箭头函数可使代码更简练
				isReg: 'isReg',

			}),
		},

		methods: {

			onchangeLogin() {
				if (this.changeLogin == '验证码登录') {
					this.changeLogin = '账号密码登录';
				} else {
					this.changeLogin = '验证码登录';
				}
			},

			linkService() {
				console.log(this)
				this.$u.route({
					url: `/pages/common/webview/webview?navtitle=服务协议&url=${this.service}`,
				})
			},

			linkPolicy() {
				this.$u.route({
					url: `/pages/common/webview/webview?navtitle=隐私政策&url=${this.policy}`,
				})
			},

			checkboxChange(n) {
				// console.log(n)
			},

			getUserProfile() {
				// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
				// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log('getUserProfile...', res)
						// this.$store.commit('setWenxinUserInfo', res);
						this.$u.vuex('vuex_weixinUserInfo', res.userInfo);
					}
				})
			},

			codeChange(text) {
				this.codeText = text;
			},

			getCode() {
				const {
					mobile = ''
				} = this.form;

				if (!(mobile && /^1[0-9]{10}$/.test(mobile))) {
					this.$refs.uToast.show({
						message: '请填写正确手机号',
						type: 'error',
						duration: 1500,
					})

				} else {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();

							console.log(mobile)

							getSmsCodeApi({
								phone: mobile
							})

						}, 1000);
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				}
			},

			phoneLogin() {
				if (this.changeLogin == '账号密码登录') {
					this.$store.dispatch(`user/login`, {
						way: 'code',
						type: 'teacher',
						phone: this.form.mobile,
						code: this.form.password,
					})
				} else {
					console.log(md5.hex_md5(this.form.password));
					this.$store.dispatch(`user/login`, {
						way: 'name',
						type: 'teacher',
						username: this.form.mobile,
						password: md5.hex_md5(this.form.password),
					})
				}
			},
		}

	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;
		position: relative;

		.box {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;

			.logo {
				padding: 156rpx 0 0 0;
				width: 120rpx;
				margin: 0 auto;
			}

			.name {
				margin: 32rpx 0 0 0;
				text-align: center;
				font-size: 48rpx;
				line-height: 66rpx;
				color: #000000;
				font-weight: 600;
			}

			.changeLogin {
				width: 100%;
				text-align: center;
				margin: 48rpx 0 0 0;
				font-size: 15px;
				font-weight: 400;
				color: #0CB17A;
			}

			.agreement {
				position: fixed;
				left: 0;
				bottom: 34rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				font-size: 24rpx;
				margin: 30rpx 0 32rpx 0;
				padding: 0 50rpx;

				.check {
					width: 40rpx;
					padding: 5rpx 0 0 0;
					// display: inline-block;
				}

				.text {
					// display: inline-block;
					color: rgba(0, 0, 0, 0.45);

					.span {
						color: #0CB17A;
					}
				}
			}

			.form {
				margin: 128rpx 60rpx 0px;
			}

			.btn {
				margin-top: 128rpx;
				padding: 0 48rpx;
			}

			.wxLogin {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-top: 180rpx;

				button {
					background-color: transparent;
				}

				button::after {
					border: initial
				}

				image {
					width: 96rpx;
					height: 96rpx;
				}

				text {
					margin-top: 0rpx;
				}
			}
		}
	}
</style>