<template>
    <div class="hc-login-body hc-full">
        <img class="hc-login-bg" :src="bg1Png" :data-src="bgPng" loading="lazy" alt="bg">
        <img class="hc-login-img" :src="imgPng" :data-src="imgPng" loading="lazy" alt="bg">
        <div class="hc-login-main hc-h-full hc-flex-center w-[50%]">
            <div class="hc-login-main-content relative mt-30 w-[400px]">
                <div class="app-title mb-6 text-center text-[28px] text-white font-bold">
                    <span>欢迎使用</span>
                    <span class="name text-red-5">数据分析处理工具</span>
                </div>
                <div class="hc-login-form-card bg-white p-6">
                    <div class="login-title mb-6 text-[28px] font-bold">登录</div>
                    <el-form ref="formRef" :model="formValue" :rules="formRules" label-position="left" label-width="0px" size="large">
                        <el-form-item prop="username">
                            <el-input v-model="formValue.username" clearable placeholder="请输入账号" />
                        </el-form-item>
                        <el-form-item class="mt-8" prop="password">
                            <el-input v-model="formValue.password" clearable placeholder="请输入密码" show-password type="password" @keyup="passwordKeyUp" />
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="checkbox" label="记住密码" />
                        </el-form-item>
                        <el-form-item class="mb-0 mt-6">
                            <el-button class="text-[16px] text-white" :loading="loading" block color="#20C88B" @click="formValidateClick">登 录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import { userLogin } from "~api/user";
import { deepClone, formValidate } from 'js-fast-way'
import { getStore, setStore } from '~src/utils/storage'
import { setRefreshToken, setToken } from 'hc-vue3-ui'

//图片文件
import bg1Png from '~src/assets/login/bg1.png'
import bgPng from '~src/assets/login/bg.png'
import imgPng from '~src/assets/login/img.png'

//初始化
const router = useRouter()
const store = useAppStore()

//渲染完成
onMounted(async () => {
    const username = deepClone(getStore('login-username') || '')
    const password = deepClone(getStore('login-password') || '')
    const checkboxs = deepClone(getStore('login-checkbox') || '')
    formValue.value.username = username
    formValue.value.password = password
    checkbox.value = checkboxs
    await nextTick()
    store.clearStoreData() //先清理下缓存
    setLoginData()
    // 兼容性脚本，如果loading属性不被支持
    document.querySelectorAll('img[loading="lazy"]').forEach((img) => {
        img.src = img.dataset.src
    })
})

//表单
const formRef = ref(null)
const checkbox = ref(true)
const formValue = ref({ tenantId: '000000', username: '', password: '', type: 'account' })
const formRules = {
    username: { required: true, message: '请输入账号', trigger: 'blur' },
    password: { required: true, message: '请输入密码', trigger: 'blur' },
}
const passwordKeyUp = (e) => {
    if (e.key === 'Enter') {
        formValidateClick()
    }
}

//登录
const loading = ref(false)
const formValidateClick = async () => {
    const formRes = await formValidate(formRef.value)
    if (!formRes) return false
    //登录请求
    loading.value = true
    const { error, code, res } = await userLogin(formValue.value)
    if (!error && code === 200) {
        setToken(res['access_token'])
        setRefreshToken(res['refresh_token'])
        store.setUserInfo(res)
        //登录成功
        loading.value = false
        window?.$message?.success('登录成功')
        setLoginData()
        setTimeout(() => {
            loading.value = false
            router.push({ path: '/os' })
        }, 1500)
    } else {
        loading.value = false
        window?.$message?.error('登录失败')
        return false
    }
}

//缓存账号密码
const setLoginData = () => {
    if (checkbox.value) {
        setStore('login-username', formValue.value.username)
        setStore('login-password', formValue.value.password)
    }
    setStore('login-checkbox', checkbox.value)
}
</script>

<style lang="scss">
@import "~src/styles/view/login";
</style>
