<template>
	<view class="login" :style="vuex_theme">
		<u-image width="100%" height="100%" :src="vuex_baseImgUrl+'logo_bg.png'" />

		<view class="box">

			<view class="logo">
				<u-image width="200rpx" height="96rpx" :src="vuex_baseImgUrl+'logo.png'" />
			</view>

			<view class="btn button_warp">
				<c-button type="confirm" text="微信一键登录" :disabled="isDisable" openType="getPhoneNumber"
					@getPhoneNumber="getPhoneNumber" @click="getUserProfile"></c-button>
			</view>

			<view class="changeLogin" @click="handelMobileLogin">
				手机号码登录/注册
			</view>

			<view class="agreement">
				<view class="check">
					<u-checkbox-group @change="checkboxChange" v-model="checked">
						<u-checkbox size="30" activeColor="var(--primary-color)" 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>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'

	export default {
		data() {
			return {
				isDisable: true,
				checked: [],
				service: "https://hropublic.oss-cn-beijing.aliyuncs.com/agreement/%E6%A0%A1%E8%81%8C%E9%80%9A%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE.html",
				policy: "https://hropublic.oss-cn-beijing.aliyuncs.com/agreement/%E6%A0%A1%E8%81%8C%E9%80%9A%E9%9A%90%E7%A7%81%E5%8D%8F%E8%AE%AE.html",
				form: {
					mobile: '',
					password: '',
				},
			}
		},

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

		},

		onShow() {

		},

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

			}
		},

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

			}),
		},

		methods: {

			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);
					}
				})
			},

			getPhoneNumber(e) {
				console.log(e)

				wx.login({
					success: (res) => {
						console.log(res);

						this.$store.dispatch(`user/login`, {
							way: 'wechat_code',
							type: 'teacher',
							jsCode: res.code,
							code: e.detail.code,
						})
					}
				})
			},

			handelMobileLogin() {
				this.$u.route({
					url: "/pages/main/my/mobileLogin/mobileLogin",
					params: {}
				});
			}
		}

	}
</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: 200rpx;
				margin: 0 auto;
			}

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

			.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: 3rpx 0 0 0;
					// display: inline-block;
				}

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

					.span {
						color: var(--primary-color);
					}
				}
			}

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

			.btn {
				margin-top: 200rpx;
				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>