<template>
	<view class="login black_style">
		<Nav className="black_nav" :backVisible="true" :scroll="scroll">
			<block slot="content" class="omit">{{ $t('index.login.title') }}</block>
		</Nav>
		<view class="body_scroll clearfix" :style="getHeight">
			<template v-if="type === 'login'">
				<view class="login_swiper">
					<swiper class="swiper" :indicator-dots="true" :autoplay="true" :circular="true" :style="loginSwiperHeight" indicator-active-color="#949494" indicator-color="#373737">
						<swiper-item v-for="(item, key) in loginBannerList" :key="key">
							<view class="swiper-item" :style="loginSwiperHeight">
								<image class="pic" mode="aspectFill" :src="item"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="login_form">
					<view class="login_select" @click="checkedChange">
						<view class="checkbox">
							<view class="icomoon icon-Unchecked" v-if="!options.checked"></view>
							<view class="icomoon icon-checked" v-else></view>
						</view>
						<view class="txt">阅读并同意</view>
						<view class="btn" @click.stop="link('/pages/index/userAagreement')">《用户协议与隐私政策》</view>
						<!-- <van-checkbox class="checkbox" :icon-size="16" :value="options.checked" checked-color="#AA2929" @change="checkedChange">
						</van-checkbox> -->
					</view>
					<view class="wx_model">
						<view class="wx_mask" @click.stop="wxMask" v-if="!options.checked"></view>
						<button class="wx_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">微信一键登录</button>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="login_swiper">
					<view class="swiper">
						<view class="swiper-item" :style="wxUserSwiperHeight">
							<image class="pic" mode="aspectFill" src="https://daifeiclub.com/image/pics/wxUserPic.png"></image>
						</view>
					</view>
				</view>
				<view class="login_form wxUser_form">
					<view class="wx_model">
						<view class="wx_btn" @click="getUserProfile">获取头像昵称</view>
					</view>
				</view>
			</template>
		</view>
		<!-- loading -->
		<loading :visible="loading" />
	</view>
</template>

<script>
	import mixins from '@/utils/mixins'
	import sdkService from '@/api/sdk_service'

	export default {
		mixins: [mixins],
		data() {
			return {
				type: 'login', // login微信一键登录 wxUser获取头像昵称
				options: {
					checked: false // 微信一键登录 是否同意用户协议
				},
				loginBannerList: [
					'https://daifeiclub.com/image/pics/loginPic01.png',
					'https://daifeiclub.com/image/pics/loginPic02.png',
					'https://daifeiclub.com/image/pics/loginPic03.png',
					'https://daifeiclub.com/image/pics/loginPic04.png'
				]
			}
		},
		computed: {
			// 微信一键登录swiper高度
			loginSwiperHeight() {
				let height = (this.System.screenWidth * 1.2933333333333332)
				return `height: ${parseInt(height)}px;`;
			},
			// 获取头像昵称swiper高度
			wxUserSwiperHeight () {
				let height = (this.System.screenWidth * 1.4586666666666666)
				return `height: ${parseInt(height)}px;`;
			}
		},
		onLoad(e) {
			if (e) {
				this.options = Object.assign({}, this.options, e)
			}
		},
		methods: {
			// 微信一键登录 选中
			checkedChange () {
				this.options.checked = !this.options.checked
			},
			// 微信一键登录 微信一键登录之前
			wxMask () {
				if (!this.options.checked) {
					return this.$base.Tips('请阅读并勾选上述协议')
				}
			},
			// 获取手机号
			getPhoneNumber (e) {
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					uni.login({
						provider: 'weixin',
						success: res => {
							this.form.code = res.code
							this.form.encryptedData = e.detail.encryptedData
							this.form.iv = e.detail.iv
							this.type = 'wxUser'
						}
					})
				}
			},
			// 获取头像昵称
			getUserProfile () {
				uni.getUserProfile({
					desc: '用于注册账户信息',
					success: res => {
						this.form.nickname = res.userInfo.nickName
						this.form.avatarUrl = res.userInfo.avatarUrl
						this.save()
					}
				})
			},
			// 保存
			async save () {
				this.loading = true
				const result = await this.$axios.post(this.API.login, this.form)
				this.loading = false
				if (result) {
					uni.setStorageSync('openid', result.openid)
					uni.setStorageSync('offiAcctOpenid', result.offiAcctOpenid)
					uni.setStorageSync('token', result.token)
					uni.setStorageSync('uid', result.uid)
					uni.$emit('getUserSig', result)
					setTimeout(() => {
						if (this.options.type === 'share') {
							uni.navigateBack({
								delta: 1
							})
							return
						}
						uni.setStorageSync('index', 0)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}, 200)
				}
			},
			// 跳转
			link(path) {
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		min-height: calc(100vh);

		.body_scroll {
			.login_swiper {
				margin-top: 10rpx;
				.swiper {
					background-color: $bg-0;
				}
			}
			.login_form {
				margin: 124rpx 0 144rpx 0;
				&.wxUser_form {
					margin: 76rpx 0 144rpx 0;
				}
				.login_select {
					display: flex;
					align-items: center;
					line-height: 42rpx;
					font-size: 30rpx;
					font-weight: 400;
					padding: 0 72rpx;
					color: $C2C2C2;
					.checkbox {
						margin-right: 10rpx;
					}
					.btn {
						padding: 0 10rpx;
						color: $AA2929;
					}
				}
				.wx_model {
					position: relative;
					.wx_mask {
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						right: 0;
						z-index: 2;
						width: 100%;
					}
					.wx_btn {
						margin: 38rpx 26rpx 0 26rpx;
						background-color: $L7C160;
						justify-content: center;
						border-radius: 100rpx;
						align-items: center;
						font-size: 32rpx;
						font-weight: 500;
						height: 100rpx;
						color: $white;
						display: flex;
					}
				}
			}
		}
	}
</style>
