<template>
    <v-app id="pages-dasboard">
      <!-- ****** EXISTING-USER TABLE DATA****** -->
      <v-card flat>
        <v-card-actions>

          <!-- <v-layout>

            <h4 class="right mt-2 ml-2">User Attendence</h4>

          </v-layout>-->

          <v-spacer></v-spacer>
        </v-card-actions>
      </v-card>
      <v-data-table
        :headers="headers"
        :items="desserts"
        :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.email }}</td>
          <td id="td" class="text-xs-center">{{ dates(props.item.dob) }}</td>
          <td id="td" class="text-xs-center">{{ dates(props.item.joiningDate)}}</td>
          <td id="td" class="text-xs-center">{{ props.item.phone }}</td>
          <td class="text-xs-center">
            <span>
              <img
                style="cursor:pointer; width:25px; height:18px; "
                class="mr-5"
                @click="profile(props.item)"
                src="/static/icon/eye1.png"
              />
              <!-- <img
                style="cursor:pointer; width:20px; height:18px; "
                class="mr-5"
                @click="editItem(props.item)"
                src="/static/icon/edit1.png"
              />
              <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>
    </v-app>
  </template>
  
  <script>
  import http from "@/Services/http.js";
  import moment from "moment";
  
  export default {
    data: () => ({
      showLoader: false,
      search: "",
      pagination: {

        rowsPerPage: 15,

      },
      headers: [
        {
          text: "No",
          align: "center",
          sortable: false,

          value: "No",

        },
        {
          text: "Profile Pic",
          value: "profilePicUrl",
          sortable: false,

          align: "center",

        },
        { text: "Name", value: "name", sortable: false, align: "center" },
        { text: "Email", value: "email", sortable: false, align: "center" },
        { text: "DOB", value: "dob", sortable: false, align: "center" },
        {
          text: "Joining Date",
          value: "joiningDate",
          sortable: false,

          align: "center",

        },
        {
          text: "Phone",
          value: "phone",
          sortable: false,

          align: "center",

        },

        { text: "Action", value: "", sortable: false, align: "center" },

      ],

      desserts: [],

    }),
    methods: {

      dates: function (date) {

        return moment(date).format("MMMM DD, YYYY");
      },
      getUsersList() {
        this.showLoader = true;
        var token = this.$store.state.token;
        http()
          .get("/getUsersList", {

            headers: { Authorization: "Bearer " + token },

          })

          .then((response) => {

            this.desserts = response.data.data;
            this.showLoader = false;

            //   console.log("UserList=====>", this.desserts);

          })

          .catch((error) => {

            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);
            }
          });
      },
      getRole() {
        this.showLoader = true;
        var token = this.$store.state.token;
        http()
          .get("/getRolesList", {

            headers: { Authorization: "Bearer " + token },

          })

          .then((response) => {

            this.userRole = response.data.data;
            this.showLoader = false;
            // console.log("UserList=====>",this.desserts)
          })

          .catch((error) => {

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

      },

    },
    mounted() {
      this.getUsersList();
      this.getRole();
    },
    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>