<template>
  <div class="body-view">
    <el-text class="mx-1">顺丰快递</el-text>
    <el-text>{{ message }}</el-text>
    <el-form class="form-view">
      <el-form-item label="账号:" class="ipt-lbl">
        <el-input placeholder="请输入账号" class="ipt" v-model="form.account" ></el-input>
      </el-form-item>
      <el-form-item label="密码:">
        <el-input placeholder="请输入密码" type="password" class="ipt" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item class="btn-view">
        <el-button class="btn" type="primary" @click="login">确定</el-button>
        <el-button class="btn cancel-btn" type="primary" @click="register">注册</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import request from '../request';
// import { request } from "../api"
import { useRouter } from 'vue-router';
import { userStore } from '../store';
import axios from "axios"

const store = userStore()
const isAdminRef = ref(false)
const form = reactive({
  account: "",
  password: ""
});

const router = useRouter();

const login = async () => {
  try {
    request({
      method: 'post',
      url: "/user/login",
      data: {
        loginId: form.account,
        loginPwd: form.password
      }
    }).then(res => {
      const token = res.headers["authentication"]
      if (token) {
        //登陆成功
        store.setToken(token)
        store.setUserInfo(res.data.data)
        if (store.getIsAdmin) {
          router.push({ path: "/user/expressList" })
        } else {
          router.push({ path: "/user/myInfo" });
        }
        ElMessage({ message: "登录成功", type: "success" })
      } else {
        //登录失败
        ElMessage({ message: res.data.msg, type: "error" })

      }
    })

  }
  catch (err) {
    console.error(err, "请求错误")
  }

}

function register() {
  router.push({ name: "Register" });
}
</script>

<style>
.body-view {
  border: 1px solid black;
  width: 490px;
  height: 425px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.mx-1 {
  font-size: 25px;
  margin-bottom: 20px;
}

.ipt-lbl {
  font-size: 18px;
}

.ipt {
  border: 1px solid black;
  height: 50px;
}

.btn {
  height: 40px;
  width: 90px;
  background-color: #0f63ff;
}

.btn-view {
  margin-top: 30px;
  margin-left: 15px;
}

.cancel-btn {
  margin-left: 70px !important;
}
</style>
