<template>
    <el-form class="login-form" :model="userInfo" :rules="rules" ref="formRef">
        <el-form-item prop="username">
            <el-input clearable v-model.trim="userInfo.username" placeholder="您的账号">
                <template #prefix>
                    <el-icon class="el-input__icon prefix-icon"><User /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input
                placeholder="您的密码"
                show-password
                clearable
                @keyup.enter="submitForm(formRef)"
                v-model.trim="userInfo.password"
                auto-complete="new-password"
            >
                <template #prefix>
                    <el-icon class="el-input__icon prefix-icon"><Lock /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="btns">
            <el-button
                size="large"
                type="primary"
                :loading="loading"
                @click="submitForm(formRef)"
                class="login-btn"
            >
                登 录
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { useDictStore } from '@/stores/dict'
import { useMenuStore } from '@/stores/menu'
import { encodeBase64 } from '@/utils/crypto'
import { useRouter } from 'vue-router'
const router = useRouter()

const userStore = useUserStore()
const menuStore = useMenuStore()
const dictStore = useDictStore()

interface FormInstance {
    validate: (callback: (valid: boolean, fields?: any) => void) => void
}
const fullscreenLoading = ref(true)
const hasMask = ref(true)
const userInfo = reactive({
    username: '',
    password: ''
})
const checkAccount = (rule: any, value: string, callback: Function) => {
    if (!value) {
        callback(new Error('请输入账号'))
    }
    if (/^[a-zA-Z0-9_-]{2,20}$/.test(value)) {
        callback()
    } else {
        callback(new Error('账号格式不正确'))
    }
}
const rules = reactive({
    username: [{ validator: checkAccount, trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})

const responseError = ref('')

const loading = ref(false)

const formRef = ref<FormInstance>()

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    // 表单验证
    await formEl.validate(async (valid, fields) => {
        if (!valid) {
            console.error('表单验证失败:', fields)
            return
        }
        try {
            loading.value = true
            const loginData = {
                username: userInfo.username,
                password: encodeBase64(userInfo.password)
            }

            const { loginStatus } = await userStore.userLogin(loginData)

            if (loginStatus) {
                //  请求菜单
                const firstMenuPath = (await menuStore.userMenuData()) as ''

                //  请求字典
                dictStore.sysDictData()

                if (!firstMenuPath) {
                    ElMessage.warning('抱歉，您暂无可访问菜单！')
                    return
                }
                router.push(firstMenuPath)
            }
        } catch (error) {
            console.error(error)
        } finally {
            loading.value = false
        }
    })
}

const clearUser = () => {
    userInfo.username = ''
    userInfo.password = ''
}

onMounted(() => {
    clearUser()
    userStore.clearUser()
    menuStore.clearMenu()
    dictStore.clearDict()
})
</script>

<style lang="scss" scoped>
.el-form {
    .el-form-item {
        margin-bottom: 30px;

        &.is-error {
            .el-input {
                .el-input__inner {
                    border-color: #f56c6c;
                }
            }
        }

        :deep(.el-form-item__error) {
            font-size: 14px;
            padding-top: 8px;
            font-family: PingFangSC-Medium;
        }

        :deep(.el-input__wrapper) {
            background-color: #f5f7fa !important;
        }
        .el-input {
            .el-input__wrapper {
                background-color: #f5f7fa !important;
            }
            &:focus {
                .el-input__inner {
                    border-color: #409eff;
                }
            }

            &.is-disabled {
                .el-input__inner {
                    background-color: #f5f7fa;
                    border-color: #e4e7ed;
                    color: #c0c4cc;
                    cursor: not-allowed;
                }
            }

            :deep(.el-input__inner) {
                height: 50px;
                line-height: 50px;
                font-size: 16px;
                border-radius: 4px;
                // padding: 0 15px;
                font-family: PingFangSC-Medium;
                background-color: transparent !important;
                border: none !important;
                color: #000;
            }

            :deep(.el-input__suffix-inner .el-input__icon) {
                font-size: 16px;
                color: #777777 !important;
            }
        }
        .prefix-icon {
            font-size: 20px;
            color: #777777 !important;
        }
    }
}

:deep(.login-btn) {
    height: 50px;
    width: 100%;
    margin-top: 15px;
    background-color: #0e6eff;
    transition: all 0.3s;

    &:hover {
        background-color: #2670e0;
    }

    &:active {
        background-color: rgb(54, 135, 234);
    }

    span {
        font-size: 16px;
        font-family: PingFangSC-Medium;
    }
}
</style>
