<template>
<div>


  <table-view :columns="columns" :data-source="fetch" :page-size="pageSize" :page="pagination.page" :page-count="pagination.pageCount" :total-count="pagination.totalCount" @row-click="showDump" :mouse-over="true"></table-view>
</div>
</template>

<script>
import TableView from "@/components/UI/TableView.vue";
import performRequest from "@/backend.js";
import {config} from "@/config.js";
import Box from "@/components/UI/Box.vue";
import JsonTreeViewer from "@/components/UI/JsonTreeViewer.vue";
import BasicButton from "@/components/UI/BasicButton.vue";
import Modal from "@/components/UI/Modal.vue";

export default {
  name: "CalculationDumpList",
  components: {Modal, BasicButton, JsonTreeViewer, Box, TableView},
  methods: {
    showDump(dump) {
      this.$router.push({name: 'dev-calculation-dump', params: {id: dump.id}});
    },
    async fetch(query) {

      const params = new URLSearchParams();
      if (query?.searchTerm && query.searchTerm !== '')
        params.append('filter', query.searchTerm);
      if(query?.periodId)
        params.append('valid', query.periodId);

      if(query?.page)
        params.append('page', query.page);

      if(query?.pageSize)
        params.append('limit', query.pageSize);

      const resp = await performRequest(null, "GET", `${config.backendUrl}/dev/dump/${params.size === 0 ? '' : '?'}${params.toString()}`, null);
      this.dump = resp.data;
      this.pagination = { page: parseInt(resp.headers.get('X-Current-Page')), pageCount: parseInt(resp.headers.get('X-Page-Count')), totalCount: parseInt(resp.headers.get('X-Total-Count'))};

      return this.dump;

    }
  },
  data() {
    return {

      dump: null,

      pageSize: 20,
      pagination: {page: 1, pageCount: 1, totalCount: 1},
      columns: [
        {
          key: 'id',
          label: 'ID',
        },
        {
          key: 'calculation_date',
          label: 'Calculation date',
        },
        {
          key: 'job_state',
          label: 'State',
        },
        {
          key: 'user_id',
          label: 'User ID',
        },
        {
          key: 'premise.material.part_number',
          label: 'Material',
        },
        {
          key: 'premise.supplier.name',
          label: 'Supplier',
        },
        {
          key: 'premise.destinations',
          label: 'Destinations',
          formatter: (value) => {
            return value.map(v => v.destination_node.name).join(', ');
          }
        },
      ],
    }
  }
}
</script>


<style scoped>

</style>