<template>
  <div class="materials-container">
    <table-view ref="tableViewRef" :data-source="fetch" :columns="materialColumns" :page="pagination.page"
                :page-size="pageSize" :page-count="pagination.pageCount"
                :total-count="pagination.totalCount"></table-view>
  </div>

</template>

<script>
import TableView from "@/components/UI/TableView.vue";
import {mapStores} from "pinia";
import {useMaterialStore} from "@/store/material.js";

export default {
  name: "materials",
  components: {TableView},
  computed: {
    ...mapStores(useMaterialStore),
  },
  props: {
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    async isSelected(newVal) {
      if(newVal === true) {
        await this.materialStore.updateMaterials();
      }
    }
  },
  methods: {
    async fetch(query) {
      await this.materialStore.setQueryForList(query);
      this.pagination = this.materialStore.pagination;
      return this.materialStore.materials;
    }
  },
  data() {
    return {
      materialColumns: [
        {
          key: 'part_number',
          label: 'Part number',
        },
        {
          key: 'name',
          label: 'Description',
        },
        {
          key: 'hs_code',
          label: 'HS Code',
        },
        {
          key: 'is_deprecated',
          label: 'active',
          formatter: (value) => {
            return !value ? 'Yes' : 'No';
          }
        },
      ],
      pagination: {
        page: 1,
        pageCount: 1,
        totalCount: 0
      },
      pageSize: 20
    }
  }
}
</script>


<style scoped>
.materials-container {
  padding: 2.4rem;
}

</style>