<template>
  <div>
    <!-- Dialog View -->
    <v-dialog v-model="dialogRiwayat" persistent width="85vw">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          RIWAYAT PURCHASE ORDER BY SUPPLIER
        </v-card-title>

        <v-card-text>
          <v-layout row wrap class="px-2 py-2">
            <!-- TABEL ITEM VIEW -->
            <v-flex xs12>
                <v-data-table :headers="headers" :items="riwayatPoList" :loading="loading" hide-actions class="elevation-1">
                <template v-slot:items="props">
                    <td class="text-xs-center">{{ formatDate(props.item.PurchaseOrderCreated) }}</td>
                    <td class="text-xs-center">{{ props.item.SupplierName }}</td>
                    <td class="text-xs-center">{{ props.item.PurchaseOrderNumber }}</td>
                    <td class="text-xs-right">
                    {{ props.item.PurchaseOrderGrandTotal != null ? oneMoney(props.item.PurchaseOrderGrandTotal) : '0' }}
                    </td>

                    <td class="text-xs-center">
                    <v-chip color="blue" v-if="props.item.PurchaseOrderStatus === 'Draft'" text-color="white">{{
                        props.item.PurchaseOrderStatus }}
                    </v-chip>
                    <v-chip color="warning" v-else-if="props.item.PurchaseOrderStatus === 'Pending'" text-color="white">{{
                        props.item.PurchaseOrderStatus }}
                    </v-chip>
                    <v-chip color="green" v-else-if="props.item.PurchaseOrderStatus === 'Approved'" text-color="white">{{
                        props.item.PurchaseOrderStatus }}
                    </v-chip>
                    <v-chip color="red" v-else-if="props.item.PurchaseOrderStatus === 'Rejected'" text-color="white">{{
                        props.item.PurchaseOrderStatus }}
                    </v-chip>
                    <v-chip color="primary" v-else-if="props.item.PurchaseOrderStatus === 'Completed'" text-color="white">{{
                        props.item.PurchaseOrderStatus }}
                    </v-chip>
                    <v-chip v-else text-color="white">{{ props.item.PurchaseOrderStatus }}
                    </v-chip>
                    </td>
                    <td class="text-xs-center">
                      <v-tooltip bottom>
                        <template v-slot:activator="{ on }">
                          <v-btn icon :disabled="loading" @click="openDialogView(props.item)" v-on="on" class="mx-0 px-0">
                            <v-icon color="blue">visibility</v-icon>
                          </v-btn>
                        </template>
                        <span>View Detail</span>
                      </v-tooltip>
                    </td>
                </template>
                </v-data-table>
            </v-flex>
          </v-layout>
            <v-pagination
              style="margin-top: 10px; margin-bottom: 10px;"
              v-model="currPageRiwayatPo"
              :length="riwayatPoPage"
            ></v-pagination>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green" flat @click="dialogRiwayat = false">
            TUTUP
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      headers: [
        {
          text: "TANGGAL",
          align: "center",
          sortable: false,
          value: "date",
          width: "15%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "SUPPLIER",
          align: "center",
          sortable: false,
          value: "supplier",
          width: "25%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "NO PO",
          align: "center",
          sortable: false,
          value: "PoQty",
          width: "25%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "TOTAL",
          align: "center",
          sortable: false,
          value: "Total",
          width: "15%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "STATUS",
          align: "center",
          sortable: false,
          value: "status",
          width: "10%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sortable: false,
          value: "action",
          width: "10%",
          class: "blue lighten-3 white--text",
        },
      ],
    };
  },
  computed: {
    riwayatPoList() {
      return this.$store.state.po.riwayatPoList;
    },
    dialogRiwayat: {
      get() {
        return this.$store.state.po.dialogRiwayat;
      },
      set(val) {
        this.$store.commit("po/update_dialogRiwayat", val);
      },
    },
    selected_riwayatPo: {
      get() {
        return this.$store.state.po.selected_riwayatPo;
      },
      set(val) {
        this.$store.commit("po/update_selected_riwayatPo", val);
      },
    },
    loading: {
      get() {
        return this.$store.state.po.loading;
      },
      set(val) {
        this.$store.commit("po/update_loading", val);
      },
    },
    riwayatPoPage: {
      get() {
        return this.$store.state.po.riwayatPoPage;
      },
      set(val) {
        this.$store.commit("po/update_riwayatPoPage", val);
      },
    },
    currPageRiwayatPo: {
      get() {
        return this.$store.state.po.currPageRiwayatPo;
      },
      set(val) {
        this.$store.commit("po/update_currPageRiwayatPo", val);
        this.$store.dispatch("po/getPoBySupplier");
      },
    },
    selectedPO: {
      get() {
        return this.$store.state.po.selectedPO;
      },
      set(val) {
        this.$store.commit("po/update_selectedPO", val);
      },
    },
    dialogView: {
      get() {
        return this.$store.state.po.dialogView;
      },
      set(val) {
        this.$store.commit("po/update_dialogView", val);
      },
    },
  },
  methods: {
    openDialogView(data) {
      this.selectedPO = data;
      this.dialogView = true;
      this.dialogRiwayat = false;
      this.$store.dispatch("po/getItemUpdate");
      this.$store.commit("po/update_dialogForm", false);
      // this.$store.dispatch("po/resetForm");
      // this.$store.commit("update_selectedDateForm", moment(new Date()).format('YYYY-MM-DD'));
      // this.$store.commit("update_selectedWarehouse", {});
      // this.$store.commit("update_defaultWarehouse", {});
      // this.$store.commit("update_warehouseType", 'Single');
      // this.$store.commit("update_refNumber", '');
      // this.$store.commit("update_taxPpn", 0);
      // this.$store.commit("update_taxPph", 0);
      // this.$store.commit("update_paymentTerm", 0);
      // this.$store.commit("update_discountType", 'Percentage');
      // this.$store.commit("update_discountAmount", 0);
      // this.$store.commit("update_note", '');
      
      // this.$store.commit("update_selectedItemTemp", []);
      // this.$store.commit("update_selectedItem", []);
      // this.$store.commit("update_deletedItem", []);
      // this.$store.commit("update_selectedItemCategory", {});
      // this.$store.commit("update_summary", []);

      // this.$store.commit("update_shippingCost", 0);
      // this.$store.commit("update_shippingCostStatus", true);
      
      // this.$store.commit("update_itemList", []);
      // this.$store.commit("update_searchItem", '');

      // this.$store.commit("update_warehouseList", []);
      // this.$store.commit("update_searchSupplier", 'null');
      // this.$store.commit("update_supplierList", []);
      // this.$store.commit("update_summaryTotal", {
      //     total: 0,
      //     tax: 0,
      //     ppn: 0,
      //     pph: 0,
      //     discount: 0,
      //     finalTotal: 0,
      // });
      // this.$store.commit("update_itemTotal", {
      //     total: 0,
      //     tax: 0,
      //     ppn: 0,
      //     pph: 0,
      //     discount: 0,
      //     finalTotal: 0,
      // });
    },
    formatDate(date) {
      if (!date) return null;

      // Pisahkan tanggal dan waktu
      const [datePart, timePart] = date.split(" ");

      const [year, month, day] = datePart.split("-");
      let formatted = `${day}-${month}-${year}`;

      if (timePart) {
          const [hour, minute, second] = timePart.split(":");
          formatted += ` ${hour}:${minute}:${second}`;
      }

      return formatted;
    },
    oneMoney(value) {
      //return one_money(value);
      // let splitValue = value.toString().split(".");
      // if(splitValue.length > 1) {
      //     let val = splitValue[0]
      //     return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "," + this.roundToThreeSignificantDigits(splitValue[1]);
      // } else {
      //     return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
      // }
      // Ubah ke float jika belum angka
      if (typeof value !== 'number') {
        value = parseFloat(value);
      }

      if (isNaN(value)) return '0,00';

      // Bulatkan dulu ke 2 desimal
      const fixed = value.toFixed(2); // hasil string, misal "16200000.00" atau "123456.70"
      const splitValue = fixed.split(".");

      const val = splitValue[0];       // bagian ribuan
      const decimal = splitValue[1];   // bagian desimal

      const formatted = val.replace(/\B(?=(\d{3})+(?!\d))/g, ".");

      return `${formatted},${decimal}`;
    },
  },
};
</script>

<style scoped>
.label-value subheading mb-2 {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.label {
  font-weight: bold;
  margin-bottom: 0.25rem;
}

.value {
  font-size: 1rem;
}
</style>
