<template>
	<div class="limiter">
		<div class="container-login100">
			<div class="wrap-login100 p-l-55 p-r-55 p-t-65 p-b-54">
				<form class="login100-form validate-form">
					<span class="login100-form-title p-b-21">
						後台系統
					</span>
					<div class="wrap-input100 validate-input m-b-23" data-validate = "Username is reauired">
						<span class="label-input100">用戶帳號</span>
						<input class="input100" type="text" v-model="form.username" placeholder="請輸入您的帳號">
						<span class="focus-input100" data-symbol="&#xf206;"></span>
					</div>

					<div class="wrap-input100 validate-input m-b-23" data-validate="Password is required">
						<span class="label-input100">用戶密碼</span>
						<input class="input100" type="password" v-model="form.password" placeholder="請輸入您的密碼">
						<span class="focus-input100" data-symbol="&#xf190;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="Captcha is required">
						<span class="label-input100">輸入驗證碼</span>
						<div class="captcha-combo">
							<div>
								<input class="input80" type="text" style="text-transform:uppercase;" v-model="form.captcha" placeholder="請輸入您的圖形驗證碼">
							</div>
							<div>
								<img :src="captchaImgUrl" alt="captcha" @click="handleClickCaptcha">
							</div>
						</div>
						<span class="focus-input100" data-symbol="&#xf190;"></span>
					</div>
					
					<div class="text-right p-t-8 p-b-31">
						<a href="#">
						</a>
					</div>
					
					<div class="container-login100-form-btn">
						<div class="wrap-login100-form-btn">
							<div class="login100-form-bgbtn"></div>
							<button type="button" class="login100-form-btn" @click="onSubmit">
								登入
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
	</div>
</template>

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

const captchaImgUrl = ref(import.meta.env.VITE_APP_BASE_URL + "admin/index.php?act=captcha&" + Math.random());

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


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

const handleClickCaptcha = () => {
	captchaImgUrl.value = import.meta.env.VITE_APP_BASE_URL + 'admin/index.php?act=captcha&'+Math.random()
}

const onSubmit = async () => {
	//檢查欄位
	if (form.value.username == "") {
		return ElMessage.error("請輸入帳號");
	}
	if (form.value.password == "") {
		return ElMessage.error("請輸入密碼");
	}
	if (form.value.captcha == "") {
		return ElMessage.error("請輸入驗證碼");
	}

	try{
		let { data: res} = await axios.post(import.meta.env.VITE_APP_BASE_URL + "admin/privilege.php?act=signin", form.value);
		if (res.code !== 200) {
			captchaImgUrl.value = import.meta.env.VITE_APP_BASE_URL + 'admin/index.php?act=captcha&'+Math.random()

			return ElMessage.error(res.data.msg);
		}

		Cookies.set('Authorization', 'Bearer ' + res.token)
		window.location.href = "index.php";
	}catch(e){
		console.log(e);
	}
};
</script>

<style lang="less" scoped>
@import '@/assets/css/util.css';
@import '@/assets/css/login.less';

.captcha-combo{
	display: flex;
	justify-content: space-between;
	align-items: center;
}

</style>
