<template>
  <v-app id="login">
    <v-container fluid fill-height>
      <v-layout>
        <v-flex xs12 sm8 md8 lg5 offset-sm2 offset-lg3 class="mt-5">
          <v-card flat class="card-style pa-2" dark id="form">
            <v-layout>
              <v-flex xs12>
                <label class="title text-xs-center">Change Student</label>
              </v-flex>
            </v-layout>
            <v-card-text>
              <v-flex xs12 sm8 md8 lg8 offset-sm2>
                <v-form class="mt-3">
                  <v-select
                    :items="studentsData"
                    item-text="name"
                    item-value="_id"
                    v-model="changeStudent"
                    label="Students"
                  ></v-select>
                </v-form>
              </v-flex>
            </v-card-text>
            <v-card-actions>
              <v-flex text-xs-center>
                <v-btn round dark :loading="loading" @click="change" class="add-button">Change</v-btn>
              </v-flex>
            </v-card-actions>
            <v-snackbar
              :timeout="timeout"
              :top="y === 'top'"
              :right="x === 'right'"
              :vertical="mode === 'vertical'"
              v-model="snackbar"
              :color="color"
            >{{ text }}</v-snackbar>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>
<script>
import http from "@/Services/http.js";

export default {
  data() {
    return {
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 4000,
      text: "",
      loading: false,
      valid: false,
      changeStudent: {},
      studentsData: []
    };
  },
  mounted() {
    this.getparentStudents();
  },
  methods: {
    change() {
      console.log("changeStudent", this.changeStudent);
      localStorage.setItem("parentStudentId", this.changeStudent);
      this.$router.replace({ path: "/" });
    },
    getparentStudents() {
      this.showLoader = true;
      http()
        .get("/parentStudentsList")
        .then(response => {
          // console.log("resssssss", response.data.data.students[0].classId);
          this.studentsData = response.data.data.students;
          localStorage.setItem(
            "parentClassId",
            response.data.data.students[0].classId
          );
          this.showLoader = false;
        })
        .catch(err => {
          console.log("err====>", err);
          this.showLoader = false;
        });
    }
  },
  computed: {
    color() {
      return this.loading ? "success" : "error";
    }
  }
};
</script>
<style scoped>
img {
  position: absolute;
  top: 13px;
  left: 50px;
}
.v-btn--large {
  padding: 0px 74px;
}
@media screen and (max-width: 769px) {
  .v-btn--large {
    font-size: 14px;
    height: 44px;
    padding: 0 32px;
  }
}
</style>
