<template>
    <div class="content">
        <!-- 登录 -->
        <div v-if="loginRegistrationSwitch == true">
            <!-- 密码登录 -->
            <div v-if="verificationCode == false">
                <div class="login_title_one">欢迎来到拉索</div>
                <div class="login_title_two">看发现更多数字藏品</div>
                <van-form @submit="submitLogin" ref="loginForm">
                    <div class="login_information">
                        <van-field
                            v-model="loginForm.phone"
                            type="tel"
                            placeholder="请输入手机号"
                            :rules="[
                                { required: true, message: '请输入手机号码' },
                                {
                                    pattern: phonePattern,
                                    message: '手机号码格式错误'
                                }
                            ]"
                            class="login_information_con"
                        />
                    </div>
                    <van-divider class="login_divider" />
                    <div class="login_information">
                        <van-field
                            v-model="loginForm.code"
                            type="tel"
                            placeholder="请输入验证码"
                            :rules="[{ required: true, message: '请输入验证码' }]"
                            class="login_information_con"
                        >
                            <template #button>
                                <div v-if="verifyDisplay == true" class="login_information_verification">
                                    <van-count-down
                                        :time="timeOne"
                                        format="ss"
                                        :auto-start="countDownOne"
                                        @finish="onFinish"
                                    />
                                    <div>S后重新发送</div>
                                </div>
                                <van-button size="small" class="send_verification" @click="sendPhone" v-else
                                    >获取验证码</van-button
                                >
                            </template>
                        </van-field>
                    </div>
                    <van-divider class="login_divider" />

                    <div class="login_tip">
                        <van-checkbox v-model="isReader">
                            已阅读并同意
                            <span class="login_tip_con" @click.stop="$router.push('/agreement?page=service')"
                                >用户协议</span
                            >
                            和
                            <span class="login_tip_con" @click.stop="$router.push('/agreement')">隐私协议</span>
                        </van-checkbox>
                    </div>
                    <div class="login">
                        <van-button size="large" native-type="submitLogin" type="primary" class="login_now_con"
                            >登录</van-button
                        >
                    </div>
                </van-form>
                <div class="register">
                    <!-- <div class="register_now_login" @click="registerNowConLogin">新用户注册</div> -->
                    <!-- <van-button size="large" @click="registerNowConLogin" class="register_con">注册</van-button> -->
                </div>
            </div>
            <!-- 验证码登录 -->
            <div v-if="verificationCode == true">
                <div v-if="verification == true">
                    <div class="login_title_one">欢迎来到拉索</div>
                    <div class="login_title_two">看发现更多数字藏品</div>
                    <van-form @submit="submitLoginCode" ref="loginFormCode">
                        <div class="login_information">
                            <van-field
                                v-model="loginForm.phone"
                                type="tel"
                                placeholder="请输入手机号"
                                :rules="[
                                    { required: true, message: '请输入手机号码' },
                                    {
                                        pattern: phonePattern,
                                        message: '手机号码格式错误'
                                    }
                                ]"
                                class="login_information_con"
                            />
                        </div>
                        <van-divider class="login_divider" />
                        <div class="verification_code_login">
                            <van-button native-type="submitLoginCode" type="primary" class="verification_code_login_con"
                                >发送验证码</van-button
                            >
                        </div>
                    </van-form>
                </div>
                <div class="verification_code_input" v-if="verification == false">
                    <div class="verification_code_input_con">输入验证码</div>
                    <div class="verification_code_input_one">验证码已发送到 {{ phone }}</div>
                    <div class="verification_code_input_two">
                        <!-- <div v-if="countDownCode == true" style="display: flex">
                            <van-count-down :time="time" format="ss" :auto-start="countDown" @finish="unFinish"/>
                            <div>S后重新发送</div>
                        </div>
                        <div v-else>重新发送</div> -->
                        {{ isSend ? `已发送${sendNum}S` : '重新发送' }}
                    </div>
                    <div class="verification_code_input_three">
                        <!-- 密码输入框 -->
                        <van-password-input
                            :value="value"
                            :mask="false"
                            length="4"
                            :focused="showKeyboard"
                            @focus="showKeyboard = true"
                        />
                        <!-- 数字键盘 -->
                        <van-number-keyboard
                            :show="showKeyboard"
                            v-model="value"
                            theme="custom"
                            extra-key="."
                            close-button-text="完成"
                            @blur="showKeyboard = false"
                            @delete="onDelete"
                            @close="submitLogin"
                        />
                    </div>
                    <div class="verification_code_login_register">
                        <van-button @click="submitLogin" type="primary" class="register_now_con_login">登录</van-button>
                    </div>
                </div>
                <div>
                    <div class="account_password_login" @click="(verificationCode = false), (active = 'phone')">
                        账户密码登录
                    </div>
                </div>
            </div>
        </div>
        <!-- 注册 -->
        <div v-if="loginRegistrationSwitch == false">
            <div class="user_registration">用户注册</div>
            <van-form @submit="submit" ref="form">
                <div class="login_information">
                    <van-field
                        v-model="form.phone"
                        :maxlength="11"
                        type="tel"
                        placeholder="请输入手机号"
                        class="login_information_con"
                        :rules="[
                            { required: true, message: '请输入手机号码' },
                            {
                                pattern: phonePattern,
                                message: '手机号码格式错误'
                            }
                        ]"
                    />
                </div>
                <van-divider class="login_divider" />
                <div class="login_information">
                    <van-field
                        v-model="form.code"
                        type="tel"
                        placeholder="请输入验证码"
                        :rules="[{ required: true, message: '请输入验证码' }]"
                        class="login_information_con"
                    >
                        <template #button>
                            <div v-if="verifyDisplay == true" class="login_information_verification">
                                <van-count-down
                                    :time="timeOne"
                                    format="ss"
                                    :auto-start="countDownOne"
                                    @finish="onFinish"
                                />
                                <div>S后重新发送</div>
                            </div>
                            <van-button size="small" class="send_verification" @click="sendPhone" v-else
                                >发送验证码</van-button
                            >
                        </template>
                    </van-field>
                </div>
                <van-divider class="login_divider" />
                <div class="login_information">
                    <van-field
                        v-model="form.password"
                        type="password"
                        placeholder="建议8-16位，数字、大小写字母组合"
                        :rules="[{ required: true, message: '请填写密码' }]"
                        class="login_information_con"
                    />
                </div>
                <van-divider class="login_divider" />
                <div class="login_tip">
                    <van-checkbox v-model="isReader">
                        已阅读并同意
                        <span class="login_tip_con" @click.stop="$router.push('/agreement?page=service')"
                            >用户协议</span
                        >
                        和
                        <span class="login_tip_con" @click.stop="$router.push('/agreement')">隐私协议</span>
                    </van-checkbox>
                </div>
                <div class="register_now">
                    <van-button native-type="submit" color="@prim" class="register_now_con">立即注册</van-button>
                    <!-- <div class="register_now_con" @click="registerNow">立即注册</div> -->
                </div>
            </van-form>
            <div class="register_now_login" @click="(loginRegistrationSwitch = true), (active = 'phone')">
                账户密码登录
            </div>
        </div>
    </div>
</template>

<script>
// import phone from '../../mixins/phone';
// import { ref } from 'vue';
// let fromRoute = null;
import phone from '../../mixins/phone';
let fromRoute = null;
import { Toast } from 'vant';
import { ref } from 'vue';
export default {
    mixins: [phone],
    setup() {
        const value = ref('');
        const showKeyboard = ref(false);
        return {
            value,
            showKeyboard
        };
    },
    data() {
        return {
            verification: true,
            verificationCode: false,
            countDownCode: true,
            timeOne: 60000,
            countDownOne: true,
            verifyDisplay: false,
            loginRegistrationSwitch: true,
            phone: '',
            active: 'phone',
            form: {
                phone: '',
                password: '',
                code: '',
                invitor: ''
            },
            loginForm: {
                phone: '',
                code: ''
            },
            isReader: false
        };
    },
    beforeRouteEnter(to, from) {
        fromRoute = from;
        console.log(to, from);
    },
    mounted() {
        //不能注，注册页进入用
        if (this.$route.query.number == 1) {
            this.loginRegistrationSwitch = false;
        }
    },
    methods: {
        onFinish() {
            this.verifyDisplay = false;
        },
        unFinish() {
            this.countDownCode = false;
        },
        // 切换注册
        registerNowConLogin() {
            this.loginRegistrationSwitch = false;
        },
        // 发送手机号
        sendPhone() {
            if (this.loginForm.phone == '') {
                Toast('手机号码格式错误');
            } else {
                this.verifyDisplay = true;
                this.sendMsg(this.loginForm.phone);
            }
        },
        // 注册
        submit() {
            if (this.$store.state.invitor) {
                this.form.invitor = this.$store.state.invitor;
            }
            this.$http
                .post('/auth/phoneRegister', this.form)
                .then(res => {
                    localStorage.setItem('nineToken', res);
                    return this.$store.dispatch('getUserInfo');
                })
                .then(() => {
                    this.$toast.success('注册成功');
                    setTimeout(() => {
                        if (!fromRoute.name || fromRoute.name === 'userRegister' || fromRoute.name === 'userLogin') {
                            this.$router.replace('/home');
                        } else {
                            this.$router.back();
                        }
                    }, 1500);
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                });
        },
        // 手机密码登录
        // submitLogin() {
        //     this.checkOne().then(() => {
        //         this.$toast.success('登录成功');
        //         console.log("1111111")
        //         setTimeout(() => {
        //             this.$router.push("/home")
        // this.$router.replace('/home');
        // if (this.$store.state.loginBackUrl) {
        //     this.$router.replace(this.$store.state.loginBackUrl);
        // } else if (
        //     !fromRoute ||
        //     !fromRoute.name ||
        //     fromRoute.name === 'userRegister' ||
        //     fromRoute.name === 'userLogin'
        // ) {
        //     this.$router.replace('/home');
        // } else {
        //     this.$router.back();
        // }
        //         }, 1500);
        //     });
        // },
        // 验证码登录
        // complete() {
        //     this.checkTwo().then(() => {
        //         this.$toast.success('登录成功');
        //         setTimeout(() => {
        //             this.$router.replace('/home');
        //             this.$router.push("/home")
        //             if (this.$store.state.loginBackUrl) {
        //                 this.$router.replace(this.$store.state.loginBackUrl);
        //             } else if (
        //                 !fromRoute ||
        //                 !fromRoute.name ||
        //                 fromRoute.name === 'userRegister' ||
        //                 fromRoute.name === 'userLogin'
        //             ) {
        //                 this.$router.replace('/home');
        //             } else {
        //                 this.$router.back();
        //             }
        //         }, 1500);
        //     });
        // },
        // 验证码登录
        submitLoginCode() {
            this.sendMsg(this.loginForm.phone);
        },
        // 重新获取
        submitLoginCodeOne() {
            this.sendMsg(this.loginForm.phone);
        },
        submitLogin() {
            this.check().then(() => {
                this.$toast.success('登录成功');
                setTimeout(() => {
                    if (this.$store.state.loginBackUrl) {
                        this.$router.replace(this.$store.state.loginBackUrl);
                    } else if (
                        !fromRoute ||
                        !fromRoute.name ||
                        fromRoute.name === 'userRegister' ||
                        fromRoute.name === 'userLogin'
                    ) {
                        this.$router.replace('/home');
                    } else {
                        this.$router.back();
                    }
                }, 1500);
            });
        },
        check() {
            return this.$http
                .post('/auth/phoneLogin', {
                    phone: this.loginForm.phone,
                    code: this.loginForm.code
                })
                .catch(e => {
                    if (e) {
                        this.$toast(e.error);
                    }
                    return Promise.reject();
                })
                .then(res => {
                    localStorage.setItem('nineToken', res);
                    return this.$store.dispatch('getUserInfo');
                });
        }
        // checkTwo() {
        //     return this.$http
        //         .post('/auth/phoneLogin', {
        //             phone: this.loginForm.phone,
        //             code: this.value
        //         })
        //         .catch(e => {
        //             if (e) {
        //                 this.$toast(e.error);
        //             }
        //             return Promise.reject();
        //         })
        //         .then(res => {
        //             localStorage.setItem('nineToken', res);
        //             return this.$store.dispatch('getUserInfo');
        //         });
        // }
    }
    // mixins: [phone],
    // inject: ['bar'],
    // data() {
    //     return {
    //         active: 'phone',
    //         form: {
    //             phone: '',
    //             password: '',
    //             code: ''
    //         },
    //         checked: false
    //     };
    // },
    // beforeRouteEnter(to, from) {
    //     fromRoute = from;
    // },
    // mounted() {
    //     console.log(this.$store.state.loginBackUrl);
    // },
    // methods: {
    //     sendPhone() {
    //         this.$refs.code.validate('手机号码').then(() => {
    //             this.sendMsg(this.form.phone);
    //         });
    //     },
    //     submit() {
    //         if (!this.checked) {
    //             this.$toast('请先阅读并同意隐私政策');
    //             return;
    //         }
    //         this.$toast.loading({
    //             message: '加载中...',
    //             forbidClick: true
    //         });
    //         this.check().then(() => {
    //             this.$toast.success('登录成功');
    //             setTimeout(() => {
    //                 if (this.$store.state.loginBackUrl) {
    //                     this.$router.replace(this.$store.state.loginBackUrl);
    //                 } else if (
    //                     !fromRoute ||
    //                     !fromRoute.name ||
    //                     fromRoute.name === 'userRegister' ||
    //                     fromRoute.name === 'userLogin'
    //                 ) {
    //                     this.$router.replace('/home');
    //                 } else {
    //                     this.$router.back();
    //                 }
    //             }, 1500);
    //         });
    //     },
    //     check() {
    //         if (this.active === 'phone') {
    //             return this.loginByPhone(this.form.phone, this.form.password);
    //         } else {
    //             return this.$http
    //                 .post('/auth/phoneLogin', {
    //                     phone: this.form.phone,
    //                     code: this.form.code
    //                 })
    //                 .catch(e => {
    //                     if (e) {
    //                         this.$toast(e.error);
    //                     }
    //                     return Promise.reject();
    //                 })
    //                 .then(res => {
    //                     localStorage.setItem('nineToken', res);
    //                     return this.$store.dispatch('getUserInfo');
    //                 });
    //         }
    //     }
    // }
};
</script>

<style lang="less" scoped>
.frist {
    height: 379px;
    background-color: #fff;
}
/deep/ .van-password-input {
    padding-right: 50px;
    .van-password-input__item {
        flex: 1;
    }
}
/deep/ .van-field__control::placeholder {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #5f646f;
}
/deep/ .van-divider::before {
    height: 1px;
    background: #5f646f;
    opacity: 0.2;
}
.content {
    width: 100%;
    height: 100%;
    // position: absolute;
    background: @bg;
    // margin-top: 44px;
    .login_information_verification {
        color: @prim;
        display: flex;
        margin-right: -15px;
    }
    .verification_code_login_register {
        width: 100%;
        margin-top: 144px;
        margin-bottom: 30px;
        padding: 0px 47px 0px 0px;
        box-sizing: border-box;
        .register_now_con_login {
            width: 100%;
            height: 40px;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
        }
    }
    /deep/ .van-count-down {
        padding-top: 2px;
        box-sizing: border-box;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: @prim;
    }
    .login_title_one {
        padding: 10px 40px;
        font-size: 32px;
        font-family: bold;
        color: #ffffff;
    }
    .login_title_two {
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        padding: 0 40px 30px;
    }
    .login_information {
        display: flex;
        padding: 0 40px;
        .login_information_img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }
        .login_information_img_con {
            padding-top: 5px;
        }
        .van-cell {
            padding: 0;
        }
        .login_information_con {
            // width: 250px;
            // height: 24px;
            background: @bg;
            overflow: visible;
        }
        .send_verification {
            background-color: @bg;
            border: none;
            font-size: 12px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: @prim;
            // margin-right: -23px;
        }
    }
    .login_information:last-child {
        margin-top: 20px;
    }
    .login_divider {
        padding: 10px 48px 10px 40px;
        box-sizing: border-box;
        // background: #5F646F;
        // opacity: 0.2;
    }
    .login_verification {
        padding: 0px 40px;
        box-sizing: border-box;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #5f646f;
        display: flex;
        justify-content: space-between;
        .login_verification_con {
            color: @prim;
        }
    }
    .login {
        width: 100%;
        // margin-top:15px;
        padding: 0px 40px;
        box-sizing: border-box;
        .login_now_con {
            width: 100%;
            height: 60px;
            background: @prim;
            border-radius: 8px;
            line-height: 60px;
            font-size: 18px;
            font-weight: bold;
            color: #282d3a;
            line-height: 26px;
        }
        .login_con {
            width: 100%;
            height: 40px;
            background: @prim;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 40px;
            text-align: center;
        }
    }
    .register {
        width: 100%;
        margin-top: 28px;
        padding: 0px 40px;
        box-sizing: border-box;
        margin-bottom: 153px;
        .register_con {
            width: 100%;
            height: 60px;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #939599;
            background: #29293f;
            border: none;
        }
    }
    .login_tip {
        font-size: 12px;
        color: #939599;
        text-align: center;
        .login_tip_con {
            color: @prim;
        }
        padding: 40px 40px 15px;
        /deep/.van-checkbox {
            .flex();
            .van-checkbox__icon {
                height: 14px;
            }
            .van-checkbox__label {
                color: #939599;
                .flex();
            }
            .van-icon {
                width: 14px;
                height: 14px;
            }
        }
    }
    .verification_code_login {
        width: 100%;
        padding: 136px 47px 30px 48px;
        box-sizing: border-box;
        .verification_code_login_con {
            width: 100%;
            height: 40px;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
        }
    }
    .account_password_login {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: @prim;
        text-align: center;
        margin-bottom: 167px;
        line-height: 24px;
    }
    .verification_code_input {
        padding: 60px 0 0 50px;
        box-sizing: border-box;
        .verification_code_input_con {
            font-size: 24px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            margin-bottom: 30px;
            color: #ffffff;
        }
        .verification_code_input_one {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #5f646f;
            margin-bottom: 2px;
        }
        .verification_code_input_two {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: @prim;
            display: flex;
            .van-count-down {
                color: @prim;
            }
        }
        .verification_code_input_three {
            margin-top: 24px;
            .van-password-input {
                margin: 0;
            }
            /deep/ .van-password-input__security li {
                width: 48px;
                height: 48px;
                background: #29293f;
                border-radius: 4px;
                margin-right: 28px;
                font-size: 24px;
                color: #ffffff;
                flex: 1;
                border: none;
            }
            /deep/ .van-password-input__security li:last-child {
                margin-right: 0;
            }
            /deep/ [class*='van-hairline']:after {
                border: none;
            }
        }
    }
    /deep/ .van-field__control {
        color: #ffffff;
        background: @bg;
    }
    .user_registration {
        padding-top: 60px;
        box-sizing: border-box;
        margin-left: 50px;
        margin-bottom: 50px;
        font-size: 24px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
    }
    .register_now {
        width: 100%;
        padding: 94px 47px 30px 48px;
        box-sizing: border-box;
        .register_now_con {
            width: 100%;
            height: 40px;
            background: @prim;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
        }
        .register_now_con_login {
            width: 100%;
            height: 40px;
            // background: @prim;
            border-radius: 8px;
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            text-align: center;
            line-height: 40px;
        }
        .register_now_con_register {
            color: #939599;
            margin-bottom: 153px;
        }
    }
    .register_now_login {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: @prim;
        text-align: center;
        margin-bottom: 167px;
        line-height: 24px;
    }
}
// /deep/ .van-button:before{
//     height: 40px;
//     background: @prim;
//     border-radius: 8px;
// }
</style>
