<template>
    <div>
      <v-snackbar
        :timeout="timeout"
        :top="y === 'top'"
        :right="x === 'right'"
        :vertical="mode === 'vertical'"
        v-model="snackbar"
        color="success"
      >{{ text }}</v-snackbar>
  
      <!-- ****** EXISTING STUDENTS TABLE ****** -->
  
      <v-card flat>

        <h4
          class="text-xs-center pt-4 ml-2 hidden-lg-only hidden-xl-only hidden-md-only"
        >Student Attendence</h4>

        <v-card-actions>
          <v-layout>

            <h3 class="right mt-2 ml-2 hidden-sm-only hidden-xs-only">Student Attendence</h3>
            <!-- <download-csv :data="json_data">
              <v-btn>Download Data</v-btn>
            </download-csv>-->

          </v-layout>
          <v-spacer></v-spacer>

          <v-flex xs12 sm4 md2>

            <v-select
              outline
              small
              :items="addclass"
              label="Select Class"
              v-model="selectStudents.select"
              item-text="classNum"
              item-value="_id"
              name="Select Class"
              @change="getSections(selectStudents.select)"
              class="px-2"
              required
            ></v-select>
          </v-flex>
        </v-card-actions>
      </v-card>
      <v-data-table
        :headers="headers"
        :items="studentsList"
        :pagination.sync="pagination"
        :search="search"
      >
        <template slot="items" slot-scope="props">
          <td id="td" class="text-xs-center">{{ props.index + 1}}</td>
          <td id="td" class="text-xs-center">
            <v-avatar>
              <img :src="props.item.profilePicUrl" v-if="props.item.profilePicUrl" />
              <img src="/static/icon/user.png" v-else-if="!props.item.profilePicUrl" />
            </v-avatar>
          </td>
          <td id="td" class="text-xs-center">{{ props.item.name}}</td>
          <td id="td" class="text-xs-center">{{ props.item.rollNo}}</td>
          <td id="td" class="text-xs-center">{{ props.item.email }}</td>
          <td class="text-xs-center">
            <router-link :to="{ name:'ViewStudentsAttendence',params: { id:props.item._id } }">
              <img
                style="cursor:pointer; width:20px; height:18px; "
                class="mr-5"
                src="/static/icon/edit1.png"
              />
            </router-link>
            <img
              style="cursor:pointer;width:20px; height:20px; "
              class="mr-5"
              @click="deleteItem(props.item)"
              src="/static/icon/delete1.png"
            />
            <!-- </span> -->
          </td>
        </template>
        <v-alert
          slot="no-results"
          :value="true"
          color="error"
          icon="warning"
        >Your search for "{{ search }}" found no results.</v-alert>
      </v-data-table>
      <div class="loader" v-if="showLoader">
        <v-progress-circular indeterminate color="white"></v-progress-circular>
      </div>
    </div>
  </template>
  
  <script>
  import http from "@/Services/http.js";

  // import Util from "@/util";

  import moment from "moment";
  
  export default {
    data: () => ({
      snackbar: false,
      y: "top",
      x: "right",
      mode: "",
      timeout: 3000,
      text: "",
      showLoader: false,
      loading: false,
      date: null,
      search: "",
      addclass: [],
      pagination: {
        rowsPerPage: 15
      },
      imageData: {},
      imageName: "",
      imageUrl: "",
      imageFile: "",
      headers: [
        {
          text: "No",
          align: "center",
          sortable: false,
          value: "index"
        },
        {
          text: "Profile Pic",
          value: "profilprofilePicUrlePicUrl",
          sortable: false,
          align: "center"
        },
        { text: "Name", value: "name", sortable: false, align: "center" },
        { text: "Roll No", value: "rollNo", sortable: false, align: "center" },
        { text: "Email", value: "email", sortable: false, align: "center" },
        { text: "Action", value: "", sortable: false, align: "center" }
      ],

      // json_data: [],

      studentsList: [],
      parentId: "",
      token: "",
      selectStudents: {
        select: "",
        selectSection: ""
      }
    }),
    methods: {
      getSections(_id) {

        this.showLoader = true;

        var token = this.$store.state.token;
        http()
          .get(
            "/getStudentsList",
            { params: { classId: _id } },
            {
              headers: { Authorization: "Bearer " + token }
            }
          )
          .then(response => {

            this.showLoader = false;

            this.studentsList = response.data.data;
            console.log("getSectionsList=====>", response.data.data);
          })

          .catch(error => {

            // console.log("err====>", err);

            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }

          });
      },
      getAllClass() {
        http()
          .get("/getClassesList", {
            headers: { Authorization: "Bearer " + this.token }
          })
          .then(response => {
            this.addclass = response.data.data;
          })
          .catch(err => {
            // console.log("err====>", err);

            // this.$router.replace({ path: "/" });

          });
      }
    },
    mounted() {
      // this.getStudentList();
      this.token = this.$store.state.token;
      this.getAllClass();
    },
    created() {
      this.$root.$on("app:search", search => {
        this.search = search;
      });
    },
    beforeDestroy() {
      // dont forget to remove the listener
      this.$root.$off("app:search");
    }
  };
  </script>
  <style scoped>
  .active {
    background-color: gray;
    color: white !important;
  }
  .activebtn {
    color: black !important;
  }
  </style>