<template>
  <v-container>
    <div class="h3 my-5 py-5 body-font1">Order Management</div>
    <v-form>
      <v-row
        class="
          d-flex
          justify-center
          align-center align-md-baseline
          justify-md-start
        "
      >
        <v-col cols="12" sm="12" md="12" lg="12">
          <v-text-field
            label="Order Number"
            persistent-hint
            outlined
            hide-details
            v-model="orderNumber"
            dense
          ></v-text-field>
        </v-col>
        <v-col cols="12" sm="12" md="6" lg="5">
          <v-menu
            v-model="menu1"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="auto"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-text-field
                v-model="dateAtFormatted"
                label="Created From"
                persistent-hint
                outlined
                hide-details
                dense
                readonly
                v-bind="attrs"
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="createdFrom"
              @input="menu1 = false"
            ></v-date-picker>
          </v-menu>
        </v-col>

        <div class="pt-md-7">-</div>

        <v-col cols="12" sm="12" md="6" lg="5">
          <v-menu
            v-model="menu2"
            :close-on-content-click="false"
            :nudge-right="40"
            transition="scale-transition"
            offset-y
            min-width="auto"
          >
            <template v-slot:activator="{ on, attrs }">
              <v-text-field
                v-model=" dateToFormatted"
                label="To"
                persistent-hint
                outlined
                hide-details
                dense
                readonly
                v-bind="attrs"
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="createdTo"
              @input="menu2 = false"
            ></v-date-picker>
          </v-menu>
        </v-col>

        <!-- <v-col cols="12" sm="12" md="12" lg="12">
          <v-text-field
            label="Purchase Order Number"
            persistent-hint
            outlined
            hide-details
            v-model="purchaseOrderNumber"
          ></v-text-field>
        </v-col> -->
        <v-col cols="12" sm="12" md="6" lg="3">
          <v-hover v-slot:default="{ hover }">
            <v-btn
              :class="hover ? 'white--text  warning' : 'warning--text'"
              class="width-250px"
              outlined
              @click="reset"
            >
              Reset
            </v-btn>
          </v-hover>
        </v-col>
        <v-col cols="12" sm="12" md="6" lg="3">
          <v-hover v-slot:default="{ hover }">
            <v-btn
              :class="hover ? 'white--text  warning' : 'warning--text'"
              class="width-250px"
              outlined
              @click.prevent="orderlistApi"
            >
              Search
            </v-btn>
          </v-hover>
        </v-col>
        <v-col cols="12" sm="12" md="6" lg="3">
          <v-hover v-slot:default="{ hover }">
            <router-link
              class="text-decoration-none"
              :to="{ name: 'CartProducts' }"
            >
              <v-btn
                :class="hover ? 'white--text  primary' : 'primary--text'"
                class="width-250px"
                outlined
              >
                New Order
              </v-btn>
            </router-link>
          </v-hover>
        </v-col>
        <v-col cols="12" sm="12" md="12" lg="12">
          <v-row class="mt-12" justify="center" v-if="inProgress">
            <v-progress-circular
              :size="60"
              color="primary"
              indeterminate
            ></v-progress-circular>
          </v-row>
          <v-row no-gutters v-else>
            <v-col>
              <v-data-table
                :headers="headers"
                :items="OrderHistory"
                :items-per-page="10"
                class="elevation-1 pt-5"
              >
                <template v-slot:item.date="{ item }">
                  <span>{{ isoStringToNormalDate(item.updatedAt) }}</span>
                </template>
                <template v-slot:item.order="{ item }">
                  <span>{{ item.incrementId }}</span>
                </template>
                <template v-slot:item.retailername="{ item }">
                  <span>{{ userInfo.firstname + "" + userInfo.lastname }}</span>
                </template>
                <template v-slot:item.salesrepname="{ item }">
                  <span>{{ userInfo.firstname + "" + userInfo.lastname }}</span>
                </template>
                <template v-slot:item.status="{ item }">
                  <span>{{ item.status }}</span>
                </template>
                <template v-slot:item.POnumber="{ item }">
                  <span>{{ item.payment.poNumber }}</span>
                </template>
                <template v-slot:item.action="{ item }">
                  <v-hover v-slot:default="{ hover }">
                    <router-link
                      :class="
                        hover ? 'content-link-hover-color' : 'secondary--text'
                      "
                      to
                      @click.native="viewMyOrder(item.items[0].orderId)"
                      class="
                        ls-n009
                        text-decoration-none
                        body
                        myorders-route-link
                      "
                      >View Order</router-link
                    >
                  </v-hover>
                </template>
              </v-data-table>
            </v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-form>
  </v-container>
</template>                                                                             
<script>
/* eslint-disable no-alert, no-console ,  no-debugger */
import { createHelpers } from "vuex-map-fields";

const { mapFields } = createHelpers({
  getterType: "orderlist/getField",
  mutationType: "orderlist/updateField",
});

export default {
  name: "BoxedOrderHistoryPage",
  components: {},
  data: () => ({
    menu1: false,
    menu2: false,
   dateAtFormatted:"",
   dateToFormatted:"",
    headers: [
      { text: "Date", value: "date" },
      { text: "Order #", value: "order" },
      { text: "Retailer Name", value: "retailername" },
      { text: "Sales Rep Name", value: "salesrepname" },
      { text: "Status", value: "status" },
      { text: "PO Number", value: "POnumber" },
      { text: "Action", value: "action" },
    ],
  }),
  computed: {
    OrderHistory() {
      return this.$store.state.orderlist.OrderHistory.items;
    },
    userInfo() {
      return this.$store.state.accountOne.one;
    },

    inProgress() {
      return this.$store.state.orderlist.inProgress;
    },
    ...mapFields(["orderNumber","createdFrom","createdTo"]),
  },

  methods: {
    viewMyOrder(itemId) {
      this.$store.dispatch("orderlist/fetchOrderList", itemId);
      this.$router
        .push({
          name: "ViewProduct",
          params: { orderId: itemId },
        })
        .catch((error) => {
          error;
        });
    },
    formatDate(date) {
      if (!date) return null;
      const [year, month, day] = date.split("-");
      return `${month}/${day}/${year}`;
    },
    isoStringToNormalDate(date) {
      let newDateTime = Date.parse(date);
      let tmp = new Date(newDateTime).toLocaleDateString().split("/");
      return (date = tmp[1] + "/" + tmp[0] + "/" + tmp[2]);
    },
    // searchOrder() {
    //   this.$store.dispatch("orderlist/fetchSearchOrder");
    // },
    reset() {
      this.$store.dispatch("orderlist/fetchReset", this.userInfo.id);
    },
    orderlistApi() {
      if (this.userInfo && this.userInfo.id) {
        this.$store.dispatch("orderlist/fetchOrderList", this.userInfo.id);
      }
    },
  },
  watch: {
    userInfo() {
      this.orderlistApi();
    },
    createdFrom () {
        this.dateAtFormatted = this.formatDate(this.createdFrom)
    },
     createdTo () {
        this.dateToFormatted = this.formatDate(this.createdTo)
    },
  },
  created() {
    this.orderlistApi();
  },
};
</script>
<style src="./boxed_order_history.scss" lang="scss" scoped/>
