<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="medium" style="margin: 10px 0" prefix-icon="el-icon-user" v-model="username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <h2>密码</h2>
              <el-input size="medium" style="margin: 10px 0;" prefix-icon="el-icon-lock" show-password v-model="password"></el-input>
            </el-form-item>
            <div style="margin: 10px 0; text-align: right">
              <div  style="display: block;
                                           font-size: 15px;
                                           width: 80%;
                                           margin: 50px  auto 0 auto;
                                           text-align: center;
                                           border-radius: 20px;
                                           background-color: rgb(172, 115, 82);
                                           line-height: 40px;
                                           " @click="Login">登录</div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import {ref, reactive, onMounted} from 'vue'
  import { ElMessage } from 'element-plus'
  import {useRouter} from 'vue-router'
  import myAxios from '@/api/myAxios';
  import { userStore } from '../store/userStore';

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

 

  const Login = async ()=>{
    if(username.value === '' || password.value === '') {
      ElMessage.error('检查账号或密码是否成功填写')
      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) {
      //将用户信息放入pinia
      await store.getLoginUser(res.data.data)
      //跳转个人中心
      await router.replace('/PersonalCenter')
    } else {
      ElMessage({
      type: 'warning',
      message: res.data.message
    })
    return;  //空返回结束函数
    }
  }
  </script>
  
  <style scoped>
    .wrapper{
      height: 100vh;
      background-image:url("../img/Login/登录底图.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      overflow: hidden;
    }
  </style>