<template>
    <v-layout row justify-center>
      <v-dialog v-model="dialogUnit" persistent max-width="25%">
        <v-card>
          <v-card-title class="title grey lighten-2" primary-title>
            Ganti Satuan {{ selectedItemUsage.M_ItemDesc ? selectedItemUsage.M_ItemDesc : "" }}
          </v-card-title>
          <v-card-text>
            <v-layout row>
              <v-flex xs12>
                <v-select 
                  :loading="loadingUnit" 
                  v-model="selectedUnit" 
                  return-object 
                  :items="unitOptions" 
                  label="Pilih Satuan" 
                  item-text="ItemUnitName" 
                ></v-select>
              </v-flex>
            </v-layout>
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="error" flat @click="dialogUnit = false">
              Tutup
            </v-btn>
            <v-btn color="primary" flat @click="saveUnit()">Ganti</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
      <v-dialog v-model="dialogform" persistent max-width="75%">
        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>
            Detail Pemakaian
          </v-card-title>
          <v-card-text class="pt-2 pb-0">

            <v-layout row wrap>
                <v-flex xs12 pa-2>
                    <p class="mb-0"><strong>Item:</strong> {{ selectedItemUsage.M_ItemDesc }}</p>
                    <p class="mb-0"><strong>Unit:</strong> {{ selectedItemUsage.ItemUnitName }}</p>
                    <p class="mb-0"><strong>Jumlah Stock:</strong> {{ selectedItemUsage.TotalStockQtyReq }}</p>
                </v-flex>
            </v-layout>

            <v-card flat class=" mt-2">
              <v-layout row style="max-height: 600px; overflow: auto">
                <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                  <v-data-table
                    :headers="headersItems"
                    :items="itemRequestList"
                    hide-actions
                    class="elevation-1"
                  >
                    <template slot="items" slot-scope="props">
                      <td
                        class="text-xs-left pa-2"
                      >
                        {{ props.item.StockBatchNo }}
                      </td>
                      <td
                        class="text-xs-left pa-2"
                      >
                        {{ props.item.ItemUnitName }}
                      </td>
                      <td
                        class="text-xs-center pa-2"
                      >
                        {{ props.item.QtyReq }}
                      </td>
                      <td
                        class="text-xs-center pa-2"
                      >
                        <v-text-field
                            v-model="props.item.amountUsed"
                            label="Jumlah"
                            single-line 
                            hide-details
                            outline
                            type="number" min="0" step="1">
                        </v-text-field>
                        <p v-show="emptycheck.includes(props.item.StockID)" style="color: red;" class="ma-0 pa-0">Jumlah melebihi stock request</p>
                      </td>
                      <td
                        class="text-xs-center pa-2"
                      >
                        <v-btn depressed small color="primary" @click="openDialogUnit(props.item)">{{ props.item.ItemUnitName }}</v-btn>
                      </td>
                    </template>
                  </v-data-table>
                </v-flex>
              </v-layout>
            </v-card>
  
          </v-card-text>
          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn color="error" flat @click="closeDialogForm()">
              Tutup
            </v-btn>
            <v-btn
              color="green"
              dark
              @click="btnSaveUsed()"
              >Simpan</v-btn
            >
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
  </template>
  
  <script>
  module.exports = {
    name: "AddPurchaseRequestDialog",
    data() {
      return {
        itemUnitChange:{},
        headersItems: [
          {
              text: "NUMBER BATCH",
              align: "center",
              sortable: false,
              value: "action",
              width: "20%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "UNIT",
              align: "center",
              sortable: false,
              value: "action",
              width: "25%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "STOCK",
              align: "center",
              sortable: false,
              value: "action",
              width: "15%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "JUMLAH DIGUNAKAN",
              align: "center",
              sortable: false,
              value: "action",
              width: "15%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          },
          {
              text: "UNIT DIGUNAKAN",
              align: "center",
              sortable: false,
              value: "action",
              width: "25%",
              class: "pa-2 pl-2 blue lighten-3 white--text",
          }
        ]
      };
    },
    mounted() {

    },
    computed: {
        loadingUnit() {
          return this.$store.state.usage.loadingUnit;
        },
        dialogUnit: {
          get() {
            return this.$store.state.usage.dialogUnit;
          },
          set(val) {
            this.$store.commit("usage/updateDialogUnit", val);
          },
        },
        selectedUnit: {
          get() {
            return this.$store.state.usage.selectedUnit;
          },
          set(val) {
            this.$store.commit("usage/updateSelectedUnit", val);
          },
        },
        unitOptions: {
          get() {
            return this.$store.state.usage.unitOptions;
          },
          set(val) {
            this.$store.commit("usage/updateUnitOptions", val);
          },
        },
        dialogform: {
            get() {
                return this.$store.state.usage.dialogform;
            },
            set(val) {
                this.$store.commit("usage/updateDialogform", val);
            },
        },
        itemRequestList: {
            get() {
                return this.$store.state.usage.itemRequestList;
            },
            set(val) {
                this.$store.commit("usage/updateItemRequestList", val);
            },
        },
        emptycheck: {
            get() {
                return this.$store.state.usage.emptycheck;
            },
            set(val) {
                this.$store.commit("usage/updateEmptycheck", val);
            },
        },
        selectedItemUsage: {
          get() {
            return this.$store.state.usage.selectedItemUsage;
          },
          set(val) {
            this.$store.commit("usage/updateSelectedItemUsage", val);
          }
        },
        itemUsageList: {
          get() {
            return this.$store.state.usage.itemUsageList;
          },
          set(val) {
            this.$store.commit("usage/updateItemUsageList", val);
          }
        },
    },
    methods: {
        saveUnit() {
          let items = this.itemRequestList;
          let index = items.findIndex(itemloop => itemloop.ItemUsageDetailID == this.itemUnitChange.ItemUsageDetailID);
          let selectedUnit = this.selectedUnit;
          items[index].StockItemUnitID = selectedUnit.StockItemUnitID;
          items[index].ItemUnitCode = selectedUnit.ItemUnitCode;
          items[index].ItemUnitName = selectedUnit.ItemUnitName;
          this.$store.commit("usage/updateItemRequestList", items);
          this.$store.commit("usage/updateDialogUnit", false);
        },
        openDialogUnit(item) {
          this.itemUnitChange = item
          this.$store.dispatch("usage/getUnitByItemId", {
            itemId: item.StockItemID,
            selectedUnit: {StockItemUnitID: item.StockItemUnitID, ItemUnitCode: item.ItemUnitCode, ItemUnitName: item.ItemUnitName}
          });
        },
        closeDialogForm() {
            this.$store.commit("usage/updateDialogform", false);
            this.$store.commit("usage/updateItemRequestList", []);
            this.$store.dispatch("usage/search", { 
                currentPage: this.$store.state.usage.currentPage,
                divisionID: this.$store.state.usage.selectedDivision == undefined ? 0 : this.$store.state.usage.selectedDivision.DivisionID,
                search: this.$store.state.usage.xsearch
            });
            this.$store.commit("usage/update_last_id", this.$store.state.usage.selectedItemUsage.ItemUsageID);
            this.emptycheck = [];
        },
        btnSaveUsed() {
            let emptycheck = [];
            this.itemRequestList.forEach(element => {
                if(element.amountUsed > element.QtyReq){
                    emptycheck.push(element.StockID);
                }
            });
            if(emptycheck.length > 0){
                this.emptycheck = emptycheck;
                return;
            }
            let itemRequestList = this.itemRequestList
                        let tempItemRequestList = []
            let totalAmountUsed = 0
            itemRequestList.forEach(element => {
                totalAmountUsed += Number(element.amountUsed);

                if ( element.amountUsed != "" && element.amountUsed != 0 && element.amountUsed != '0') {
                    tempItemRequestList.push(element);
                }
            });
            if (totalAmountUsed == 0) {
                alert("Jumlah digunakan harus diisi salah satu");
                return;
            }

            let param = {
                ItemUsageID: this.selectedItemUsage.ItemUsageID,
                ItemRequest: tempItemRequestList,

                currentPage: this.$store.state.used.currentPage,
                search: this.$store.state.used.search,
                statusConfirm: this.$store.state.used.statusConfirm,

                currentPageUsage: this.$store.state.usage.currentPage,
                divisionID: this.$store.state.usage.selectedDivision == undefined ? 0 : this.$store.state.usage.selectedDivision.DivisionID,
                searchUsage: this.$store.state.usage.xsearch
            };
            this.$store.dispatch("usage/saveItemUsage", param)
        }
    },
    watch: {
  
    }
  };
  </script>
  