<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"
          ></v-text-field>
        </v-col>
        <v-col cols="12" sm="12" md="6" lg="4">
          <v-menu
            v-model="menu1"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
          >
            <template v-slot:activator="{ on, attrs }">
              <v-text-field
                v-model="createdDate"
                label="Created From"
                persistent-hint
                readonly
                v-bind="attrs"
                v-on="on"
                outlined
                hide-details
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="date1"
              no-title
              @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="4">
          <v-menu
            v-model="menu2"
            :close-on-content-click="false"
            transition="scale-transition"
            offset-y
          >
            <template v-slot:activator="{ on, attrs }">
              <v-text-field
                v-model="toDate"
                label="To"
                persistent-hint
                readonly
                v-bind="attrs"
                v-on="on"
                outlined
                hide-details
              ></v-text-field>
            </template>
            <v-date-picker
              v-model="date2"
              no-title
              @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="searchOrder"
            >
              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.items[0].orderId }}</span>
            </template>
             <template v-slot:item.retailername="{ item }">
              <span>{{  `-` }}</span>
            </template>
             <template v-slot:item.salesrepname="{ item }">
              <span>{{  `-` }}</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 */

export default {
  name: "BoxedOrderHistoryPage",
  components: {},
  data: () => ({
    date1: "",
    date2: "",
    menu1: false,
    menu2: false,
    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: {
    createdDate() {
      return this.formatDate(this.date1);
    },
    toDate() {
      return this.formatDate(this.date2);
    },
    OrderHistory() {
      return this.$store.state.orderlist.OrderHistory.items;
    },
    customerId() {
      return this.$store.state.accountOne.one;
    },
     inProgress() {
      return this.$store.state.orderlist.inProgress;
    },
  },

  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(value) {
      value.preventDeafult();
    },
    orderlistApi() {
      if(this.customerId && this.customerId.id)
      {
        debugger
        this.$store.dispatch("orderlist/fetchOrderList",this.customerId.id);
      }
  },
  },
  watch:
  {
      customerId()
      {
        debugger
        this.orderlistApi();
      }
  },
  created()
  {
 this.orderlistApi();
  }
  
};
</script>
<style src="./boxed_order_history.scss" lang="scss" scoped/>
