<template>
  <div class="wrapper">
    <div style="margin: 200px auto; background-color: #fff; width: 800px; height: 400px; border-radius: 10px">
      <div >
        <img
            class="image"
            style="height: 400px;width: 300px;float: left;"
            src="../img/Login/login_top.png"
        />
      </div>
      <div style="height: 400px;width: 430px;float: left;margin:30px 0 0 40px;">
        <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>匠承非遗后台管理系统</b></div>
        <el-form :model="user"  ref="userForm">
          <el-form-item prop="username">
            <h2>账号</h2>
            <el-input size="large" style="margin: 10px 0" :prefix-icon="User" v-model="username"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <h2>密码</h2>
            <el-input size="large" style="margin: 10px 0;" :prefix-icon="Lock" show-password v-model="password"></el-input>
          </el-form-item>
          <div style="margin: 10px 0; text-align: right">
            <el-button
                style="display: block;
                    font-size: 15px;
                    width: 80%;
                    margin: 35px  auto 0 auto;
                    text-align: center;
                    border-radius: 20px;
                    background-color: #AC7352;
                    "
                    @click="Login()" @keydown.enter="keyDown" size="large" ><p style="color: #ffffff">登录</p></el-button>
          </div>
        </el-form>

      </div>
    </div>
    <div class="RecordNumber">
      <a href="https://beian.miit.gov.cn/" target="_blank">粤ICP备2024274839号</a>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onMounted, onUnmounted, ref} from 'vue'
import { SuccessInfo, ErrorInfo, WarnInfo, CommInfo  } from '@/utils/messageInfo';
import {useRouter} from 'vue-router'
import myAxios from '@/api/myAxios';
import { userStore } from '../store/userStore';
import { User , Lock} from '@element-plus/icons-vue'

const user = ref({})
const username = ref('')
const password = ref('')
const router = useRouter()
const store = userStore()

onMounted(()=>{
  window.addEventListener('keydown',keyDown)
})

onUnmounted(()=>{
  window.removeEventListener('keydown',keyDown,false)
})

//点击回车键登录
const keyDown = (e:any) => {
  if (e.keyCode == 13 || e.keyCode == 100) {
    Login()
  }
}

const Login = async ()=>{
  if(username.value === '' || password.value === '') {
    ErrorInfo('检查账号或密码是否成功填写')
    return;
  }
  const res: any = await myAxios.post("/user/login",{
    userAccount: username.value,
    userPassword: password.value
  })
  // console.log(res.data)
  if(res.data.code === 1 && res ?.data) {
    SuccessInfo('登陆成功')
    //将用户信息放入pinia
    await store.getLoginUser(res.data.data)
    //跳转仪表盘
    await router.replace('/DashBoard')
  } else {
    WarnInfo(res.data.message)
    return;  //空返回结束函数
  }
}
</script>

<style scoped>
.wrapper{
  height: 100vh;
  background-image:url(https://carbon2.obs.cn-north-4.myhuaweicloud.com:443/feiyi%2Ftest%2F0%2FzGMkHxQk-login.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  overflow: auto;
}

a {
  text-decoration: none;
  color: #cccccc;
}

a:link a:visited {
  color: #cccccc;
}

.RecordNumber {
  /*height: 100px;*/
  text-align: center;
}

</style>