<template>
    <div class="login-body">
        <a v-if="appLogoIcon" class="left-logo" href="http://hczc.hcxxy.com/" target="_blank">
            <img id="logo-icon" alt="" :src="appLogoIcon">
            <span class="logo-name">{{ config.name }}</span>
        </a>
        <div class="left-pic-container">
            <HcPicVue v-if="defer(10)" />
        </div>
        <div class="right-container">
            <div class="right-app-title">{{ config.name }}</div>
            <div class="sign-list">
                <h1 class="font-lg">登录</h1>
                <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">
                                <template #suffix>
                                    <span class="clickable-text" @click="clickableClick">忘记密码</span>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item v-if="tenantMode" prop="tenantId">
                            <el-input v-model="formValue.tenantId" clearable placeholder="租户ID" />
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="checkbox">记住密码</el-checkbox>
                        </el-form-item>
                        <el-form-item class="mt-8">
                            <el-button :loading="loading" block type="primary" @click="formValidateClick">登 录</el-button>
                        </el-form-item>
                        <div class="form-protocol" @click="protocolClick">《软件产品用户使用服务协议》</div>
                    </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 { useAppLogin } from '~sto/user'
import { getTenantID } from '~api/user'
import config from '~src/config/index'
import { getTopUrl, setAppName } from '~uti/tools'
import HcPicVue from './components/pic.vue'
import logoIcon from '~src/assets/logo/icon.png'
import { formValidate, getObjVal, isNullES, setImageColorStyle } from 'js-fast-way'
import { useDefer } from 'hc-vue3-ui'
const defer = useDefer()

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

//系统信息
const appLogoIcon = ref('')

//切换登录类型
const tenantMode = ref(true)

onMounted(() => {
    userStore.clearStoreData() //先清理下缓存
    getTenantIdApi()
    setAppImageColor()
})

const setAppImageColor = () => {
    setImageColorStyle('logo-icon', '#1ECC95')
}

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

//获取租户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
        tenantMode.value = false
        //设置标题
        userStore.setTitle(tenantTitle)
        setAppName(tenantTitle)

        //设置logo图标
        const logoIconValue = tenantAvatar ? tenantAvatar : logoIcon
        appLogoIcon.value = logoIconValue
        userStore.setLogoIcon(logoIconValue)

        //设置logo文字
        const logoNameValue = tenantAvatarText ? tenantAvatarText : config.name
        userStore.setLogoName(logoNameValue)

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

        //设置logo图标
        appLogoIcon.value = logoIcon
        userStore.setLogoIcon(logoIcon)

        //设置logo文字
        userStore.setLogoName(config.name)

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

//登录
const loading = ref(false)
const formValidateClick = async () => {
    const formRes = await formValidate(formRef.value)
    if (!formRes) return false
    //登录请求
    loading.value = true
    const { error, msg } = await useAppLogin(formValue.value)
    loading.value = false
    //登录失败
    if (error && isNullES(msg)) return false
    if (error && !isNullES(msg)) {
        window?.$message?.error(msg)
        return false
    }
    //登录成功
    window?.$message?.success('登录成功')
    setTimeout(() => {
        router.push({ name: 'index' })
    }, 1500)
}

//忘记密码
const clickableClick = () => {
    const val = '<div style="font-size: 16px;">忘记密码请不要紧张，联系您项目上的专属客服人员电话 <span style="color:#1ECC95;">18423665354</span> ，提供身份证明信息即可初始化密码，建议初始化之后由您单独去更改密码</div>'
    window?.$messageBox?.alert(val, '联系项目客服', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
    })
}

//协议
const protocolClick = () => {
    window.open('https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20231213/73025c8aba72e1165e0731942f6e66c9.pdf', '_blank')
}
</script>

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

<style lang="scss">
@import "../../styles/view/login.dark.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;
    }
}
.form-protocol {
    color: #8C8889;
    font-size: 13px;
    cursor: pointer;
    transition: color 0.3s;
    &:hover {
        color: var(--el-color-primary);
    }
}
</style>
