import Vue from 'vue';
import initVue from '@assets/js/initVue';
import axiosApi from '@assets/js/axios-api';
import param from '@assets/js/param';

const vm = new Vue({
  components: {
    BaseListing: () => import(/* webpackChunkName: "BaseListing" */ '@elements/BaseListing/index.vue'),
    BaseContent: () => import(/* webpackChunkName: "BaseContent" */ '@elements/BaseContent/index.vue'),
    BaseButton: () => import(/* webpackChunkName: "Basebutton" */ '@elements/BaseButton/index.vue'),
    BaseSearchOrder: () => import(/* webpackChunkName: "BaseSearchOrder" */ '@elements/BaseSearchOrder/index.vue'),
    listPagination: () => import(/* webpackChunkName: "listPagination" */ '@components/ThePagination/index.vue'),
  },
  data() {
    return {
      orders: {},
      showIcon: false,
      searchBar: true,
      pagination: [],
      currentPage: 1,
      limit: 10,
      inputValue: '',
      newPagination: false,
      data: true,
      loader: false,
      allResults: 0,
      textResults: true,
    };
  },
  methods: {
    setData({ orders, order_totals }) {
      this.orders = orders;
      this.transformPrice(this.orders);
      this.allResults = order_totals;
    },
    transformPrice(orders) {
      if (orders) {
        orders.map(item => {
          item.products_slice.map(product => {
            if (product.total_price) {
              const price = parseFloat(product.total_price).toFixed(2);
              const formattedNumber = price.toString().replace('.', ',');
              return (product.price = formattedNumber);
            } else {
              const price = parseFloat(product.price).toFixed(2);
              const formattedNumber = price.toString().replace('.', ',');
              return (product.price = formattedNumber);
            }
          });
        });
      }
    },
    limitText(text, maxLength) {
      if (text) {
        if (text.length > maxLength) {
          return text.substring(0, maxLength) + '...';
        }
        return text;
      }
    },
    orderStatus(orders) {
      if (orders === 'top-border-gray') return 'default';
      if (orders === 'top-border-success') return 'success';
      if (orders === 'top-border-error') return 'error';
    },
    changeSearch() {
      this.searchBar = !this.searchBar;
    },
    clearSearch() {
      this.inputValue = '';
      this.filter(this.inputValue);
      this.$refs.search.clearInput();
      this.$refs.search2.clearInput();
      this.textResults = true;
    },
    page(value) {
      this.currentPage = value;
      this.filter(this.inputValue, false);
    },
    filter(value, isSearchBar) {
      if (isSearchBar) {
        this.currentPage = 1;
      }

      this.newPagination = true;
      this.loader = true;
      this.$refs.search.loaderInput(this.loader);
      this.$refs.search2.loaderInput(this.loader);

      axiosApi({
        method: 'POST',
        url: 'index.php?route=account/order/searchOrder',
        data: param({ filters: value, page: this.currentPage }),
      })
        .then(({ data }) => {
          this.data = data;
          this.orders = data.orders;
          this.transformPrice(data.orders);
          this.orderStatus(data.orders);

          if (data.pagination) {
            this.pagination = data.pagination;
          }
          if (data.limit) {
            this.limit = parseInt(data.limit);
          }
          if (data.allResults) {
            this.allResults = data.allResults;
          }
          if(!data){
            this.allResults = 0;
          }

          this.loader = false;
          this.$refs.search.loaderInput(this.loader);
          this.$refs.search2.loaderInput(this.loader);
          this.textResults = false;

          if (!value) {
            this.textResults = true;
          }
        })
        .catch(err => console.log(err, err.response));
    },
  },
  watch: {},
  mounted() {},
});

initVue(vm);
