<template>

    <v-container fluid class="body-color">
      <!-- ****** PAYMENT HOISTORY TABLE ****** -->
      <v-toolbar color="transparent" flat>
        <v-spacer></v-spacer>
        <v-card-title class="body-1" v-show="show">
          <v-btn icon large flat @click="displaySearch">
            <v-avatar size="27">

              <img src="/static/icon/search.png" alt="icon" />

            </v-avatar>
          </v-btn>
        </v-card-title>
        <v-flex xs8 sm8 md3 lg2 v-show="showSearch">

          <v-layout>

            <v-text-field v-model="search" label="Search" prepend-inner-icon="search" color="primary"></v-text-field>
            <v-icon @click="closeSearch" color="error">close</v-icon>

          </v-layout>

        </v-flex>
      </v-toolbar>

      <v-data-table
        :headers="headers"
        :items="paymentHistory"
        :pagination.sync="pagination"
        :search="search"
      >
        <template slot="items" slot-scope="props">

          <tr class="tr">
            <td class="td td-row ">{{ props.index + 1 }}</td>

            <!-- <td class="td td-row text-xs-center">{{ props.item.studentId.name }}</td> -->

            <td class="td td-row text-xs-center">{{ props.item.classId.classNum }}</td>
            <td class="td td-row text-xs-center">{{ props.item.feeType[0].feeTypeName }}</td>
            <td class="td td-row text-xs-center">{{ props.item.paymentMethod }}</td>
            <td class="td td-row text-xs-center">{{ props.item.totalPaidAmount }}</td>
            <td class="td td-row text-xs-center">{{ dates(props.item.date) }}</td>
            <!-- <td class="text-xs-center">

            <span>

              <v-tooltip top>
                <img
                  slot="activator"
                  style="cursor:pointer; width:20px; height:18px; "
                  class="mr-5"
                  @click="editItem(props.item)"
                  src="/static/icon/edit1.png"
                />
                <span>Edit</span>
              </v-tooltip>
              <v-tooltip top>
                <img
                  slot="activator"
                  style="cursor:pointer;width:20px; height:20px; "
                  class="mr-5"
                  @click="deleteItem(props.item)"
                  src="/static/icon/delete1.png"
                />
                <span>Delete</span>
              </v-tooltip>

            </span>

            </td>-->
          </tr>

        </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-container>

  </template>
  
  <script>
  import http from "@/Services/http.js";
  import moment from "moment";
  
  export default {
    data: () => ({
      showLoader: false,
      search: "",

      show: true,
      showSearch: false,

      pagination: {

        rowsPerPage: 10

      },
      headers: [
        {
          text: "No",

          align: "",

          sortable: false,
          value: "No"
        },

        // {
        //   text: "Student",
        //   value: "student",
        //   sortable: false,
        //   align: "center"
        // },

        { text: "Class", value: "class", sortable: false, align: "center" },

        {
          text: "Fee Type",
          value: "feeTypeName",
          sortable: false,
          align: "center"
        },
        {
          text: "Method",
          value: "paymentMethod",
          sortable: false,
          align: "center"
        },

        {
          text: "Paid Amount",
          value: "totalPaidAmount",
          sortable: false,
          align: "center"
        },
        {
          text: "Date",
          value: "date",
          sortable: false,
          align: "center"

        }

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

      paymentHistory: [],
      addPaymentHistoryDialog: ""

    }),
    methods: {
      dates: function(date) {
        return moment(date).format("MMMM DD, YYYY");
      },
      getPaymentHistory() {
        this.showLoader = true;
        var token = this.$store.state.token;
        http()
          .get("/getInvoicesList", {

            params: {
              paymentStatus: "FULLY_PAID",
              schoolId: this.$store.state.schoolId
            },

            headers: { Authorization: "Bearer " + token }
          })
          .then(response => {
            this.paymentHistory = response.data.data;
            this.showLoader = false;
          })
          .catch(error => {
            this.showLoader = false;
            if (error.response.status === 401) {
              this.$router.replace({ path: "/" });
              this.$store.dispatch("setToken", null);
              this.$store.dispatch("Id", null);

              this.$store.dispatch("Role", null);

            }
          });

      },
      displaySearch() {
        (this.show = false), (this.showSearch = true);
      },
      closeSearch() {
        this.showSearch = false;
        this.show = true;
        this.search = "";

      }
      // 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.getPaymentHistory();
      // this.getRole();

    }
  };

  </script>