<template>
    <view class="content">
        <!-- tool -->
        <view class="tool-flex">
            <view
                class="tool-flex-item"
                @click="$Router.back()"
            >
                <uni-icons
                    type="closeempty"
                    size="22"
                    color="#666"
                ></uni-icons>
            </view>
            <view
                class="tool-flex-item"
                @click="onKeyAuth()"
                v-if="$Route.query.keyPhone == 1"
            >一键登录</view>
        </view>
        <!-- 欢迎使用 -->
        <view class="header">
            <view class="title">欢迎使用</view>
            <view class="sumbit">ZH健康，身边的营养专家</view>
        </view>
        <!-- 输入手机号相关 -->
        <view class="inputs phone">
            <label class="label">+86</label>
            <input
                type="number"
                placeholder="输入您的手机号码"
                maxlength="11"
                v-model="phone"
            />
        </view>
        <view class="inputs sms">
            <input
                type="number"
                placeholder="输入短信验证码"
                maxlength="4"
                v-model="code"
            />
            <button
                class="sms-btn"
                type="default"
                size="mini"
                :disabled="phone == '' || getSms"
                @click="getPhoneCode"
            >{{getSms ? '重新发送' + smsTime + 's': '发送验证码'}}</button>
        </view>
        <button
            class="btn"
            type="default"
            :disabled="phone == '' || code == ''"
            @click="login"
        >登录</button>
        <!-- 用户登录注册协议 -->
        <view class="agreement">
            未注册的手机号码验证后自动创建账号，登录即表示同意接受平台
            <view @click="$Router.push({name: 'agreement', params: {name : 'secret'}})">《隐私协议》</view>
            和
            <view @click="$Router.push({name: 'agreement', params: {name : 'service'}})">《服务协议》</view>
        </view>
    </view>
</template>

<script>
import { getSms, smsAuth } from "@/apis/interfaces/auth";
import userAuth from "@/public/userAuth";
export default {
    data() {
        return {
            phone: "14745798066",
            code: "",
            smsTime: 60,
            getSms: false,
        };
    },
    methods: {
        // 用户登录
        login() {
            smsAuth({
                mobileNo: this.phone,
                code: this.code,
            })
                .then((res) => {
                    this.$store.commit(
                        "setToken",
                        res.token_type + " " + res.access_token
                    );
                    this.$Router.back();
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                    });
                });
        },
        // 获取验证码
        getPhoneCode() {
            let outTime;
            getSms({
                mobileNo: this.phone,
            })
                .then((res) => {
                    uni.showToast({
                        title: res,
                        icon: "none",
                    });
                    this.getSms = true;
                    outTime = setInterval(() => {
                        if (this.smsTime <= 1) {
                            this.getSms = false;
                            this.smsTime = 60;
                            clearInterval("outTime");
                        }
                        this.smsTime -= 1;
                    }, 1000);
                })
                .catch((err) => {
                    uni.showToast({
                        title: err.message,
                        icon: "none",
                    });
                });
        },
        // 一键登录
        onKeyAuth() {
            const Auth = new userAuth();
            this.$Router.back();
            Auth.Login();
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    height: 100vh;
    width: 100vw;
    padding: $padding * 3;
    box-sizing: border-box;
    background: white;
    @extend .vertical;
    // 操作栏
    .tool-flex {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
        padding-left: $padding * 2;
        padding-right: $padding * 2;
        background: white;
        @extend .ios-top;
        &-item {
            line-height: 90rpx;
            color: $text-gray;
            font-size: $title-size-lg;
        }
    }
    // 表单
    .inputs {
        background: $window-color;
        position: relative;
        margin-top: $margin;
        height: 90rpx;
        line-height: 90rpx;
        border-radius: 45rpx;
        input {
            width: 100%;
            height: 90rpx;
            line-height: 90rpx;
            padding: 0 $padding;
            border: none;
            box-sizing: border-box;
            font-size: $title-size-lg;
        }

        &.phone {
            padding-left: 120rpx;
            .label {
                position: absolute;
                left: 0;
                top: 0;
                width: 120rpx;
                text-align: center;
                border-right: solid 1rpx $border-color;
                font-size: $title-size-lg;
            }
        }

        &.sms {
            padding-right: 200rpx;
            .sms-btn[size="mini"] {
                width: 200rpx;
                height: 90rpx;
                line-height: 90rpx;
                position: absolute;
                top: 0;
                right: 0;
                padding: 0;
                margin: 0;
                border-radius: 0 45rpx 45rpx 0;
                color: $main-color;
                font-size: $title-size-lg;
                background: $window-color;
                &::after {
                    border: none;
                }
                &[disabled] {
                    color: rgba($color: $main-color, $alpha: 0.6);
                    background: rgba($color: $window-color, $alpha: 0);
                }
            }
        }
    }
    // 头部
    .header {
        text-align: center;
        margin-bottom: 5vh;
        .title {
            font-size: $title-size + 10;
            font-weight: bold;
            color: $text-color;
            line-height: 70rpx;
        }
        .sumbit {
            line-height: 50rpx;
            font-size: $title-size-m;
            color: $text-gray-m;
        }
    }
    // 登录按钮
    .btn {
        margin-top: $margin * 2;
        height: 90rpx;
        line-height: 90rpx;
        padding: 0;
        font-size: $title-size;
        border-radius: 45rpx;
        background: $main-color;
        color: white;
        font-weight: bold;
        &::after {
            display: none;
        }
        &[disabled] {
            background: rgba($color: $main-color, $alpha: 0.5);
        }
    }
    // 协议
    .agreement {
        padding-top: 5vh;
        font-size: $title-size-sm;
        color: $text-gray-m;
        view {
            color: $main-color;
            display: inline-block;
            padding: 0 10rpx;
        }
    }
}
</style>
