<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 {{ selectedItem.itemDesc ? selectedItem.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="unitName" 
              ></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="dialogApprove" persistent max-width="75%">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Approved Request Pengeluaran Barang <span v-if="categoryApprove == 'K'">  [ {{ levelname }} ]</span> <span v-if="categoryApprove == 'M'"> [ {{ levelname }} / {{ approveDivision }} ]</span>
        </v-card-title>
        <v-card-text class="pt-0 pb-0">
          <v-form ref="formRequest" v-model="validationForm" lazy-validtion>
            <v-layout row>
              <v-flex pa-2 xs3>
                <v-menu
                  v-model="menuDateUse"
                  :close-on-content-click="false"
                  transition="scale-transition"
                  :nudge-right="40"
                  lazy
                  :disabled="actApprove == 'approve'"
                  offset-y
                  full-width
                  max-width="290px"
                  min-width="290px"
                >
                  <template v-slot:activator="{ on }">
                    <v-text-field
                      :value="dateUseFormatted"
                      label="Tanggal Permintaan"
                      readonly
                      v-on="on"
                      @blur="dDateUse = deFormatedDate(dateUseFormatted)"
                    ></v-text-field>
                  </template>
                  <v-date-picker
                    no-title
                    v-model="xDateUse"
                    
                    @input="menuDateUse = false"
                  ></v-date-picker>
                </v-menu>
              </v-flex>
              <v-flex pa-2 xs3>
                <v-text-field
                  v-model="xRegional.S_RegionalName"
                  label="Regional"
                  readonly
                  :disabled="actApprove == 'approve'">
                  </v-text-field>
              </v-flex>
              <v-flex pa-2 xs3>
                <v-text-field
                  v-model="xBranch.M_BranchName"
                  label="Cabang"
                  readonly
                  :disabled="actApprove == 'approve'"
                ></v-text-field>
              </v-flex>
              <v-flex pa-2 xs6>
                <v-text-field
                  v-model="selectedWarehouse.WarehouseName"
                  label="Gudang"
                  :disabled="actApprove == 'approve'"
                  readonly
                ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout>
              <v-flex pa-2 pt-2 xs12>
                <v-text-field
                  v-model="xDescription"
                  label="Keterangan"
                  :disabled="actApprove == 'approve'"
                  required
                ></v-text-field>
              </v-flex>
            </v-layout>
              <v-layout row>
                <v-flex pa-2 pl-0 xs12>
                  <v-btn v-if="dialogItem == false && actApprove != 'approve'" color="primary" @click="dialogItem = true">Pilih Item</v-btn>
                  <v-btn v-if="dialogItem == true && actApprove != 'approve'" color="primary" @click="dialogItem = false">Tutup Pilih Item</v-btn>
                </v-flex>
              </v-layout>
              <div v-if="dialogItem == true">
              <v-divider></v-divider>
              <v-card elevation="10"  class=" mt-2">
                <v-layout  row>
                  <v-flex class="mt-2" pa-2 pb-0 xs3>
                    <v-text-field
                      v-model="searchItem"
                      label="Cari..."
                      placeholder="Ketikkan item"
                      style="max-width: 250px"
                      hide-details
                    ></v-text-field>
                  </v-flex>
                  <v-flex class="mt-2" pa-2 pb-0 xs3>
                    <v-autocomplete
                      v-model="selectedDivision"
                      :items="divisionOptions"
                      label="Divisi"
                      return-object
                      menu-icon="mdi-chevron-down"
                      item-text="DivisionName"
                      hide-details
                      item-value="DivisionID"></v-autocomplete>
                    
                  </v-flex>
                  <v-flex class="mt-2" pa-2 pb-0 xs3>
                    <v-autocomplete
                      v-model="selectedItemGroup"
                      :items="itemGroupOptions"
                      hide-details
                      label="Grup"
                      return-object
                      menu-icon="mdi-chevron-down"
                      item-text="Nat_GroupName"
                      item-value="Nat_GroupID"></v-autocomplete>
                    
                  </v-flex>
                  <v-flex class="mt-2" pa-2 pb-0 xs3>
                    <v-autocomplete
                      v-model="selectedItemSubGroup"
                      :items="itemSubGroupOptions"
                      return-object
                      hide-details
                      label="Sub Grup"
                      menu-icon="mdi-chevron-down"
                      item-text="Nat_SubGroupName"
                      item-value="Nat_SubGroupID"></v-autocomplete>
                  
                  </v-flex>
                  <v-flex class="mt-2" pa-2 pb-0 xs2>
                    <v-btn
                      dark
                      color="success"
                      style="min-width: 40px; height: 40px; margin: 0"
                      @click="itemSearch()"
                    >
                      <v-icon>search</v-icon>
                    </v-btn>
                  </v-flex>
                </v-layout>
                <v-layout row >
                  <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
                    <v-data-table
                      :headers="headers"
                      :items="items"
                      :loading="loadingItem"
                      hide-actions
                      class="elevation-1"
                    >
                      <template slot="items" slot-scope="props">
                        <td
                          class="text-xs-left pa-2"
                          v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                          @click="selectMe(props.item)"
                        >
                          <div
                            style="
                              display: flex;
                              flex-direction: column;
                              align-items: center;
                            "
                          >
                            {{ props.item.itemCode }}
                            <v-chip small style="border-radius: 5px; flex-grow: 0">
                              {{ props.item.itemDesc }}
                            </v-chip>
                          </div>
                        </td>
                        <td
                          class="text-xs-center pa-2"
                          v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                          @click="selectMe(props.item)"
                        >
                        {{ props.item.unitName }}
                        </td>
                        <td
                          class="text-xs-center pa-2"
                          v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                          @click="selectMe(props.item)"
                        >
                          <!--<v-btn v-if="checkSelected(props.item) == true" flat style="min-width: 35px; height: 35px; margin: 0" small color="grey" depressed><v-icon small>check</v-icon></v-btn---->
                          <v-btn  v-if="checkSelected(props.item) == false"style="min-width: 35px; height: 35px; margin: 0" small color="success" @click="addItem(props.item)"><v-icon small>check</v-icon></v-btn>
                        </td>
                      </template>
                    </v-data-table>
                  </v-flex>
                </v-layout>
                <v-divider></v-divider>
                <v-layout row>
                  <v-flex xs6>
                    <v-pagination
                      style="margin-top: 10px; margin-bottom: 10px"
                  v-model="itemCurrentPage"
                  :length="itemTotalPage"
                      :total-visible="7"
                    ></v-pagination>
                  </v-flex>
                  <v-flex class="pt-2 text-xs-right" xs6>
                    <v-btn color="primary" @click="dialogItem = false">Tutup Pilih Item</v-btn>
                  </v-flex>
                </v-layout>
              </v-card>
              <v-divider></v-divider>
            </div>
              <v-card elevation="0" 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="selectedItems"
                      hide-actions
                      :loading="loadingDetailRequest"
                      class="elevation-1"
                    >
                      <template slot="items" slot-scope="props">
                        <td
                          class="text-xs-left pa-2"
                          v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                          @click="selectMe(props.item)"
                        >
                          <div
                            style="
                              display: flex;
                              flex-direction: column;
                              align-items: center;
                            "
                          >
                            {{ props.item.itemCode }}
                            <v-chip small style="border-radius: 5px; flex-grow: 0">
                              {{ props.item.itemDesc }}
                            </v-chip>
                          </div>
                        </td>
                        <td
                          class="text-xs-center pa-2"
                          v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                          @click="selectMe(props.item)"
                        >
                          <v-btn depressed small color="primary" @click="openDialogUnit(props.item)">{{ props.item.unitName }}</v-btn>
                        </td>
                        <td
                          class="text-xs-center pa-2"
                          v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                          @click="selectMe(props.item)"
                        >
                          <v-text-field  v-model="props.item.qty"  @change="updateQuantity(props.item)" :disabled="actApprove == 'approve'"></v-text-field>
                          
                        </td>
                        <td
                          class="text-xs-center pa-2"
                          v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                          @click="selectMe(props.item)"
                        >
                          <v-btn v-if="actApprove != 'approve'" style="min-width: 35px; height: 35px; margin: 0" small color="error" dark @click="deleteItem(props.item)"><v-icon small>close</v-icon></v-btn>
                          
                        </td>
                      </template>
                    </v-data-table>
                  </v-flex>
                </v-layout>
              </v-card>
          </v-form>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
          <v-btn color="error" flat @click="closeDialogRequest()">
            Tutup
          </v-btn>
          <v-btn
            color="red"
            :disabled="loadingSaveRequest"
            dark
            outline
            @click="rejectRequestx()"
            >Reject</v-btn
          >
          <v-btn
            color="primary"
            :disabled="loadingSaveRequest"
            dark
            @click="approveRequestx()"
            > {{categoryApprove == 'M' ? 'Verifikasi' : 'Approve'}} </v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
module.exports = {
  name: "AddPurchaseRequestDialog",
  data() {
    return {
      itemUnitChange:{},
      branchRules: [(v) => !!v || "Cabang harus diisi"],
      descRules: [(v) => !!v || "Keterangan harus diisi"],
      warehoueRules: [ v => !!v || 'Gudang harus diisi'],
      validationForm: false,
      headers: [
        {
          text: "ITEM PERSEDIAAN",
          align: "center",
          sortable: false,
          value: "itemName",
          width: "15%",
          class: "success lighten-3 white--text",
        },
        {
          text: "SATUAN",
          align: "center",
          sortable: false,
          value: "unitName",
          width: "15%",
          class: "success lighten-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sortable: false,
          value: "action",
          width: "10%",
          class: "success lighten-3 white--text",
        },
      ],
      headersItems: [
        {
          text: "ITEM PERSEDIAAN",
          align: "center",
          sortable: false,
          value: "itemName",
          width: "15%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "SATUAN",
          align: "center",
          sortable: false,
          value: "unitName",
          width: "15%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "JUMLAH",
          align: "center",
          sortable: false,
          value: "qty",
          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: {
    loadingDetailRequest() {
      return this.$store.state.requester.loadingDetailRequest;
    },
    loadingUnit() {
      return this.$store.state.requester.loadingUnit;
    },
    dialogUnit: {
      get() {
        return this.$store.state.requester.dialogUnit;
      },
      set(val) {
        this.$store.commit("requester/updateDialogUnit", val);
      },
    },
    selectedUnit: {
      get() {
        return this.$store.state.requester.selectedUnit;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedUnit", val);
      },
    },
    unitOptions: {
      get() {
        return this.$store.state.requester.unitOptions;
      },
      set(val) {
        this.$store.commit("requester/updateUnitOptions", val);
      },
    },
    dialogApprove: {
      get() {
        return this.$store.state.requester.dialogApprove;
      },
      set(val) {
        this.$store.commit("requester/update_dialogApprove", val);
      },
    },
    menuDateUse: {
      get() {
        return this.$store.state.requester.menuDateUse;
      },
      set(val) {
        this.$store.commit("requester/updateMenuDateUse", val);
      },
    },
    dateUseFormatted() {
      return this.formatDate(this.xDateUse);
    },
    dDateUse: {
      get() {
        return this.$store.state.requester.dDateUse;
      },
      set(val) {
        this.$store.commit("requester/updateDDateUse", val);
      },
    },
    xDateUse: {
      get() {
        return this.$store.state.requester.xDateUse;
      },
      set(val) {
        this.$store.commit("requester/updateXDateUse", val);
      },
    },
    xBranch: {
      get() {
        return this.$store.state.requester.xBranch;
      },
      set(val) {
        this.$store.commit("requester/updateXBranch", val);
      },
    },
    branchOptions() {
      return this.$store.state.requester.branchOptions;
    },
    regionalOptions() {
      return this.$store.state.requester.regionalOptions;
    },
    warehouseOptions() {
      return this.$store.state.requester.warehouseOptions;
    },
    xRegional: {
      get() {
        return this.$store.state.requester.xRegional;
      },
      set(val) {
        this.$store.commit("requester/updateXRegional", val);
      },
    },
    selectedWarehouse: {
      get() {
        return this.$store.state.requester.selectedWarehouse;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedWarehouse", val);
      },
    },
    xDescription: {
      get() {
        return this.$store.state.requester.xDescription;
      },
      set(val) {
        this.$store.commit("requester/updateXDescription", val);
      },
    },
    xPRID() {
      return this.$store.state.requester.xPRID;
    },
    actApprove() {
      return this.$store.state.requester.act_approve;
    },
    act() {
      return this.$store.state.requester.act;
    },
    itemCurrentPage: {
      get() {
        return this.$store.state.requester.itemCurrentPage;
      },
      set(val) {
        this.$store.commit("requester/updateItemCurrentPage", val);
        this.$store.dispatch("requester/getItems", {
          search: this.searchItem,
          division: this.selectedDivision.DivisionID ? this.selectedDivision.DivisionID : ""  ,
          itemGroup: this.selectedItemGroup.Nat_GroupID ? this.selectedItemGroup.Nat_GroupID : "",
          itemSubGroup: this.selectedItemSubGroup.Nat_SubGroupID ? this.selectedItemSubGroup.Nat_SubGroupID : "",
          warehouseID: this.$store.state.requester.selectedWarehouse.WarehouseID
        });
      },
    },
    itemTotalPage: {
      get() {
        return this.$store.state.requester.itemTotalPage;
      },
    },
    items: {
      get() {
        return this.$store.state.requester.items;
      },
      set(val) {
        this.$store.commit("requester/updateItems", val);
      }
    },
    selectedItem: {
      get() {
        return this.$store.state.requester.selectedItem;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedItem", val);
      }
    },
    searchItem: {
      get() {
        return this.$store.state.requester.searchItem;
      },
      set(val) {
        this.$store.commit("requester/updateSearchItem", val);
      }
    },
    loadingItem: {
      get() {
        return this.$store.state.requester.loadingItem;
      },
      set(val) {
        this.$store.commit("requester/updateLoadingItem", val);
      }
    },
    itemGroupOptions: {
      get() {
        return this.$store.state.requester.itemGroupOptions;
      },
      set(val) {
        this.$store.commit("requester/updateItemGroupOptions", val);
      }
    },
    selectedItemGroup: {
      get() {
        return this.$store.state.requester.selectedItemGroup;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedItemGroup", val);
        console.log(val)
        this.$store.commit("requester/updateItemSubGroupOptions", val.subGroups);
        this.$store.commit("requester/updateSelectedItemSubGroup", val.subGroups[0]);
      }
    },
    itemSubGroupOptions: {
      get() {
        return this.$store.state.requester.itemSubGroupOptions;
      },
      set(val) {
        this.$store.commit("requester/updateItemSubGroupOptions", val);
      }
    },
    selectedItemSubGroup: {
      get() {
        return this.$store.state.requester.selectedItemSubGroup;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedItemSubGroup", val);
        
      }
    },
    loadingItemSubGroup: {
      get() {
        return this.$store.state.requester.loadingItemSubGroup;
      },
      set(val) {
        this.$store.commit("requester/updateLoadingItemSubGroup", val);
      }
    },
    loadingItemGroup: {
      get() {
        return this.$store.state.requester.loadingItemGroup;
      },
      set(val) {
        this.$store.commit("requester/updateLoadingItemGroup", val);
      }
    },
    divisionOptions: {
      get() {
        return this.$store.state.requester.divisionOptions;
      },
      set(val) {
        this.$store.commit("requester/updateDivisionOptions", val);
      }
    },
    selectedDivision: {
      get() {
        return this.$store.state.requester.selectedDivision;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedDivision", val);
        this.$store.dispatch("requester/getItemGroupSubGroup");
        this.$store.dispatch("requester/getItems", {
          search: this.searchItem,
          division: this.selectedDivision.DivisionID ? this.selectedDivision.DivisionID : ""  ,
          itemGroup: this.selectedItemGroup.Nat_GroupID ? this.selectedItemGroup.Nat_GroupID : "",
          itemSubGroup: this.selectedItemSubGroup.Nat_SubGroupID ? this.selectedItemSubGroup.Nat_SubGroupID : "",
          warehouseID: this.$store.state.requester.selectedWarehouse.WarehouseID
        });
      }
    },
    loadingSave: {
      get() {
        return this.$store.state.requester.loadingSave;
      },
      set(val) {
        this.$store.commit("requester/updateLoadingSave", val);
      }
    },
    loadingSaveRequest: {
      get() {
        return this.$store.state.requester.loadingSaveRequest;
      },
      set(val) {
        this.$store.commit("requester/updateLoadingSaveRequest", val);
      }
    },
    selectedItem: {
      get() {
        return this.$store.state.requester.selectedItem;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedItem", val);
      }
    },
    selectedItems: {
      get() {
        return this.$store.state.requester.selectedItems;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedItems", val);
      }
    },
    dialogItem: {
      get() {
        return this.$store.state.requester.dialogItem;
      },
      set(val) {
        this.$store.commit("requester/updateDialogItem", val);
      }
    },
    levelname: {
      get() {
        return this.$store.state.requester.levelname;
      },
      set(val) {
        this.$store.commit("requester/updateLevelName", val);
      },
    },
    categoryApprove: {
      get() {
        return this.$store.state.requester.categoryApprove;
      },
      set(val) {
        this.$store.commit("requester/updateCategoryApprove", val);
      },
    },
    approveDivision: {
      get() {
        return this.$store.state.requester.approveDivision;
      },
      set(val) {
        this.$store.commit("requester/updateApproveDivision", val);
      },
    },
  },
  methods: {
    approveRequestx() {
        this.$store.commit("requester/updateLoadingSaveRequest", true);
        let prm = {
            categoryApprove: this.categoryApprove,
            RIOID: this.$store.state.requester.selectedMainTable.rioId,
        }
        this.$store.dispatch("requester/approveRequest", prm)
    },
    rejectRequestx() {
        this.$store.commit("requester/updateLoadingSaveRequest", true);
        let prm = {
            RIOID: this.$store.state.requester.selectedMainTable.rioId,
        }
        this.$store.dispatch("requester/rejectRequest", prm)
    },
    sendRequest(){
      this.$store.commit("requester/updateLoadingSave", true);
      this.$store.dispatch("requester/updateRequest", {
        act: "sendrequest",
        RIOID: this.$store.state.requester.selectedMainTable.rioId,
        RIONumber : this.$store.state.requester.selectedMainTable.rioNumber,
        RIODateUse: this.xDateUse,
        RIORegional: this.xRegional.S_RegionalID,
        RIOBranch: this.xBranch.M_BranchCode,
        RIOWarehouse: this.selectedWarehouse.WarehouseID,
        RIODescription: this.xDescription,
        RIODivision: this.$store.state.requester.selectedMainTable.rioDivisionId,
        items: this.selectedItems
      });
    },
    updateItemOutRequest(){
      this.$store.commit("requester/updateLoadingSave", true);
      this.$store.dispatch("requester/updateRequest", {
        act: "edit",
        RIOID: this.$store.state.requester.selectedMainTable.rioId,
        RIONumber : this.$store.state.requester.selectedMainTable.rioNumber,
        RIODateUse: this.xDateUse,
        RIORegional: this.xRegional.S_RegionalID,
        RIOBranch: this.xBranch.M_BranchCode,
        RIOWarehouse: this.selectedWarehouse.WarehouseID,
        RIODescription: this.xDescription,
        RIODivision: this.selectedDivision.DivisionID,
        items: this.selectedItems
      });
    },
    checkSelected(item) {
      let selectedItems = this.selectedItems;
      let rtn = false
      if(selectedItems.length == 0) {
        console.log(item.itemId,"selectedItems.length == 0");
        rtn = false;
      }
      selectedItems.forEach(itemloop => {
        if(itemloop.itemId == item.itemId) {
          console.log(item.itemId,"itemloop.itemId == item.itemId");
          rtn = true;
        }
      });
      console.log(item.itemId,"return false");
      return rtn;
    },
    saveItemOutRequest() {
      this.$store.commit("requester/updateLoadingSave", true);
      this.$store.dispatch("requester/saveRequest", {
        RIODateUse: this.xDateUse,
        RIORegional: this.xRegional.S_RegionalID,
        RIOBranch: this.xBranch.M_BranchCode,
        RIOWarehouse: this.selectedWarehouse.WarehouseID,
        RIODescription: this.xDescription,
        RIODivision: this.selectedDivision.DivisionID,
        items: this.selectedItems
      });
    },
    itemSearch() {
      this.$store.dispatch("requester/getItems", {
        search: this.searchItem,
        division: this.selectedDivision.DivisionID ? this.selectedDivision.DivisionID : ""  ,
        itemGroup: this.selectedItemGroup.Nat_GroupID ? this.selectedItemGroup.Nat_GroupID : "",
        itemSubGroup: this.selectedItemSubGroup.Nat_SubGroupID ? this.selectedItemSubGroup.Nat_SubGroupID : "",
        warehouseID: this.$store.state.requester.selectedWarehouse.WarehouseID
      });
    },
    addItem(item) {
      let selectedItems = this.selectedItems;
      let index = selectedItems.findIndex(itemloop => itemloop.itemId == item.itemId);
      if(index == -1) {
        selectedItems.push(item);
      }
      
      this.$store.commit("requester/updateSelectedItems", selectedItems);
      console.log(this.selectedItems);
    },
    deleteItem(item) {
      let selectedItems = this.selectedItems;
      let index = selectedItems.findIndex(itemloop => itemloop.itemId == item.itemId);
      if(index != -1) {
        selectedItems.splice(index, 1);
      }
      this.$store.commit("requester/updateSelectedItems", selectedItems);
    },
    
    updateQuantity(item) {
      let items = this.selectedItems;
      let index = items.findIndex(itemloop => itemloop.itemId == item.itemId);
      items[index].qty = item.qty;
      this.$store.commit("requester/updateSelectedItems", items);
    },
    saveUnit() {
      let items = this.selectedItems;
      let index = items.findIndex(itemloop => itemloop.itemId == this.itemUnitChange.itemId);
      let selectedUnit = this.selectedUnit;
      items[index].unitCode = selectedUnit.unitCode;
      items[index].unitName = selectedUnit.unitName;
      this.$store.commit("requester/updateSelectedItems", items);
      this.$store.commit("requester/updateDialogUnit", false);
    },
    openDialogUnit(item) {
      this.itemUnitChange = item
      this.$store.dispatch("requester/getUnitByItemId", {
        itemId: item.itemId,
        selectedUnit: {unitId: item.unitId, unitCode: item.unitCode, unitName: item.unitName}
      });
    },
    isSelected(p) {
      return (
        p.itemId ==
        this.$store.state.requester.selectedItem
          .itemId
      );
    },
    selectMe(spr) {
      this.$store.commit("requester/updateSelectedItem", spr);
    },
    formatDate(date) {
      if (!date) return null;

      const [year, month, day] = date.split("-");
      return `${day}-${month}-${year}`;
    },
    deFormatedDate(date) {
      if (!date) return null;

      const [day, month, year] = date.split("-");
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    },
    closeDialogRequest() {
      this.$store.commit(
        "requester/updateXDateUse",
        moment(new Date()).format("YYYY-MM-DD")
      );
      this.$store.commit("requester/updateXBranch", "");
      this.$store.commit("requester/updateXRegional", "");
      this.$store.commit("requester/updateXDescription", "");
      this.$refs.formRequest.resetValidation();
      this.$store.commit("requester/update_dialogApprove", false);
    },
  },
};
</script>
