<template>
  <v-container>
    <v-toolbar>
      <v-toolbar-title> Cuadres del Tarro </v-toolbar-title>
    </v-toolbar>
    <v-card>
      <v-card-text>
        <v-data-table-server
          v-model:items-per-page="itemsPerPage"
          :headers="headers"
          :items="serverItems"
          :items-length="totalItems"
          :loading="loading"
          :search="search"
          @update:options="loadItems"
        >
          <template v-slot:item.id="{ item }">
            <v-btn @click="openSummaryModal(item.id)">{{ item.id }}</v-btn>
          </template>
        </v-data-table-server>
        <SummaryReconciliationModal :id="selectedReconciliationId" ref="summaryModal" />
      </v-card-text>
    </v-card>
  </v-container>
</template>
<script>
  export default {
    data() {
      return {
        api: inject('api'),
        selectedReconciliationId: null,
        itemsPerPage: 10,
        headers: [
          { title: 'Acciones', key: 'id'},
          { title: 'Fecha', key: 'date_time'},
          { title: 'Reconciliador', key: 'reconcilier'},
          { title: 'Total Compras Efectivo', key: 'total_cash_purchases'},
          { title: 'Recogido', key: 'cash_taken'},
          { title: 'Descuadre', key: 'cash_discrepancy'},
        ],
        search: '',
        serverItems: [],
        loading: true,
        totalItems: 0,
      }
    },
    methods: {
      loadItems ({page, itemsPerPage}) {
        this.loading = true;
        this.api.getListReconcliations(page, itemsPerPage)
            .then(data => {
              this.serverItems = data['results'];
              this.totalItems = data['count'];
              this.loading = false;
            })
            .catch(error => console.log('Error:', error));
      },
      openSummaryModal(id) {
        this.selectedReconciliationId = id.toString();
        this.$refs.summaryModal.dialog = true;
      },
    },
  }
</script>
