<template>
  <div class="row justify-content-center">
    <div class="col-lg-5 col-md-7">
      <div class="card bg-secondary shadow border-0">
        <!-- <div class="card-header bg-transparent pb-5">
          <div class="text-muted text-center mt-2 mb-3">
            <small>Sign in with</small>
          </div>
          <div class="btn-wrapper text-center">
            <a href="#" class="btn btn-neutral btn-icon">
              <span class="btn-inner--icon"
                ><img src="img/icons/common/github.svg"
              /></span>
              <span class="btn-inner--text">Github</span>
            </a>
            <a href="#" class="btn btn-neutral btn-icon">
              <span class="btn-inner--icon"
                ><img src="img/icons/common/google.svg"
              /></span>
              <span class="btn-inner--text">Google</span>
            </a>
          </div>
        </div> -->
        <loading
          :active.sync="pending"
          :can-cancel="false"
          :is-full-page="true"
        ></loading>
        <div class="card-body px-lg-5 py-lg-5">
          <div class="text-center text-muted mb-4">
            <small>Đăng nhập bằng tài khoản của bạn</small>
          </div>
          <ValidationObserver v-slot="{ handleSubmit }">
            <form role="form" @submit.prevent="handleSubmit(doLogin)">
              <ValidationProvider rules="username" v-slot="{ errors }">
                <base-input
                  class="input-group-alternative mb-3"
                  placeholder="Email"
                  addon-left-icon="ni ni-email-83"
                  v-model="username"
                  :error="errors[0]"
                  :valid="errors.length == 0 && username.length > 0"
                >
                </base-input>
              </ValidationProvider>
              <base-input
                class="input-group-alternative"
                placeholder="Password"
                type="password"
                addon-left-icon="ni ni-lock-circle-open"
                v-model="password"
              >
              </base-input>

              <base-checkbox class="custom-control-alternative">
                <span class="text-muted">Ghi nhớ đăng nhập</span>
              </base-checkbox>
              <div class="text-center">
                <button
                  @click.prevent="handleSubmit(doLogin)"
                  :disabled="pending"
                  type="click"
                  class="btn my-4 btn-primary"
                >
                  đăng nhập
                </button>
              </div>
            </form>
          </ValidationObserver>
        </div>
      </div>
      <!-- <div class="row mt-3">
        <div class="col-6">
          <a href="#" class="text-light"><small>Forgot password?</small></a>
        </div>
        <div class="col-6 text-right">
          <router-link to="/register" class="text-light"
            ><small>Create new account</small></router-link
          >
        </div>
      </div> -->
    </div>
  </div>
</template>
<script>
import { extend } from "vee-validate";
extend("username", {
  validate(value) {
    return {
      required: true,
      valid: ["", null, undefined].indexOf(value) === -1
    };
  },
  message: "Vui lòng nhập tài khoản đăng nhập",
  computesRequired: true
});

import { mapActions } from "vuex";
export default {
  name: "login",
  data() {
    return {
      username: "",
      password: "",
      pending: false
    };
  },
  methods: {
    ...mapActions("account", ["login", "logout"]),
    doLogin() {
      const { username, password } = this;
      var self = this;
      self.pending = true;
      if (username && password) {
        this.login({ username, password })
          .then(() => {
            self.pending = false;
            if (this.$route.params.nextUrl != null) {
              this.$router.push(this.$route.params.nextUrl);
            } else {
              this.$router.push("/");
            }
            this.$alertify.success("Login successfuly", {
              duration: 2000
            });
          })
          .catch(err => {
            self.pending = false;
            if (err.response) {
              if (err.response.status == 405) {
                self.viewLogin = false;
              } else {
                var message = err.response.data.message;
                this.$alertify.error(message, {
                  duration: 4000
                });
              }
            } else {
              this.$alertify.error(err, {
                duration: 4000
              });
            }
          });
      } else {
        this.$alertify.error("Vui lòng nhập thông tin để đăng nhập", {
          duration: 2000
        });
      }
      return false;
    }
  }
};
</script>
<style></style>
