<template>
    <view class="auth">
        <image class="auth-back" src="/static/login/auth_bg.png" mode="aspectFill"></image>
        <view class="auth-center">
            <view class="auth-title">
                <view>共力生态</view>
                <view>即可开始共力人生</view>
            </view>
            <view class="auth-input">
                <input v-model="phone" type="number" maxlength="11" placeholder="输入手机号码">
            </view>
            <view class="auth-input auth-code">
                <input v-model="code" type="number" maxlength="4" placeholder="输入验证码">
                <button :disabled="getSms" size="mini" @click="getPhoneCode()">{{sendCode}}</button>
            </view>
            <view class="auth-input" v-if="isShowParent">
                <input v-model="parentId" placeholder="输入邀请码,选填">
            </view>
            <view class="auth-button">
                <button @click="login('code')">登录</button>
            </view>
            <view class="auth-agreement">
                登录即表示同意<navigator hover-class="none" url="/pages/vip/agreement?id=3">用户协议</navigator>和<navigator
                    hover-class="none" url="/pages/vip/agreement?id=4">隐私政策</navigator>
            </view>
            <view class="auth-other" v-if="isKeyAuth">
                <button @click="login('Akey')">使用本机号码一键登录</button>
            </view>
        </view>
    </view>
</template>

<script>
	import {
		smsAuth,
		getInvitationSms,
		keyAuth
	} from '@/apis/interfaces/auth.js'
	export default {
		data() {
			return {
				phone		: '',
				code		: '',
				parentId	: '',
				getSms		: false,
				sendCode	: '获取验证码',
				isShowParent: false,
				isKeyAuth   : false
			};
		},
		onShow () {
			// uni.showLoading({
			// 	title: '加载中...',
			// 	mask : true
			// })
			// // 预登录
			// uni.preLogin({
			// 	provider: 'univerify',
			// 	success: res => {
			// 		this.isKeyAuth = true
			// 	},
			// 	complete() {
			// 		uni.hideLoading()
			// 	}
			// })
		},
		methods: {
			// 获取验证码
			getPhoneCode() {
				uni.showLoading({
					title	: '加载中...',
					mask	:true
				})
				let outTime;
				let smsTime = 60;
				getInvitationSms({
					mobileNo: this.phone,
				}).then(res => {
					uni.showToast({
						title: res.message,
						icon: "none",
					});
					this.isShowParent 	= res.is_show_parent
					this.getSms   		= true;
					this.sendCode 		= smsTime + 's后重新获取';
					outTime = setInterval(() => {
						if (smsTime <= 1) {
							this.getSms   = false;
							this.sendCode = '重新获取';
							clearInterval(outTime);
							return
						}
						this.sendCode = smsTime + 's后重新获取';
						smsTime -= 1;
					}, 1000);
				}).catch((err) => {
					uni.showToast({
						title: err.message,
						icon: "none",
					});
				});
			},
			// 登录
			login(type) {
				if (type === 'code') {
					uni.showLoading({
						title: '登录中'
					})
					smsAuth({
						mobileNo	: this.phone,
						code		: this.code,
						parent_id	: this.parentId
					}).then((res) => {
						this.setAuthToken(res.token_type + ' ' + res.access_token, res.is_new)
						uni.hideLoading()
					}).catch((err) => {
						uni.showToast({
							title: err.message,
							icon: "none",
						});
					});
					return
				}
				if (type === 'Akey') {
					this.onKeyLogin()
				}
			},
			// 一键登录
			onKeyLogin(){
				uni.login({
					provider:'univerify',
					univerifyStyle:{
						icon: {
							path: require('@/static/logo.png')
						},
						authButton: {
							normalColor: '#34CE98',
							highlightColor: '#25b381',
							disabledColor: '#25b381'
						},
						otherLoginButton: {
							visible: false
						},
						privacyTerms: {
							termsColor: '#34CE98',
							uncheckedImage: require('@/static/icon/unchecked-icon.png'),
							checkedImage: require('@/static/icon/checked-icon.png')
						}
					},
					success: Result => {
						if(Result.errMsg === 'login:ok'){
							let {access_token, openid} = Result.authResult
							keyAuth({
								access_token,
								openid
							}).then(res => {
								this.setAuthToken(res.token_type + ' ' + res.access_token, res.is_new)
								uni.closeAuthView()
							}).catch(err => {
								uni.showToast({
									title: '登录失败：' + err.message,
									icon : 'none'
								})
								uni.closeAuthView()
							})
						}
					},
					fail: err => {
						console.log(err)
					}
				})
			},
			// setToken
			setAuthToken(token, isNew){
				this.$store.commit('setToken', token);
				if(isNew){
					uni.setStorageSync('isnew', 0)
					this.$Router.replace({name: 'AuthRole'})
					return
				}
				uni.setStorageSync('isnew', 1)
				this.$Router.pushTab({name: 'Life'})
			}
		}
	}
</script>

<style lang="scss">
    .auth {
        height: 100vh;

        .auth-back {
            width: 100vw;
            height: 100vh;
        }

        .auth-center {
            position: absolute;
            top: 0;
            left: 0;
            height: 100vh;
            width: 100vw;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            background: linear-gradient(to bottom, rgba(0, 0, 0, .0), rgba(0, 0, 0, .5));
            padding: 100rpx 50rpx;
            box-sizing: border-box;

            .auth-title {
                font-size: 50rpx;
                font-weight: bold;
                line-height: 70rpx;
                color: white;
            }

            .auth-input {
                background: white;
                height: 100rpx;
                border-radius: 50rpx;
                margin-top: 40rpx;
                overflow: hidden;

                input {
                    height: 100rpx;
                    font-size: 32rpx;
                    padding: 0 50rpx;
                    flex: 1;
                }

                &.auth-code {
                    display: flex;
                    flex-direction: row;

                    button[size="mini"] {
                        width: 280rpx;
                        padding: 0;
                        line-height: 100rpx;
                        font-size: 32rpx;
                        border-radius: 0;
                        color: $main-color;
                        background: white;

                        &[disabled] {
                            color: gray;
                        }

                        &::after {
                            display: none;
                        }
                    }
                }
            }

            .auth-button {
                margin-top: 70rpx;

                button {
                    background: $main-color;
                    color: white;
                    border-radius: 50rpx;
                    height: 100rpx;
                    line-height: 100rpx;
                    padding: 0;
                    font-weight: bold;
                    font-size: 34rpx;

                    &::after {
                        display: none;
                    }
                }
            }

            .auth-agreement {
                text-align: center;
                color: white;
                font-size: 28rpx;
                padding: 30rpx 0 60rpx 0;

                navigator {
                    display: inline-block;
                    padding: 0 10rpx;
                    color: $main-color;
                }
            }

            .auth-other {
                padding: 0 10vw;

                button {
                    height: 100rpx;
                    line-height: 98rpx;
                    border-radius: 50rpx;
                    border: solid 1px white;
                    color: white;
                    background: transparent;
                    font-size: 34rpx;
                    box-sizing: border-box;
                }
            }
        }
    }
</style>
