<template>
  <div>
    <el-container>
      <el-header>
        <div style="width:400px">
          <p style="float: left;">
            <el-icon color="#409EFF" :size="50">
              <ElementPlus />
            </el-icon>
          </p>
          <p style="float: left;font-size: 25px; font-weight: bold">
            互动病例后台管理系统
          </p>
        </div>

      </el-header>
      <el-main>
        <el-card class="login_card">
          <el-form :model="form" :rules="rules" ref="ruleFormRef" label-width="80px" >
            <el-form-item label="账号：" prop="access">
              <el-input v-model="form.access" placeholder="请输入账号" />
            </el-form-item>
            <el-form-item label="密码：" prop="password">
              <el-input type="password" placeholder="请输入密码" v-model="form.password" />
            </el-form-item>
            <div class="codes">
                <el-form-item prop="captcha" >
                  <el-input  placeholder="请输入验证码" v-model="form.captcha" />
                </el-form-item>
                <el-image style="width: 120px; height: 30px;margin-left: 10px;" :src="b64s" fit="fill" @click="handleGetCaptcha" />
              </div>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()"  >登录</el-button>
              <el-button type="primary" @click="resetForm()">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-main>
    
    </el-container>
  </div>
</template>

<script setup>
import userApi from "../api/user";
import { reactive, ref, getCurrentInstance,onMounted } from "vue";
import { ElMessage } from "element-plus";
import router from "../router/index";
const { proxy } = getCurrentInstance();
const form = reactive({
  captchaId: "",
  password: "",
  captcha: "",
  access:''
});
const ruleFormRef = ref();
const b64s = ref("");

const rules = reactive({
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  captcha:[{ required: true, message: "图片验证码不能为空", trigger: "blur" }]
});
const handleGetCaptcha = async() => {
  const res = await userApi.getCaptcha();
  b64s.value = res.data.b64s;
  form.captchaId = res.data.id;
};
const onSubmit = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await userApi.login(form);
      if (res.code == 200) {
        ElMessage.success("登录成功");
        localStorage.setItem("token", res.data.token);
        localStorage.setItem("userInfo", JSON.stringify(res.data));
        router.replace("/index");
      
      } else {
        handleGetCaptcha();
        ElMessage.error(res.msg);
      }
    } else {
      return false;
    }
  });
};
const resetForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.resetFields();
};
const keyDown = (e) => {
  //如果是回车则执行登录方法
  if (e.keyCode == 13) {
    onSubmit()
  }
}

onMounted(()=>{
  handleGetCaptcha();
  window.addEventListener('keydown', keyDown)
})
onUnmounted(() => {
  window.removeEventListener('keydown', keyDown, false)
})

</script>

<style scoped>
.el-container {
  height: 100vh;
  background-image: url("../assets/img/bg.jpg");
  background-size: cover;
}

.el-header {
  height: 10%;
}

.el-main {
  height: 80%;
  /* background-image: url("../assets/img/bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 120%;
  background-position-y: bottom; */
}

.login_card {
  margin: 100px auto;
  width: 20%;
  min-width: 300px;
  height: 240px;
  border-radius: 10px;
}

.el-footer {
  height: 10%;
  text-align: center;
}
.codes{
  display: flex;
}
</style>
