<template>
  <div class="nodes-container">
    <table-view ref="tableViewRef" :data-source="fetch" :columns="nodeColumns" :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 {useNodeStore} from "@/store/node.js";

export default {
  name: "Nodes",
  props: {
    isSelected: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    async isSelected(newVal) {
      if(newVal === true) {
        await this.nodeStore.loadNodes();
      }
    }
  },
  components: {TableView},
  computed: {
    ...mapStores(useNodeStore),
  },
  created() {
    this.nodeStore.loadNodes()
  },
  methods: {
    async fetch(query) {
      await this.nodeStore.setQuery(query);
      this.pagination = this.nodeStore.pagination;
      return this.nodeStore.nodes;
    }
  },
  data() {
    return {
      nodeColumns: [
        {
          key: 'external_mapping_id',
          label: 'Mapping ID',
        },
        {
          key: 'name',
          label: 'Name',
        },
        {
          key: 'address',
          label: 'Address',
        },
        {
          key: 'country.iso_code',
          label: 'Country',
          showFlag: true
        },
        {
          key: 'types',
          label: 'Type',
          formatter: (value) => {
            return value.map(v => String(v).charAt(0).toUpperCase() + String(v).slice(1).toLowerCase()).join(', ');
          }
        },
        {
          key: 'is_deprecated',
          label: 'active',
          formatter: (value) => {
            return !value ? 'Yes' : 'No';
          }
        },
      ],
      pagination: {
        page: 1,
        pageCount: 1,
        totalCount: 0
      },
      pageSize: 20
    }
  }
}
</script>


<style scoped>

.nodes-container {
  padding: 2.4rem;
}

</style>