<template>
  <div class="login-box">
    <div class="login-logo">電商後台</div>
    <!-- /.login-logo -->
    <div class="card">
      <div class="card-body login-card-body">
        <a-form
          :model="formState"
          name="basic"
          :wrapper-col="{ span: 24 }"
          autocomplete="off"
          @finish="onFinish"
          @finishFailed="onFinishFailed"
        >
          <a-alert type="error" :closable="true" v-if="visible" :message="message" @close='onClose' showIcon style="margin-bottom: 24px;" />
          <a-form-item
            name="username"
            :rules="[
              { required: true, message: '用戶帳號必填!' },
            ]"
          >
            <a-input v-model:value="formState.username"             
            placeholder="用戶帳號"
            ref="ifocus"
            />
          </a-form-item>

          <a-form-item
            name="password"
            :rules="[
              { required: true, message: '用戶密碼必填!' },
            ]"
          >
            <a-input-password             
            placeholder="用戶密碼"
            v-model:value="formState.password" 
            />
          </a-form-item>

          <a-form-item
            name="captcha"
            :rules="[
              { required: true, message: '驗證碼必填!' },
            ]"
          >
          <a-input v-model:value="formState.captcha" placeholder="驗證碼" @keyup="inputCaptcha">
          <template #addonAfter>
            <img :src="captchaImgUrl" alt="CAPTCHA" style="cursor: pointer;" title="點擊換一張" ref="captchaImg" :onclick="`this.src='index.php?act=captcha&${Math.random()}'`"/>
          </template>
          </a-input>
          </a-form-item>

          <a-form-item name="remember" :wrapper-col="{ span: 24 }">
            <a-checkbox v-model:checked="formState.remember"
              >記住登入</a-checkbox
            >
          </a-form-item>

          <a-form-item :wrapper-col="{ span: 24 }">
            <a-button type="primary" html-type="submit" block>登入</a-button>
          </a-form-item>
        </a-form>
        <!-- /.social-auth-links -->
      </div>
      <!-- /.login-card-body -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, nextTick } from 'vue'
import axios from 'axios'

import {setAuthorization} from '@/utils/request'

const ifocus: any = 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()
}

interface FormState {
  username: string;
  password: string;
  captcha: string;
  remember: boolean;
}

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


const onFinish = async (values: any) => {
    let res = await axios.post('/admin/privilege.php?act=signin',values)

    if(res.data.code != '200'){
      
      captchaImgUrl.value = 'index.php?act=captcha&'+Math.random()

      visible.value = true
      message.value = res.data.message
      
      setTimeout(function(){
        visible.value = false
      },3000)
      

      switch(res.data.code){
        case '501':
          formState.value.captcha = ''
          break
        default:
          formState.value.username = ''
          formState.value.password = ''
          formState.value.captcha = ''
          ifocus.value.focus();
      }

      return
    }
    setAuthorization(res.data.code)
    window.location.href = 'index.php'
};

const onFinishFailed = (errorInfo: any) => {
      console.log('Login Failed')
}

const message = ref('')
const visible = ref(false)

const onClose = ()=>{

}

</script>

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