<template>
  <div>
    <el-container>
      <el-header>
        <div style="width:700px">
          <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="code" >
                  <el-input  placeholder="请输入验证码" v-model="form.captcha" />
                </el-form-item>
                <el-image style="width: 120px; height: 40px;margin-left: 10px;" :src="b64s" fit="fill" @click="changecode" />
              </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-footer>
        <p>关于我们 | 联系我们 | 人才招聘 | 广告服务 | 友情链接 | 知否社区 | 知否公益</p>
        <p>Copyright © 2001-2022 <el-tag>公众号：知否技术</el-tag></p>
      </el-footer> -->
    </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({
  // access: "admin",
  // password: "123456",
  access: "",
  password: "",
  captcha: "",
  captchaId: "",
});
const ruleFormRef = ref();
const rules = reactive({
  access: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  captcha: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
});
const b64s =ref('')

const onSubmit = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      const res = await userApi.login(form);
      if (res.data) {
       
        if (res.data.code==200) {
          // proxy.$commonJs.changeView('/home');
          sessionStorage.setItem("tokens", 'Bearer '+res.data.data.token);
          localStorage.setItem("usernames",form.access);
          router.push("/index");
        } else {
          ElMessage.error(res.data.message);
        }
      } else {
        ElMessage.error("服务器内部错误");
      }
    } else {
      return false;
    }
  });
};
const resetForm = () => {
  if (!ruleFormRef) return;
  ruleFormRef.value.resetFields();
};
onMounted(()=>{
  changecode()
})
const changecode = () => {
  userApi.getcaptcha().then(res=>{
    b64s.value = res.data.data.b64s
    form.captchaId = res.data.data.id

  })
}
</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 200px;
  width: 20%;
  min-width: 300px;
  height: 270px;
  border-radius: 10px;
}

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