<template>
  <div class="autoship">
    <div class="bg-products">
      <b-row>
        <b-col cols="12">
          <product-filter
            v-model="filters"
            @search-product="searchProduct"
            @clear-search-text="clearSearchText"
            :show-categories-selection="true"
          ></product-filter>
        </b-col>
      </b-row>
      <b-row align-h="between">
        <b-col cols="12" class="pb-3">
          <div class="eshop-products-wrapper">
            <product-list
              identifier="byDzyne-products"
              :simple="false"
              :allow-disable="false"
              :default-sale-type-keys="['repurchase']"
              :products-getter="getProducts"
              :product-quantity-getter="getCartProductQuantity"
              class="m-0"
              loading-check="byDzyne-products"
            >
              <template slot="spinner">
                <div class="text-center my-5 pt-5 vh-75 vw-100">
                  <b-spinner type="grow" variant="primary" />
                  <span class="h3 ml-2">{{ $t('Common.Loading') }}</span>
                </div>
              </template>
            </product-list>
            <pagination
              :disabled="isLoading('byDzyne-products')"
              class="eshop-pagination text-center"
              name="byDzne-products"
              :total="getProductTotal"
              :per-page="12"
              data-qa-prefix="autoship"
            />
            <div
              v-if="!isLoading('byDzyne-products') && getProducts.length < 1"
              class="font-size-5 font-weight-bold p-5 text-center mt-5"
            >
              {{ $t('Eshop.Product.NotFound') }}
            </div>
          </div>
        </b-col>
      </b-row>
    </div>
  </div>
</template>
<script>
import ProductFilter from '@@/app/_global/components/elements/ProductFilter'
import ProductList from '@/app/_global/components/elements/ProductList'
import Pagination from '@/app/_global/components/elements/Pagination'
import { productsMixin } from '@@/app/_global/mixins'
import { mapMasterData } from '@/app/_global/mixins'
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'Autoship',
  mixins: [productsMixin],
  components: { ProductFilter, ProductList, Pagination },
  $_veeValidate: {
    validator: 'new',
  },
  watch: {
    getCartTotal(to) {
      if (to > 0) {
        this.resetError('cartError')
      }
    },
    '$route.params.page': {
      async handler() {
        this.loadProductList()
      },
    },
    filters: {
      async handler() {
        await this.resolveMasters
        this.salesTypesIds = [this.repurchaseSalesTypeId]
        this.productFilters = [this.autoshipFilterKey]
        this.loadProductList()
      },
      deep: true,
    },
  },
  computed: {
    ...mapGetters('eshop', [
      'getProductSortOrder',
      'getProductTotal',
      'getProductsPerPage',
      'getProducts',
      'getCartProductQuantity',
      'getProductSearchName',
      'getCartTotal',
    ]),
    ...mapMasterData({
      SALE_TYPES: {
        repurchaseSalesTypeId: 'RE_PURCHASE',
      },
      PRODUCT_AND_KITTING_FILTERS: {
        autoshipFilterKey: { name: 'PRODUCT_FILTER_AUTOSHIP', type: 'key' },
      },
    }),
  },
  mounted() {
    this.loadCart()
  },
  methods: {
    ...mapActions('eshop', ['loadCart']),
    ...mapActions(['resetError']),
  },
}
</script>
