<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 @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: '请输入手机号' }]"
                        clearable
                    >
                        <template #left-icon>
                            <img src="../assets/login_icon_zhanghao.png" alt="" class="icon" />
                        </template>
                    </van-field>
                    <van-field
                        v-model="formData.password"
                        :type="showPwd ? '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>
                            <div class="showPsd" @click="showPwd = !showPwd">
                                <img v-if="showPwd" src="../assets/login_icon_kejian.png" alt="" />
                                <img v-else src="../assets/login_icon_bukejian.png" alt="" />
                            </div>
                        </template>
                    </van-field>
                    <van-cell class="xieyi">
                        <van-checkbox v-model="agreeTerm">
                            已阅读并同意
                            <!-- <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('/loginPhone')">验证码登录</div>
                </div>
            </van-form>
        </ion-content>
    </ion-page>
</template>
<script>
import phone from '../mixins/phone'
import { ref } from 'vue'
import { useUserStore } from '../stores/user'
import { useStorage } from '@vueuse/core'
import { useIonRouter } from '@ionic/vue'
let fromRoute = null
export default {
    mixins: [phone],
    setup() {
        const router = useIonRouter()
        const formData = ref({
            phone: '',
            password: ''
        })

        const showPwd = ref(false)

        const agreeTerm = useStorage('agreeTerm', false, localStorage)

        const userStore = useUserStore()

        return { router, formData, agreeTerm, showPwd, login: userStore.login }
    },
    beforeRouteEnter(to, from) {
        console.log(from)
        fromRoute = from
    },
    methods: {
        onSubmit(e) {
            if (!this.agreeTerm) {
                this.$toast('请先阅读并同意注册协议')
                return
            }
            if (!this.checkWebDriver(e)) {
                return
            }
            this.$toast.loading({
                message: '加载中...',
                forbidClick: true
            })
            this.login(this.formData.phone, this.formData.password)
                .then(() => {
                    this.$toast.success('登录成功')
                    if (
                        !fromRoute.name ||
                        fromRoute.name === 'register' ||
                        fromRoute.name === 'login' ||
                        fromRoute.name === 'loginPhone'
                    ) {
                        console.log('navigate')
                        this.router.navigate('/home', 'back', 'pop')
                    } else {
                        console.log('back')
                        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-field__left-icon {
            .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>
