<template>
  <div id="rpsync-dashboard">
    <b-table
      :data="results.products"
      :loading="isLoading"
      detailed
      hoverable
      narrowed
      paginated
      backend-pagination
      :total="results.total"
      :per-page="args.perPage"
      backend-filtering
      backend-sorting
      :default-sort="[args.sorting.orderby, args.sorting.order]"
      @page-change="onPageChange"
      @filters-change="onFiltersChange"
      @sort="onSortChange"
    >
      <!-- # Référence -->
      <b-table-column field="numref" label="# Référence" width="128" searchable sortable>
        <template #searchable>
          <b-input
            :data="args.filters['numref']"
            size="is-small"
            @change.native="args.filters['numref'] = $event.target.value"
          />
        </template>
        <template #default="props">
          {{ props.row.numref }}
        </template>
      </b-table-column>
      <!-- Nom du produit -->
      <b-table-column field="title" label="Nom du produit" searchable sortable>
        <template #searchable>
          <b-input
            :data="args.filters['title']"
            size="is-small"
            @change.native="args.filters['title'] = $event.target.value"
          />
        </template>
        <template #default="props">
          {{ props.row.title }}
        </template>
      </b-table-column>
      <!-- Marque -->
      <b-table-column field="brand" label="Marque" searchable sortable>
        <template #searchable>
          <b-select v-model="args.filters['brand']" size="is-small">
            <option value="">Toutes les marques</option>
            <option v-for="(brand, i) in filterOptions.brands" :key="i" :value="brand">
              {{ brand }}
            </option>
          </b-select>
        </template>
        <template #default="props">
          {{ props.row.skus[Object.keys(props.row.skus)[0]].brand }}
        </template>
      </b-table-column>
      <!-- Département -->
      <b-table-column field="department" label="Département" searchable sortable>
        <template #searchable>
          <b-select v-model="args.filters['department']" size="is-small">
            <option value="">Tous les départements</option>
            <option v-for="(department, i) in filterOptions.departments" :key="i" :value="department">
              {{ department }}
            </option>
          </b-select>
        </template>
        <template #default="props">
          {{ props.row.skus[Object.keys(props.row.skus)[0]].department }}
        </template>
      </b-table-column>
      <!-- Saison -->
      <b-table-column field="season" label="Saison" searchable sortable>
        <template #searchable>
          <b-select v-model="args.filters['season']" size="is-small">
            <option value="">Toutes les saisons</option>
            <option v-for="(season, i) in filterOptions.seasons" :key="i" :value="season">
              {{ season }}
            </option>
          </b-select>
        </template>
        <template #default="props">
          {{ props.row.skus[Object.keys(props.row.skus)[0]].season }}
        </template>
      </b-table-column>
      <!-- WooCommerce -->
      <b-table-column field="product_id" label="WooCommerce" width="128" centered searchable>
        <template #searchable>
          <b-select v-model="args.filters['product_id']" size="is-small">
            <option value="">Tous</option>
            <option value="existing">Existant</option>
            <option value="missing">Manquant</option>
          </b-select>
        </template>
        <template #default="props">
          <rpsync-dashboard-actions :product="props.row" />
        </template>
      </b-table-column>
      <template #detail="props">
        <rpsync-dashboard-detail :product="props.row" />
      </template>
      <template #empty>
        <div class="has-text-centered my-5">Aucun résultat</div>
      </template>
    </b-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from "@vue/composition-api";
import { useRPSync } from "../composables/rpsync";
import RpsyncDashboardActions from "./rpsync-dashboard-actions.vue";
import RpsyncDashboardDetail from "./rpsync-dashboard-detail.vue";

export default defineComponent({
  components: { RpsyncDashboardActions, RpsyncDashboardDetail },
  setup() {
    const { args, filterOptions, isLoading, results, fetch } = useRPSync();

    onMounted(async () => await fetch());

    const onFiltersChange = (newFilters) => (args.filters = newFilters);
    const onPageChange = (newPage) => (args.curPage = newPage);
    const onSortChange = (field, order) => {
      args.sorting.orderby = field;
      args.sorting.order = order;
    };

    return { args, filterOptions, isLoading, results, onFiltersChange, onPageChange, onSortChange };
  },
});
</script>

<style>
#rpsync-dashboard select {
  background: none !important;
}
</style>
