<template>
    <div class="login">
        <img src="@/assets/png-denglu-bg.png" class="top-bg !absolute w-full h-[200px] top-0 left-0 !z-0" alt="" />
        <div class="login-content h-full">
            <div class="text-white text-[26px] AlimamaShuHeiTi">Hi，歡迎來到走馬短劇</div>

            <!-- 可以使用 CellGroup 作为容器 -->

            <van-form @submit="onSubmit">
                <van-cell-group :border="false">
                    <van-field
                        label-align="top"
                        clearable
                        v-model="form.username"
                        label="用户名"
                        :placeholder="$t('login.usernamePla')"
                        :rules="[
                            {
                                required: true,
                                message: $t('login.usernamePla')
                            }
                        ]"
                    >
                        <template #left-icon>
                            <img class="left-icon" src="@/assets/login_icon_zhanghao.png" alt="" />
                        </template>
                        <template #label>
                            <div class="text-white text-[14px]">{{ $t('login.username') }}</div>
                        </template>
                    </van-field>

                    <van-field
                        label-align="top"
                        type="password"
                        clearable
                        v-model="form.password"
                        label="密碼"
                        :placeholder="$t('login.passwordPla')"
                        :rules="[
                            {
                                required: true,
                                message: $t('login.passwordPla')
                            }
                        ]"
                    >
                        <template #left-icon>
                            <img class="left-icon" src="@/assets/login_icon_mima.png" alt="" />
                        </template>
                        <template #label>
                            <div class="text-white text-[14px]">{{ $t('login.password') }}</div>
                        </template>
                    </van-field>

                    <!-- <div @click="loginCode = !loginCode" class="text-[#61657A] text-right text-xs underline pt-[10px]">
                    {{ loginCode ? '密碼登录' : '验证码登录' }}
                </div> -->

                    <div class="btn py-[64px] px-[17px]">
                        <van-button type="primary" class="AlimamaShuHeiTi" native-type="submit" block round>{{
                            $t('login.login')
                        }}</van-button>

                        <div class="text-[#61657A] text-sm mt-[20px] text-center" @click="goRegister">
                            {{ $t('login.goRegister') }}
                        </div>
                    </div>
                </van-cell-group>
            </van-form>

            <div class="rule flex justify-center van-safe-area-bottom">
                <van-checkbox v-model="checked">{{ $t('login.sure') }}</van-checkbox>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showLoadingToast, closeToast, showNotify } from 'vant'
import { useUserStore } from '../stores/user'
import { useI18n } from 'vue-i18n'

const form = ref({
    username: '',
    password: '',
    code: ''
})

const checked = ref(false)

const loginCode = ref(false)

const router = useRouter()
function goRegister() {
    router.push({
        name: 'register'
    })
}

const { t } = useI18n()
const { login } = useUserStore()
function onSubmit() {
    showLoadingToast({
        message: t('loading'),
        forbidClick: true,
        duration: -1
    })
    login(form.value.username, form.value.password)
        .then(res => {
            closeToast()
            showNotify({ type: 'success', message: t('login.loginsucess') })
            router.back()
        })
        .catch(e => {
            closeToast()
            showNotify({ type: 'warning', message: e })
        })
}
</script>

<style lang="less" scoped>
.login {
    .login-content {
        position: relative;
        z-index: 1;
        padding: 30px;
    }
}

.van-cell-group {
    --van-cell-group-background: transparent;
    --van-cell-background: transparent;
    --van-cell-border-color: #4d61657a;
    --van-field-placeholder-text-color: #61657a;
    /deep/.van-field__label--top {
        margin-bottom: 14px;
    }

    /deep/.van-cell__value {
        line-height: 44px;
    }
    .van-cell {
        --van-cell-value-color: #fff;
        --van-cell-font-size: 14px;
        --van-field-input-text-color: #fff;
        --van-field-clear-icon-color: #404455;
        padding: 40px 0 0;
        &::after {
            left: 0;
            right: 0;
        }
    }

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

.rule {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    .van-checkbox {
        --van-checkbox-size: 16px;
        --van-checkbox-border-color: #61657a;
        --van-checkbox-label-color: #61657a;
        font-size: 12px;
    }
}
</style>
