<template>
    <ion-page>
        <ion-header>
            <ion-toolbar>
                <ion-buttons slot="start">
                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
                </ion-buttons>
            </ion-toolbar>
        </ion-header>
        <ion-content class="login">
            <van-form ref="form" @submit="onSubmit">
                <div class="title">验证码登录</div>
                <van-cell-group :border="false">
                    <van-field
                        v-model="formData.phone"
                        name="手机号"
                        placeholder="请输入手机号"
                        type="tel"
                        :rules="[
                            { required: true, message: '请输入手机号' },
                            {
                                pattern: phonePattern,
                                message: '手机号码格式错误'
                            }
                        ]"
                        clearable
                    >
                        <template #left-icon>
                            <img src="../assets/login_icon_zhanghao.png" alt="" class="icon" />
                        </template>
                    </van-field>
                    <van-field
                        v-model="formData.code"
                        :type="showPsd ? 'text' : 'password'"
                        name="密码"
                        placeholder="请输入密码"
                        clearable
                        :rules="[{ required: true, message: '请输入密码' }]"
                    >
                        <template #left-icon>
                            <img src="../assets/login_icon_mima.png" alt="" class="icon" />
                        </template>
                        <template #button>
                            <van-button @click="sendPhone" :disabled="isSend" size="small" type="primary" plain>
                                {{ isSend ? `已发送(${sendNum})S` : '发送验证码' }}
                            </van-button>
                        </template>
                    </van-field>
                    <van-cell class="xieyi">
                        <van-checkbox v-model="checked">
                            已阅读并同意
                            <!-- <span @click.stop="$router.push('/agreement?page=service')"> 《用户服务协议》 </span> -->
                            <span class="rule"> 注册协议 </span>
                        </van-checkbox>
                    </van-cell>
                </van-cell-group>
                <div class="submit">
                    <van-button radius="4" block type="primary" native-type="submit"> 登录 </van-button>
                </div>

                <div class="btns">
                    <div class="btn-left">暂无账号？<span @click="$router.replace('/register')">立即注册</span></div>
                    <div class="btn-right" @click="$router.replace('/login')">密码登录</div>
                </div>
            </van-form>
        </ion-content>
    </ion-page>
</template>
<script>
import phone from '../mixins/phone'
import { ref } from 'vue'
import { closeOutline } from 'ionicons/icons'
import { useUserStore } from '../stores/user'
let fromRoute = null
export default {
    mixins: [phone],
    setup() {
        const formData = ref({
            phone: '',
            code: ''
        })

        const checked = ref(false)

        const showPsd = ref(false)

        const userStore = useUserStore()

        return { formData, checked, showPsd, closeOutline, loginByCode: userStore.loginByCode }
    },
    beforeRouteEnter(to, from) {
        fromRoute = from
        console.log(to, from)
    },
    methods: {
        sendPhone(e) {
            this.$refs.form.validate('手机号').then(() => {
                if (!this.checkWebDriver(e)) {
                    return
                }
                this.sendMsg(this.formData.phone)
            })
        },

        onSubmit(e) {
            if (!this.checked) {
                this.$toast('请先阅读并同意注册协议')
                return
            }
            if (!this.checkWebDriver(e)) {
                return
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            })
            this.loginByCode(this.formData.phone, this.formData.code)
                .then(() => {
                    this.$toast.success('登录成功')
                    if (
                        !fromRoute.name ||
                        fromRoute.name === 'register' ||
                        fromRoute.name === 'login' ||
                        fromRoute.name === 'loginPhone'
                    ) {
                        this.$router.replace('/home')
                    } else {
                        this.$router.back()
                    }
                })
                .catch(e => {
                    if (e) {
                        this.$toast.error(e.error)
                    }
                })
        }
    }
}
</script>

<style lang="less" scoped>
ion-toolbar {
    --background: var(--ion-color-step-0);
}
ion-back-button {
    --color: var(--ion-color-step-950);
}

.login {
    --ion-background-color: var(--ion-color-step-0);
}

.van-form {
    padding: 30px 40px;

    .title {
        font-size: 24px;
        font-weight: bold;
        color: var(--ion-color-light-contrast);
        line-height: 34px;
        padding-bottom: 30px;
    }

    :deep(.van-cell) {
        .f();
        align-items: flex-start;
        --van-cell-vertical-padding: 10px;
        --van-cell-horizontal-padding: 0;
        --van-field-placeholder-text-color: var(--ion-color-step-400);
        --van-padding-base: 10px;
        --van-button-small-height: 24px;

        .van-field__left-icon {
            .f();
        }
        .van-field__button {
            .f();
        }
    }

    .van-cell + .van-cell {
        margin-top: 20px;
    }
}

.icon {
    width: 24px;
    height: 24px;
}

.xieyi {
    --van-checkbox-label-color: var(--ion-color-step-400);
    margin-top: 12px !important;
    .rule {
        color: #a108ff;
    }
    .van-checkbox {
        box-sizing: content-box;
    }

    :deep(.van-checkbox__icon--checked .van-icon) {
        background: linear-gradient(135deg, #a108ff 0%, #5c7cff 100%);
        border-color: var(--ion-color-step-0);
    }
}

.submit {
    margin-top: 34px;

    .van-button {
        font-weight: bold;
    }
}

.showPsd {
    .f();
    img {
        width: 28px;
        height: 28px;
    }
}

.btns {
    .f();
    justify-content: space-between;
    padding-top: 20px;
    .btn-left {
        font-size: 12px;
        color: var(--ion-color-step-400);
        line-height: 24px;
        span {
            color: #a108ff;
        }
    }

    .btn-right {
        font-size: 12px;
        color: var(--ion-color-light-contrast);
        line-height: 24px;
        text-decoration: underline;
        font-weight: bold;
    }
}
</style>
