<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"
            color="primary"
            variant="outlined"
            hide-details
            v-model="orderNumber"
            density="compact"
          ></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, props }">
              <v-text-field
                v-model="dateAtFormatted"
                label="Created From"
                variant="outlined"
                density="compact"
                 color="primary"
                hide-details
                readonly
                 v-bind="props"
                v-on="on"
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="createdFrom"
              @input="menu1 = false"
            ></v-date-picker>
          </v-menu> -->
          <v-text-field
          type="date"                  
          v-model="createdFrom"
          placeholder="Created From"
          density="compact"
          variant="outlined"
          label="Created From"
          color="primary pt-0"

          >
          </v-text-field>
        </v-col>

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

        <v-col cols="12" sm="12" md="6" lg="5">

          <v-text-field
          type="date"                  
          v-model="createdTo"
          placeholder="To"
          density="compact"
          variant="outlined"
          label="To"
          color="primary pt-0"

          >
          </v-text-field>

        <!--  <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, props }">
              <v-text-field
                v-model="dateToFormatted"
                label="To"
                variant="outlined"
                density="compact"
                hide-details
                 color="primary"
                readonly
                  v-bind="props"
                v-on="on"
                type="date"
              
              ></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="{  isHovering, props  }">
            <v-btn
              :class="isHovering ? 'text-white bg-warning  ' : 'text-warning warning'"
              class="width-250px"
              variant="outlined"
              v-bind="props"
              @click="reset"
            >
              Reset
            </v-btn>
          </v-hover>
        </v-col>
        <v-col cols="12" sm="12" md="6" lg="3">
          <v-hover v-slot:default="{ isHovering, props }">
            <v-btn
            :class="isHovering ? 'text-white bg-warning  ' : 'text-warning warning'"
              class="width-250px"
               v-bind="props"
                  variant="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="{  isHovering, props }">
            <router-link
              class="text-decoration-none"
              :to="{ name: 'CartProducts' }"
            >
              <v-btn
               :class="isHovering ? 'text-white bg-primary ' : 'text-primary primary'"
                   variant="outlined"
                class="width-250px"
                   v-bind="props"
              >
                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"
              >
                <template v-slot:item.date="{ item }">
                  <span>{{ isoStringToNormalDate(item.value.updatedAt) }}</span>
                </template>
                <template v-slot:item.order="{ item }">
                  <span>{{ item.value.incrementId }}</span>
                </template>
                
                <template v-slot:item.salesrepname="{ item }">
                  <span>{{ userInfo.firstname + "" + userInfo.lastname }}</span>
                </template>
                <template v-slot:item.status="{ item }">
                  <span>{{ item.value.status }}</span>
                </template>
                <template v-slot:item.POnumber="{ item }">
                  <span>{{ item.value.payment.poNumber }}</span>
                </template>
                  
                   <template v-slot:item.actions={item}>

              <v-hover v-slot="{ isHovering, props }">
                        <router-link
                          :class="isHovering ? 'content-link-hover-color' : 'text-primary'"
                          to
                          :variant="isHovering?'outlined':''"
                          v-bind="props"
                          @click.stop="viewMyOrder(item.value.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: () => ({
    visible:false,
    menu1: false,
    menu2: false,
   dateAtFormatted:"",
   dateToFormatted:"",
    headers: [
      { title: "Date", key: "date" , sortable: false },
      { title: "Order #", key: "order" , sortable: false},
      { title: "Sales Rep Name", key: "salesrepname" , sortable: false},
      { title: "Status", key: "status" , sortable: false},
      { title: "PO Number", key: "POnumber" , sortable: false},
      { title: "Action", key: "actions" , sortable: false},
    ],
  }),
  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/>
