<template>
  <div
    center
    class="auth-content"
  >
    <WsInputCard
      class="mx-auto"
      title="管理後台"
    >
      <div
        v-if="pageErrorMessage"
        class="error-message"
      >{{pageErrorMessage}}</div>
      <ValidationObserver ref="form">
        <form
          @submit.prevent="onSubmit()"
          class="mt-5"
        >
          <WsState
            ref="WsStateEmail"
            @keyup.enter="onSubmit()"
            autofocus
            name="email"
            rules="required|email"
            label="帳號"
            type="email"
            v-model="email.value"
            :errorMessage="email.errorMessage"
          ></WsState>
          <WsState
            ref="WsStatePassword"
            @keyup.enter="onSubmit()"
            rules="required|min:6"
            label="Password"
            type="password"
            v-model="password.value"
            :errorMessage="password.errorMessage"
          ></WsState>
          <WsBtn
            type="submit"
            :loading="loading"
            block
          >
            登入
          </WsBtn>
        </form>
      </ValidationObserver>
    </WsInputCard>
    <WsInfoSection
      class="mx-auto mt-10"
      title="如有任何疑問請聯絡山葵組設計"
      link="hello@wasateam.com"
    ></WsInfoSection>
  </div>
</template>
<script>
export default {
  data: () => ({
    loading: false,
    email: {
      value: "",
      errorMessage: null
    },
    password: {
      value: "",
      errorMessage: null
    },
    pageErrorMessage: null
  }),
  methods: {
    async onSubmit() {
      const isValidate = await this.$refs.form.validate();
      if (!isValidate) {
        return;
      }
      this.$refs.form.reset();
      this.loading = true;
      this.email.errorMessage = null;
      this.password.errorMessage = null;
      this.pageErrorMessage = null;
      try {
        const res = await this.$axios.post("/auth/admin/signin", {
          email: this.email.value,
          password: this.password.value
        });
        localStorage.setItem("access_token", `Bearer ${res.data.access_token}`);
        this.$axios.defaults.headers.common[
          "Authorization"
        ] = `Bearer ${res.data.access_token}`;
        this.$store.dispatch("user/setUserData", res.data.admin);
        if (this.$route.query.redirect) {
          this.$router.push(this.$route.query.redirect).catch(() => {});
        } else {
          this.$router.push("/").catch(() => {});
        }
      } catch (error) {
        if (
          error.response &&
          error.response.data &&
          error.response.data.message
        ) {
          const errorMessage = error.response.data.message;
          if (errorMessage == "find no email.") {
            this.email.errorMessage = this.$locales[errorMessage];
            this.$refs.WsStateEmail.focus();
          } else if (errorMessage == "password not correct.") {
            this.password.errorMessage = this.$locales[errorMessage];
            this.$refs.WsStatePassword.focus();
          } else {
            this.pageErrorMessage = errorMessage;
          }
        } else {
          this.pageErrorMessage = this.$locales["internet error."];
        }
      } finally {
        this.loading = false;
      }
    }
  },
  props: {},
  mounted() {}
};
</script>