<template>
  <div class="h-screen w-screen flex justify-center items-center">
    <div class="h-screen w-screen bg-cover" style=" background-image: url('src/assets/img/bg.png')">
      <div class="text-white text-2xl text-center pt-20 pb-20">{{ configKit.title }}</div>
      <div class="flex flex-col justify-center  items-center gap-8">
        <div class="text-2xl text-cyan-900 font-bold">登录</div>
        <el-form
            ref="form"
            :model="modal"
            label-position="left"
            label-width="80px" size="large">
          <el-form-item :rules="{required: true, message: '请填写', trigger: 'blur'}" label="用户名：" prop="username"
                        size="large">
            <el-input v-model="modal.username" autocomplete="off" autofocus placeholder="用户名"
                      style="width: 220px" @keyup.enter.native="login()"/>
          </el-form-item>
          <el-form-item :rules="{required: true, message: '请填写', trigger: 'blur'}" label="密  码：" prop="pwd"
                        size="large">
            <el-input v-model="modal.pwd" autocomplete="off" placeholder="密  码" style="width: 220px"
                      type="password" @keyup.enter.native="login()"/>
          </el-form-item>
          <el-form-item label="" prop="login" size="large">
            <div class="flex flex-col items-center w-full">
              <div class="flex justify-center w-full">
                <el-button :loading="loading" class="w-full" size="large" type="primary" @click="login()">登录
                </el-button>
              </div>
              <kit-err-channel id="login" style="width: 100%"/>
            </div>
          </el-form-item>
        </el-form>

      </div>
    </div>

  </div>
</template>
<script setup>
import {onMounted, ref} from 'vue';
import {useRouter} from "vue-router";
import {configKit, storeUserInfo, submitErrChanel, updateStoreUserInfo} from "../../lib/store";
import {RouteName} from "../../lib/router";
import {useLoading} from "../../lib/service";
import {UserLogin} from "../dao/user";


const router = useRouter()
const loading = ref(false)
const modal = ref({role: 2})
const form = ref()

async function login() {
  const valid = await form.value.validate();
  if(!valid) return
  await useLoading(loading, async function(){
    submitErrChanel('login');
    let data = await UserLogin(modal.value)
    updateStoreUserInfo(data);
    const redirect = {
      name: RouteName.index,
    };
    await router.push(redirect);
  })()

}


onMounted(function () {

})
</script>
