<template>
	<div class="auth-wrapper auth-v2">
		<b-row class="auth-inner m-0">
			<!-- Brand logo-->
			<b-link class="brand-logo">
				<vuexy-logo />
				<h2 class="brand-text text-primary ml-1">Vuexy</h2>
			</b-link>
			<!-- /Brand logo-->

			<!-- Left Text-->
			<b-col lg="8" class="d-none d-lg-flex align-items-center p-5">
				<div
					class="w-100 d-lg-flex align-items-center justify-content-center px-5">
					<b-img fluid :src="imgUrl" alt="Login V2" />
				</div>
			</b-col>
			<!-- /Left Text-->

			<!-- Login-->
			<b-col lg="4" class="d-flex align-items-center auth-bg px-2 p-lg-5">
				<b-col sm="8" md="6" lg="12" class="px-xl-2 mx-auto">
					<b-card-title title-tag="h2" class="font-weight-bold mb-1">
						Welcome to Vuexy! 👋
					</b-card-title>
					<b-card-text class="mb-2">
						請登入帳號並開始您的旅程
					</b-card-text>

					<!-- form -->
					<validation-observer ref="loginValidation">
						<b-form
							class="auth-login-form mt-2"
							action="./api/login"
							method="post"
							@submit.prevent>
							<!-- account -->
							<b-form-group label="帳號" label-for="account">
								<validation-provider
									#default="{ errors }"
									name="帳號"
									rules="required">
									<b-form-input
										id="account"
										v-model="account"
										:state="errors.length > 0 ? false : null"
										name="account"
										placeholder="maa0000" />
									<small class="text-danger">{{ errors[0] }}</small>
								</validation-provider>
							</b-form-group>

							<!-- forgot password -->
							<b-form-group>
								<div class="d-flex justify-content-between">
									<label for="login-password">密碼</label>
								</div>
								<validation-provider
									#default="{ errors }"
									name="密碼"
									rules="required">
									<b-input-group
										class="input-group-merge"
										:class="errors.length > 0 ? 'is-invalid' : null">
										<b-form-input
											id="login-password"
											v-model="password"
											:state="errors.length > 0 ? false : null"
											class="form-control-merge"
											:type="passwordFieldType"
											name="password"
											placeholder="············" />
										<b-input-group-append is-text>
											<feather-icon
												class="cursor-pointer"
												:icon="passwordToggleIcon"
												@click="togglePasswordVisibility" />
										</b-input-group-append>
									</b-input-group>
									<small class="text-danger">{{ errors[0] }}</small>
								</validation-provider>
							</b-form-group>

							<!-- checkbox -->
							<b-form-group>
								<b-form-checkbox
									id="remember-me"
									v-model="status"
									name="checkbox-1">
									記住我的登入資訊
								</b-form-checkbox>
							</b-form-group>

							<!-- submit buttons -->
							<b-button
								type="submit"
								variant="primary"
								block
								@click="validationForm">
								登入
							</b-button>
						</b-form>
					</validation-observer>

					<b-card-text class="text-center mt-2">
						<span>第一次使用此平台? </span>
						<b-link :to="{ name: 'page-auth-register-v2' }">
							<span>&nbsp;建立帳戶</span>
						</b-link>
					</b-card-text>

					<!-- divider -->
					<div class="divider my-2">
						<div class="divider-text">or</div>
					</div>

					<!-- social buttons -->
					<div class="auth-footer-btn d-flex justify-content-center">
						<b-button variant="facebook" href="javascript:void(0)">
							<feather-icon icon="FacebookIcon" />
						</b-button>
						<b-button variant="twitter" href="javascript:void(0)">
							<feather-icon icon="TwitterIcon" />
						</b-button>
						<b-button variant="google" href="javascript:void(0)">
							<feather-icon icon="MailIcon" />
						</b-button>
						<b-button variant="github" href="javascript:void(0)">
							<feather-icon icon="GithubIcon" />
						</b-button>
					</div>
					<!-- divider -->
					<div class="divider my-2">
						<div class="divider-text">or</div>
					</div>
					<div class="auth-footer-btn d-flex justify-content-center">
						<b-button variant="facebook" :to="{ name: 'pages-blog-list' }">
							先進行探索
						</b-button>
					</div>

				</b-col>
			</b-col>
			<!-- /Login-->
		</b-row>
	</div>
</template>

<script>
/* eslint-disable global-require */
import { ValidationProvider, ValidationObserver } from "vee-validate";
import VuexyLogo from "@core/layouts/components/Logo.vue";
import {
	BRow,
	BCol,
	BLink,
	BFormGroup,
	BFormInput,
	BInputGroupAppend,
	BInputGroup,
	BFormCheckbox,
	BCardText,
	BCardTitle,
	BImg,
	BForm,
	BButton,
} from "bootstrap-vue";
import { required } from "@validations";
import { togglePasswordVisibility } from "@core/mixins/ui/forms";
import store from "@/store/index";
import ToastificationContent from "@core/components/toastification/ToastificationContent.vue";
import useJwt from '@/auth/jwt/useJwt'
import { defineRulesFor } from '@/libs/acl/ability'


export default {
	components: {
		BRow,
		BCol,
		BLink,
		BFormGroup,
		BFormInput,
		BInputGroupAppend,
		BInputGroup,
		BFormCheckbox,
		BCardText,
		BCardTitle,
		BImg,
		BForm,
		BButton,
		VuexyLogo,
		ValidationProvider,
		ValidationObserver,
	},
	mixins: [togglePasswordVisibility],
	data() {
		return {
			status: "",
			password: "",
			account: "",
			sideImg: require("@/assets/images/pages/login-v2.svg"),
			// validation rulesimport store from '@/store/index'
			required,
		};
	},
	computed: {
		passwordToggleIcon() {
			return this.passwordFieldType === "password" ? "EyeIcon" : "EyeOffIcon";
		},
		imgUrl() {
			if (store.state.appConfig.layout.skin === "dark") {
				// eslint-disable-next-line vue/no-side-effects-in-computed-properties
				this.sideImg = require("@/assets/images/pages/login-v2-dark.svg");
				return this.sideImg;
			}
			return this.sideImg;
		},
	},
	methods: {
		validationForm() {
			this.$refs.loginValidation.validate().then((success) => {
				if (success) {
					useJwt.login({
						account: this.account,
						password: this.password,
					}).then(response => {
						useJwt.setToken(response.data.token);
						localStorage.setItem('userData', response.data.user);
						this.$ability.update(defineRulesFor(response.data.user));
						if (this.$route.query.redirect)
							this.$router.push({ path: this.$route.query.redirect });
						else
							this.$router.push({ name: 'home' });
					});


				}
			});
		},
	},
};
</script>

<style lang="scss">
@import "@resources/scss/vue/pages/page-auth.scss";
</style>
