<template>
    <div class="login-body">
        <div class="login-body-bg-box">
            <img :src="loginBg" alt="">
        </div>
        <div class="login-container">
            <div class="login-sign">
                <div class="title-img">
                    <img :src="loginGif" alt="">
                    <div class="login-title">用户登录</div>
                </div>
                <div class="login-tab">
                    <div class="login-tab-img">
                        <img :src="loginPng2" alt="">
                    </div>
                    <div class="login-tab-form">
                        <img :src="loginPng3" alt="">
                        <div class="form-box">
                            <div class="form-input-box">
                                <img :src="loginPng4" alt="">
                                <input v-model="formModel.username" placeholder="账号">
                            </div>
                            <div class="form-input-box">
                                <img :src="loginPng4" alt="">
                                <input v-model="formModel.password" type="password" placeholder="密码">
                            </div>
                            <div class="form-btn-box" @click="loginClick">
                                <img :src="loginPng5" alt="">
                                <div class="btn-text">登 录</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '~src/store'
import { setToken } from '~src/api/util/auth'
import { getRandom } from 'js-fast-way'
import mainApi from '~api/user'

const useApp = useAppStore()
const router = useRouter()

//图片资源
import loginBg from '~src/assets/login/bg.png'
import loginGif from '~src/assets/login/1.gif'
import loginPng2 from '~src/assets/login/2.png'
import loginPng3 from '~src/assets/login/3.png'
import loginPng4 from '~src/assets/login/4.png'
import loginPng5 from '~src/assets/login/5.png'

const formModel = ref({
    username: '',
    password: '',
})

//登录页
const loginClick = async () => {
    const { username, password } = formModel.value
    if (!username) {
        window.$message.warning('请输入账号')
    } else if (!password) {
        window.$message.warning('请输入密码')
    } else {
        const { error, code, msg } = await mainApi.login(formModel.value)
        if (!error && code === 200) {
            setToken(getRandom(24))
            useApp.setUserName(username)
            window?.$message?.success('登录成功')
            setTimeout(() => {
                router.push({ name: 'home-index' })
            }, 2000)
        } else {
            window?.$message?.error(msg)
        }
    }
}
</script>

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