<template>
    <div class="login-body">
        <div class="login-body-bg-box">
            <img :src="loginBg" alt="">
        </div>
        <div class="login-container">
            <div class="hc-login-sign">
                <div class="logo-img">
                    <img id="app-logo" :src="appLogoPng" alt="">
                </div>
                <div class="login-title">项目内控管理系统</div>
                <div class="sign-list">
                    <div class="welcome">欢迎登录</div>
                    <div class="form-box mt-4">
                        <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="mt-9 mb-0">
                                <el-button :loading="loading" block type="primary" @click="formValidateClick">登 录</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref, onMounted, nextTick} from "vue";
import loginBg from "~src/assets/login/bg.jpg";
import logo from "~src/assets/logo/logo.png";
import router from '~src/router/index';
import {useAppStore} from "~src/store";
import {useAppLogin} from "~sto/user";
import {formValidate, getObjVal, setImageColorStyle} from "js-fast-way"
import website from '~src/config/index'
import {getTenantID} from "~api/user";
import {getTopUrl, setAppName} from "~uti/utils";

const userStore = useAppStore()
userStore.clearStoreData() //先清理下缓存

const appLogoPng = ref(logo)

onMounted(() => {
    getTenantIdApi()
    setAppImageColor()
})

//获取租户id
const getTenantIdApi = async () => {
    const {error, code, data} = await getTenantID(getTopUrl())
    const res = getObjVal(data)
    if (!error && code === 200 && res) {
        const {tenantAvatar, tenantAvatarText, tenantTitle, tenantId} = res
        //设置标题
        userStore.setTitle(tenantTitle)
        setAppName(tenantTitle)

        //设置logo图标
        const logoIconValue = tenantAvatar ? tenantAvatar : logo
        appLogoPng.value = logoIconValue
        userStore.setAppLogo(logoIconValue)

        //设置租户ID
        formValue.value.tenantId = tenantId
        userStore.setTenantId(tenantId)
    } else {
        //设置标题
        userStore.setTitle(website.title)
        setAppName(website.title)

        //设置logo图标
        appLogoPng.value = logo
        userStore.setAppLogo(logo)

        //设置租户ID
        formValue.value.tenantId = website.tenantId
        userStore.setTenantId(website.tenantId)
    }
    nextTick(() => {
        setAppImageColor()
    })
}

const setAppImageColor = () => {
    setImageColorStyle('app-logo', '#ffffff')
}

//表单
const formRef = ref(null);
const checkbox = ref(false)
const formValue = ref({username: '', password: '', type: "account", tenantId: website.tenantId})
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) {
        loading.value = true;
        useAppLogin(formValue.value).then(() => {
            loading.value = false;
            window?.$message?.success('登录成功');
            router.push({path: '/home/index'});
        }).catch(() => {
            loading.value = false;
        })
    }
}
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>

<style lang="scss">
.form-box {
    .el-input__wrapper.is-focus {
        box-shadow: 0 0 0 2px var(--el-input-focus-border-color) inset;
    }
    .el-form-item.is-error .el-input__wrapper {
        box-shadow: 0 0 0 2px var(--el-color-danger) inset;
    }
}
</style>
