<template>
    <div class="login loginHeight">
        <div class="title">
            <div class="text1">欢迎来到传奇数藏</div>
            <div class="text2">发现更多数字藏品</div>
        </div>
        <van-form @submit="submit" ref="code">
            <div class="field-box">
                <van-field
                    type="tel"
                    name="手机号码"
                    placeholder="请输入手机号"
                    clearable="true"
                    v-model="form.phone"
                    :rules="[
                        {
                            pattern: phonePattern,
                            message: ''
                        }
                    ]"
                >
                </van-field>
                <van-field
                    type="code"
                    name="验证码"
                    placeholder="请输入验证码"
                    v-model="form.code"
                    maxlength="4"
                    :rules="[{ required: true, message: '' }]"
                >
                    <template #button>
                        <van-button
                            class="sub-code"
                            size="small"
                            plain
                            type="primary"
                            @click="sendPhone"
                            :disabled="isSend"
                            :class="isSend ? 'sub-code_con' : ''"
                        >
                            {{ isSend ? `已发送(${sendNum})S` : '获取验证码' }}
                        </van-button>
                    </template>
                </van-field>
                <van-cell></van-cell>
            </div>
            <div class="button">
                <div class="xieyi">
                    <van-checkbox v-model="checked">
                        <span class="xieyi_con">已阅读并同意</span>
                        <span @click.stop="$router.push('/agreement?page=service')"> 《服务协议》 </span>
                        <span @click.stop="$router.push('/agreement')"> 《用户隐私协议》 </span>

                        <template #icon="props">
                            <img class="img-icon" :src="props.checked ? activeIcon : inactiveIcon" />
                        </template>
                    </van-checkbox>
                </div>
                <!-- <van-button plain class="forget" @click="$router.replace('/forget')">
          忘记密码？
        </van-button> -->

                <van-button
                    block
                    size="large"
                    native-type="submit"
                    type="primary"
                    class="sure"
                    :disabled="!canLogin && !loading"
                    >登录</van-button
                >
            </div>
        </van-form>
    </div>
    <!-- 协议弹出框 -->
    <van-overlay :show="protocol" @click="protocol = false">
        <div class="wrapper" @click.stop>
            <div class="protocol_tips" v-if="protocol === true">
                <div class="protocol_tips_top">
                    请您已阅读<span class="protocol_tips_top_con" @click.stop="$router.push('/agreement')"
                        >《用户隐私政策》</span
                    ><span class="protocol_tips_top_con" @click.stop="$router.push('/agreement?page=service')"
                        >《服务协议》</span
                    >的全部条款，接受后可开始使用我们的服务
                </div>
                <div class="protocol_tips_bottom">
                    <div class="protocol_tips_bottom_one" @click="agreement(false)">不同意</div>
                    <div class="protocol_tips_bottom_two" @click="agreement(true)">同意</div>
                </div>
            </div>
        </div>
    </van-overlay>
</template>

<script>
import { re } from 'mathjs';
import phone from '../../mixins/phone';
let fromRoute = null;
export default {
    mixins: [phone],
    inject: ['bar'],
    data() {
        return {
            active: 'code',
            form: {
                phone: '',
                password: '',
                code: ''
            },
            checked: localStorage.getItem('agreeTerm') === 'true',
            protocol: false,
            activeIcon: require('@assets/checked.png'),
            inactiveIcon: require('@assets/checked1.png'),
            loading: true
        };
    },
    computed: {
        canLogin() {
            return this.form.phone && this.form.code;
        }
    },
    beforeRouteEnter(to, from) {
        fromRoute = from;
    },
    mounted() {
        console.log(this.$store.state.loginBackUrl);
    },
    methods: {
        sendPhone(e) {
            if (!this.checkWebDriver(e)) {
                return;
            }
            this.$refs.code.validate('手机号码').then(() => {
                this.sendMsg(this.form.phone);
            });
        },
        submit() {
            if (!this.checked) {
                // this.$toast('请先阅读并同意隐私政策');
                this.protocol = true;
                return;
            }
            this.loading = true;
            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' ||
                        fromRoute.name === 'agreement' || 
                        fromRoute.name === 'store'
                    ) {
                        this.$router.replace('/home');
                    } else {
                        this.$router.back();
                        try {
                            setTimeout(() => {
                                let path = window.location.hash.slice(1);
                                this.$router.replace(path);
                            }, 1);
                            return false;
                        } catch (e) {}
                    }
                }, 1000);
            });
        },
        agreement(value) {
            if (value) {
                this.checked = true;
            }
            this.protocol = false;
        },
        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,
                        inviteCode: this.$store.state.inviteCode
                    })
                    .catch(e => {
                        this.loading = false;
                        if (e) {
                            this.$toast(e.error);
                        }
                        return Promise.reject();
                    })
                    .then(res => {
                        localStorage.setItem('nineToken', res);
                        return this.$store.dispatch('getUserInfo');
                    });
            }
        }
    },
    watch: {
        checked(val) {
            if (val) {
                localStorage.setItem('agreeTerm', true);
            } else {
                localStorage.removeItem('agreeTerm');
            }
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 90px 35px 0px;
}
.protocol_tips {
    transform: translateY(-150px);
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 22px 25px 26px;
    box-sizing: border-box;
    .protocol_tips_top {
        font-size: 15px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 26px;
        text-align: center;
        .protocol_tips_top_con {
            color: #816232;
        }
    }
    .protocol_tips_bottom {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #202020;
        .protocol_tips_bottom_one {
            flex: 1;
            height: 42px;
            border-radius: 4px;
            border: 1px solid #dedede;
            box-sizing: border-box;
            text-align: center;
            line-height: 40px;
            margin-right: 15px;
        }
        .protocol_tips_bottom_two {
            flex: 1;
            height: 42px;
            background: #f9ddb3;
            color: #503a1e;
            border-radius: 4px;
            text-align: center;
            line-height: 42px;
        }
    }
}
.login {
    padding: 40px 40px 100px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.title {
    .text1 {
        font-size: 32px;
        font-weight: bold;
        color: #ffffff;
        line-height: 45px;
    }
    .text2 {
        font-size: 16px;
        color: #ffffff;
        line-height: 22px;
        opacity: 0.6;
        margin-top: 10px;
    }
}
.loginHeight {
    min-height: calc(var(--app-height) - 46px);
    min-height: calc(var(--app-height) - 46px);
}
/deep/input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px @bg inset;
    -webkit-text-fill-color: #ffffff;
}
/deep/.van-field__control {
    color: #fff;
    font-size: 16px;
}
.logo {
    width: 94px;
    height: 16px;
    display: block;
    margin-bottom: 2px;
}
.tabs {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 10px;
    .tab {
        font-size: 16px;
        color: #c8c9cc;
        line-height: 30px;

        &.active {
            font-size: 20px;
            font-weight: bold;
            color: #25f50d;
            line-height: 30px;
        }
    }
}

/deep/.field-box {
    // background: #101010;
    // box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    .van-cell:after {
        content: '';
        left: 0px;
        right: 0px;
        border: none;
        height: 1px;
        background: rgba(137, 137, 137, 0.3);
    }
    .van-cell + .van-cell {
        margin-top: 0 !important;
    }
}

.icon {
    display: block;
    margin-top: 16px;
}
/deep/ .van-form {
    margin-top: 28px;
    .van-cell {
        padding: 0px 0px;

        .van-field__left-icon {
            margin-right: 16px;
        }
    }

    .van-cell + .van-cell {
        margin-top: 20px;
    }
    .van-field__body {
        height: 67px;
        align-items: center;
        input::placeholder {
            color: #ffffff;
            opacity: 0.3;
        }
    }
}
.button {
    margin-top: 60px;
    position: relative;

    .del {
        margin-top: 20px;
        border-color: #ffffff;
        color: #ffffff;
        background-color: #101010;
    }

    .sure {
        font-size: 18px;
        color: #000000 !important;
        height: 60px;
    }

    .van-button {
        font-weight: bold;
        border-radius: 12px;
    }
}
.sub-code {
    padding-right: 0;
    border-width: 0;
    font-size: 14px;
}
.sub-code_con {
    color: #ffffff;
    opacity: 0.3;
}
.forget {
    position: absolute;
    font-weight: normal !important;
    right: 0;
    top: -65px;
}
.xieyi {
    .xieyi_con {
        color: #5e6168;
    }
    .flex();
    // justify-content: center;
    margin-top: 50px;
    font-size: @font1;
    padding-bottom: 18px;

    color: #5e6168;
    span {
        color: #fff;
    }
}

/deep/.van-checkbox__icon .van-icon {
    font-size: 11px;
}

// .van-checkbox {
//     background-color: #101010;
//     padding: 5px 0;
//     border-radius: 12px;
// }
// /deep/.van-checkbox__label {
//     color: #5e6168;
// }

// /deep/.van-checkbox__icon {
//     height: 14px;
// }
/deep/.van-checkbox__icon--checked .van-icon {
    // background: @prim;
    background-color: #fff;
    color: #333333;
    border-width: 0;
    // font-size: @font1;
    // width: 14px;
    // height: 14px;
}
/deep/ .van-checkbox__icon--round {
    // padding-top: 3px;
    // box-sizing: border-box;
}
/deep/ .van-icon-success {
    // width: 14px;
    // height: 14px;
}
/deep/ .van-icon-success:before {
    // width: 14px;
    // height: 14px;
}
// /deep/ .van-checkbox__icon--round{
//     width: 14px;
//     height: 14px;
// }

.img-icon {
    width: 14px;
    height: 14px;
}
</style>
