<template>
  <div class="login-page">
    <div class="login-box">
      <div class="login-logo">電商後台</div>
      <!-- /.login-logo -->
      <div class="card">
        <div class="card-body login-card-body">
          <el-form
            ref="ruleFormRef"
            :model="formState"
            status-icon
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item
              prop="username"
              :rules="[
                {
                  required: true,
                  message: '帳號必填',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="formState.username"
                autocomplete="off"
                placeholder="請輸入帳號"
                ref="ifocus"
              />
            </el-form-item>
            <el-form-item
              prop="password"
              :rules="[
                {
                  required: true,
                  message: '密碼必填',
                  trigger: 'blur',
                },
              ]"
            >
              <el-input
                v-model="formState.password"
                type="password"
                autocomplete="off"
                placeholder="請輸入密碼"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                v-model="formState.captcha"
                placeholder="請輸入驗證碼"
                @keyup="inputCaptcha"
              >
                <template #append>
                  <img
                    :src="captchaImgUrl"
                    alt="CAPTCHA"
                    style="cursor: pointer"
                    title="點擊換一張"
                    ref="captchaImg"
                    :onclick="`this.src='index.php?act=captcha&${Math.random()}'`"
                  />
                </template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-checkbox v-model="formState.remember">記住登入</el-checkbox>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" block @click="submitForm(ruleFormRef)"
                >登入</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <!-- /.login-card-body -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, nextTick } from "vue";
import axios from "axios";
import Cookies from "js-cookie";

import { ElMessage } from 'element-plus'

// import { setAuthorization } from "@/utils/request";

const ifocus = ref(null);

const ruleFormRef = ref(null);

nextTick(() => {
  ifocus.value.focus();
});

const captchaImg = ref(null);

const captchaImgUrl = ref("index.php?act=captcha&" + Math.random());

const inputCaptcha = () => {
  formState.value.captcha = formState.value.captcha.toUpperCase();
};

const formState = ref({
  username: "",
  password: "",
  captcha: "",
  remember: false,
});

const submitForm = async (formEl) => {
  if (!formEl) return;

  await formEl.validate(async (valid, fields) => {
    if (valid) {
      let res = await axios.post("privilege.php?act=signin", formState.value);

      if (res.data.code != "200") {
        captchaImgUrl.value = "index.php?act=captcha&" + Math.random();
        ElMessage('登入失敗')
        switch (res.data.code) {
          case "501":
            formState.value.captcha = "";
            break;
          default:
            formState.value.username = "";
            formState.value.password = "";
            formState.value.captcha = "";
            ifocus.value.focus();
        }
        return;
      }
      ElMessage('登入成功')
      Cookies.set("Authorization", "Bearer " + res.data.token);
      window.location.href = "index.php";
    } else {
      ElMessage('登入失敗')
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
.captcha-field {
  height: 50px;
}
</style>
