<template>
  <v-app id="login">
    <v-toolbar class="fixcolors">
      <v-toolbar-items>
        <img src="/static/logoIntrack.png" height="40" width="140" alt="logo" />
        <!-- <h3 class="white--text my-3 ml-5 logoSchool">School-Management</h3> -->
      </v-toolbar-items>
    </v-toolbar>
    <v-content>
      <v-container fluid fill-height>
        <v-snackbar
          :timeout="timeout"
          :top="y === 'top'"
          :right="x === 'right'"
          :vertical="mode === 'vertical'"
          v-model="snackbar"
          :color="color"
        >{{ text }}</v-snackbar>
        <v-layout align-center justify-center>
          <v-flex xs12 sm10 md6 lg4>
            <v-toolbar class="fixcolors" dark>
              <v-spacer></v-spacer>
              <v-toolbar-title>School Login</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>

            <v-card class="elevation-1 pa-1">
              <v-card-text>
                <v-flex xs12 sm12 md12 lg12>
                  <v-form ref="form" v-model="valid" lazy-validation>
                    <v-text-field
                      v-model="userLogincredentials.email"
                      :rules="nameRules"
                      label="Username"
                      required
                    ></v-text-field>
                    <v-text-field
                      :rules="[rules.required]"
                      v-model="userLogincredentials.password"
                      :append-icon="e1 ? 'visibility_off' : 'visibility'"
                      :append-icon-cb="() => (e1 = !e1)"
                      :type="e1 ? 'password' : 'text'"
                      name="input-10-1"
                      label="Password"
                      @keyup.enter="login"
                      counter
                    ></v-text-field>
                  </v-form>
                  <v-layout row wrap>
                    <v-flex xs6>
                      <!-- <v-checkbox :label="`Remember me`" v-model="remember"></v-checkbox> -->
                    </v-flex>
                    <v-flex xs6>
                      <h5 class="right mt-4">
                        <router-link
                          class="link"
                          to="/forgetpassword"
                          style="border-bottom: 2px solid #aaa;"
                        >Forgot Password</router-link>
                      </h5>
                    </v-flex>
                  </v-layout>
                </v-flex>
              </v-card-text>
              <v-layout>
                <v-flex sm12 class="my-3">
                  <v-btn
                    style="margin: auto;display: block;b"
                    class="fixcolors"
                    round
                    dark
                    large
                    @click="login"
                    :loading="loading"
                  >Login</v-btn>
                </v-flex>
              </v-layout>
              <v-layout></v-layout>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer class="pa-4 fixcolors"></v-footer>
  </v-app>
</template>

<script>
import http from "@/Services/http.js";
export default {
  data() {
    return {
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      e1: true,
      loading: false,
      remember: false,
      valid: false,
      userLogincredentials: {},
      nameRules: [v => !!v || "Username is required"],
      password: "",
      email: "",
      rules: {
        required: value => !!value || "password is Required."
      }
    };
  },
  methods: {
    login() {
      this.loading = true;
      var userdata = {
        email: this.userLogincredentials.email,
        password: this.userLogincredentials.password
      };
      http()
        .post("/schoolLogin", userdata)
        .then(response => {
          this.$store.dispatch("setToken", response.data.data.token);
          this.$store.dispatch("Id", response.data.data.id);
          this.$store.dispatch("Role", response.data.data.role);
          this.$store.dispatch("SchoolId", response.data.data.schoolId);
          this.loading = false;
          // console.log("{this.$store.state.state.role}",this.$store.state.role)
          if (this.$store.state.role === "ADMIN") {
            this.$router.push("/dashboard");
          } else if (this.$store.state.role === "SUPERADMIN") {
            this.$router.push("/school");
          } else if (this.$store.state.role === "LIBRARIAN") {
            this.$router.push("/libraryMember");
          } else if (this.$store.state.role === "ACCOUNTANT") {
            this.$router.push("/feeTypes");
          }
        })
        .catch(error => {
          if (error) {
            this.text = "Server appears to be offline";
            this.snackbar = true;
            this.loading = false;
          }
          if (error.response.data.message) {
            this.text = error.response.data.message;
            this.snackbar = true;
          }
          this.loading = false;
        });
    }
  },
  mounted() {
    if (this.$store.state.isUserLoggedIn == true) {
      this.$router.push("/dashboard");
    }
  },
  computed: {
    color() {
      return this.loading ? "success" : "error";
    }
  }
};
</script>

<style scoped lang="css">
#login {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  z-index: 0;
}
</style>
<style scoped>
img {
  position: absolute;
  top: 13px;
  left: 8px;
}
.v-btn--large {
  padding: 0px 84px;
}
.link {
  text-decoration: none;
}
a {
  color: #696969;
}
.forget {
  margin-top: 20px;
}
.mt-4 {
  margin-top: 21px !important;
}
@media screen and (max-width: 600px) {
  .forget {
    margin-top: none;
    margin-left: 18px;
  }
  img {
    left: 10px;
    height: 34px;
    width: 120px;
  }
  .logoSchool {
    font-size: 18px;
    margin-top: 20px !important;
  }
  h5 {
    font-size: 14px !important;
  }
}
</style>