<template>
    <div class="page">
        <div class="language-switch" @click="handleLanguageSwitch">
            <icon name="cwg-lang" :size="25" color="#000" />
        </div>
        <div class="login-container">
            <div class="login-header">
                <img src="../assets/images/logo.png" alt="" srcset="" />
            </div>

            <div class="login-form">
                <van-form ref="formRef">
                    <remit-input
                        v-model:value="loginName"
                        type="text"
                        fkey="loginName"
                        :label="t('login.p1')"
                        :clearable="true"
                        @change="handleChange"
                        :placeholder="t('login.msg1')"
                        :rules="[{ required: true, message: t('login.msg1') }]"
                    >
                    </remit-input>
                    <remit-input
                        v-model:value="password"
                        :type="showPassword ? 'text' : 'password'"
                        fkey="password"
                        :clearable="true"
                        :label="t('login.p2')"
                        @change="handleChange"
                        :placeholder="t('login.msg3')"
                        :rules="[{ required: true, message: t('login.msg3') }]"
                    >
                        <template #right-icon1>
                            <van-icon name="eye-o" @click="showPassword = !showPassword" />
                        </template>
                    </remit-input>

                    <div class="form-options">
                        <van-checkbox v-model="rememberPassword" shape="square" icon-size="16px"> {{ t('login.p5') }} </van-checkbox>
                        <span class="forgot-password" @click="handleForgotPassword">{{ t('login.p6') }}</span>
                    </div>
                    <!-- <div class="form-options">
                        <van-checkbox v-model="rememberPassword1" shape="square" icon-size="16px">
                            {{ t('login.p7') }}<span>{{ t('login.p8') }}</span>
                        </van-checkbox>
                    </div> -->

                    <div class="login-button">
                        <van-button type="primary" block :loading="loading" @click="handleLogin"> {{ t('login.title') }} </van-button>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import { userApi } from '@/api/user'
import useUserStore from '@/stores/use-user-store'
import { userToken } from '@/composables/config'
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const router = useRouter()
const userStore = useUserStore()
const loginName = ref('')
const password = ref('')
const formRef = ref()
const rememberPassword = ref(false)
const rememberPassword1 = ref(false)
const loading = ref(false)
const showPassword = ref(false)
const handleLogin = async () => {
    try {
        await formRef.value?.validate(['loginName', 'password'])
        if (rememberPassword.value) {
            userStore.saveAccountInfo({
                loginName: loginName.value,
                password: password.value,
                rememberPassword: true,
            })
        } else {
            userStore.saveAccountInfo({
                loginName: '',
                password: '',
                rememberPassword: false,
            })
        }
        const res = await userApi.login({
            loginName: loginName.value,
            password: password.value,
        })
        if (res.code === 200) {
            userToken.value = res.data
            getUserInfo()
        } else {
            showToast(res.msg || t('login.msg0'))
        }
    } catch (error) {
        if (Array.isArray(error) && error.length > 0) {
            showToast(error[0].message)
        } else {
            showToast(t('login.msg0'))
        }
        return
    }
}

const handleChange = (value: any) => {
    if (value.key == 'loginName') {
        loginName.value = value.value
    } else {
        password.value = value.value
    }
}

const getUserInfo = async () => {
    if (!userToken.value) {
        showToast(t('login.p9'))
        return
    }
    try {
        const res = await userApi.getUserInfo()
        userStore.saveUserInfo(res.data)
        if (res.code === 200) {
            if (res.data.customInfo.uniqueId) {
                router.push('/')
            } else {
                router.push('/improve/info')
            }
            // showToast(t('login.msg0_1'))
        } else {
            showToast(res.msg || t('login.msg0'))
        }
    } catch (error: any) {
        showToast(error.message || t('login.msg0'))
    } finally {
        loading.value = false
    }
}

const handleForgotPassword = () => {
    router.push('/reset/password')
}
const handleLanguageSwitch = () => {
    router.push('/language')
}

onMounted(() => {
    const accountInfo = userStore.accountInfo
    if (accountInfo?.rememberPassword) {
        loginName.value = accountInfo?.loginName || ''
        password.value = accountInfo?.password || ''
        rememberPassword.value = accountInfo?.rememberPassword || false
    }
})
</script>

<style scoped lang="scss">
::v-deep {
    .language-switch {
        width: 40px;
        height: 40px;
        position: fixed;
        top: 4px;
        right: 10px;
        cursor: pointer;
        color: var(--main-yellow);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 100;
        i {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 20px;
            height: 20px;
            font-size: 14px;
            color: var(--main-yellow);
        }

        &:hover {
            opacity: 0.8;
        }
    }

    .login-container {
        padding: 40px 0;
    }

    .login-header {
        /* text-align: center; */
        margin-bottom: 40px;

        h2 {
            font-size: var(--font-size-24);
            color: var(--main-yellow);
            margin-bottom: 8px;
        }

        p {
            font-size: var(--font-size-14);
            color: var(--gray);
        }
    }

    .form-options {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        .van-checkbox {
            .van-checkbox__label {
                color: var(--gray);
                font-size: var(--font-size-14);
            }
        }

        .forgot-password {
            color: var(--main-yellow);
            font-size: var(--font-size-14);
        }
    }

    .login-button {
        margin-bottom: 20px;

        .van-button {
            height: 44px;
            border-radius: 12px;
            background: var(--main-yellow);
            border: none;
            .van-button__text {
                color: var(--black);
                font-size: var(--font-size-16);
                font-weight: bold;
            }

            &--loading {
                opacity: 0.8;
            }
        }
    }

    .register-link {
        text-align: center;
        font-size: var(--font-size-14);
        color: var(--gray);
        margin-bottom: 40px;

        span {
            color: var(--main-yellow);
            margin-left: 4px;
        }
    }

    .third-party-login {
        .divider {
            position: relative;
            text-align: center;
            margin: 20px 0;

            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                width: 30%;
                height: 1px;
                background: var(--border);
            }

            &::before {
                left: 0;
            }

            &::after {
                right: 0;
            }

            span {
                display: inline-block;
                padding: 0 10px;
                color: var(--gray);
                font-size: var(--font-size-14);
                background: var(--main-bg);
            }
        }

        .third-party-buttons {
            display: flex;
            justify-content: center;
            gap: 20px;

            .van-button {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                background: var(--action-bg);
                border: 1px solid var(--border);
                color: var(--white);

                .van-icon {
                    font-size: var(--font-size-20);
                }
            }
        }
    }
}

.code-dialog {
    padding: 20px;

    .van-field {
        margin-bottom: 20px;
    }
}
::v-deep .van-checkbox__icon--checked .van-icon-success {
    border-color: var(--main-yellow) !important;
    background: transparent !important;
    color: var(--main-yellow) !important;
    border-radius: 2px;
}
</style>
