<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialogDetail" persistent max-width="50vw">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          FORM DETAIL
        </v-card-title>
        <v-card-text class="pt-0 pb-0">

            <v-layout wrap>
              <v-flex xs12>
                <code
                  class="mb-2 mt-2"
                  style="font-size: 14px"
                  >Gudang : {{ this.selectedMainTable.WarehouseName }}</code
                >
              </v-flex>
              <v-flex xs12>
                <v-autocomplete label="Item" :items="itemList" v-model="selectedItem"
                        :search-input.sync="search_item"
                        auto-select-first no-filter item-text="M_ItemDesc" return-object
                        no-data-text="Pilih Item" required>
                        <template slot="item" slot-scope="{ item }">
                            <v-list-tile-content>
                                <v-list-tile-title v-text="item.M_ItemDesc"></v-list-tile-title>
                                <v-list-tile-sub-title
                                    v-text="item.ItemCode"
                                ></v-list-tile-sub-title>
                            </v-list-tile-content>
                        </template>
                </v-autocomplete>
                <p v-if="checkErrorForm('requireItem')" class="error pl-2 pr-2" style="color:#fff">Item harus diisi</p>
              </v-flex>
              <v-flex xs12>
                <v-text-field
                  label="Stock Qty"
                  :value="selectedItem.StockQty"
                  readonly>
                </v-text-field>
              </v-flex>
              <v-flex xs12>
                <v-text-field
                  v-model="xQty"
                  type="number"
                  label="Qty"
                  required
                ></v-text-field>
                <p v-if="checkErrorForm('requireQty')" class="error pl-2 pr-2" style="color:#fff">Qty harus diisi</p>
              </v-flex>
              <v-flex xs12>
                <v-autocomplete label="Item Unit" v-model="selected_item_unit"
                    :items="item_units" :search-input.sync="search_item_unit"
                    auto-select-first no-filter item-text="ItemUnitName"
                    return-object
                    no-data-text="Pilih Item Unit"
                     required>
                    <template slot="item" slot-scope="{ item }">
                        <v-list-tile-content>
                            <v-list-tile-title v-text="item.ItemUnitName"></v-list-tile-title>
                        </v-list-tile-content>
                    </template>
                </v-autocomplete> 
                <p v-if="checkErrorForm('requireItemUnit')" class="error pl-2 pr-2" style="color:#fff">Item Unit harus diisi</p>
              </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="error" flat @click="closeDialogDetail()"> Tutup </v-btn>
          <v-btn v-if="act === 'new'" color="primary" dark @click="saveDetail()"
            >Simpan</v-btn
          >
          <v-btn
            v-if="act === 'edit'"
            color="primary"
            dark
            @click="updateDetail()"
            >Simpan Perubahan</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<style>
.red-hint .v-messages__message {
  color: red !important;
}
</style>

<script>
module.exports = {
  name: "AddRequestDetailDialog",
  data() {
    return {
      itemRules: [(v) => !!v || "Item harus diisi"],
      itemUnitRules: [(v) => !!v || "Item Unit harus diisi"],
      descriptionRules: [(v) => !!v || "Deskripsi harus diisi"],
      amountRules: [(v) => (!!v && v > 0) || "Jumlah harus diisi"],
      priceRules: [(v) => (!!v && v > 0) || "Harga harus diisi"],
      validationDetail: false,
    };
  },
  mounted() {

  },
  computed: {
    selectedMainTable() {
      return this.$store.state.requester.selectedMainTable;
    },
    selectedDetailTable() {
      return this.$store.state.requester.selectedDetailTable;
    },
    xDescriptionDetail: {
      get() {
        return this.$store.state.requester.xDescriptionDetail;
      },
      set(val) {
        this.$store.commit("requester/updateXDescriptionDetail", val);
      },
    },
    xQty: {
      get() {
        return this.$store.state.requester.xQty;
      },
      set(val) {
        this.$store.commit("requester/updateXQty", val);
      },
    },
    xPrice: {
      get() {
        return this.$store.state.requester.xPrice;
      },
      set(val) {
        this.$store.commit("requester/updateXPrice", val);
      },
    },
    xIsCito: {
      get() {
        return this.$store.state.requester.xIsCito;
      },
      set(val) {
        this.$store.commit("requester/updateXIsCito", val);
      },
    },
    dialogDetail: {
      get() {
        return this.$store.state.requester.dialogDetail;
      },
      set(val) {
        this.$store.commit("requester/updateDialogDetail", val);
      },
    },
    act() {
      return this.$store.state.requester.act;
    },
    itemList() {
      return this.$store.state.requester.itemList;
    },
    selectedItem: {
      get() {
        return this.$store.state.requester.selectedItem;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedItem", val);
        this.$store.commit("requester/updateXPrice", '');
        this.$store.dispatch("requester/getUnit", {search: "", itemID: this.selectedItem.M_ItemID})
        this.$store.commit("requester/updateSelectedItemUnit", {});
        // if (this.$store.state.requester.item_units.length != 0) {
        // } else {
        //   this.$store.dispatch("requester/getUnit", {search: this.search_item_unit, itemID: this.selectedItem.M_ItemID})
        // }
      },
    },
    search_item: {
      get() {
        return this.$store.state.requester.search_item;
      },
      set(val) {
        this.$store.commit("requester/update_search_item", val);
      },
    },
    item_units() {
      return this.$store.state.requester.item_units;
    },
    selected_item_unit: {
      get() {
        return this.$store.state.requester.selected_item_unit;
      },
      set(val) {
        this.$store.commit("requester/updateSelectedItemUnit", val);
      },
    },
    search_item_unit: {
      get() {
        return this.$store.state.requester.search_item_unit;
      },
      set(val) {
        this.$store.commit("requester/updateSearchItemUnit", val);
      },
    },
    total_price() {
      return this.$store.state.requester.total_price;
    },
  },
  methods: {
    // check error form
    checkErrorForm(value) {
        var errors = this.$store.state.requester.errorsform
        if (errors.includes(value)) {
            return true
        } else {
            return false
        }
    },
    closeDialogDetail() {
      this.$store.commit("requester/updateSelectedItem", {});
      this.$store.commit("requester/updateXQty", "");
      this.$store.commit("requester/updateXPrice", "");
      this.$store.commit("requester/updateXIsCito", false);
      this.$store.commit("requester/updateDialogDetail", false);
    },
    saveDetail() {
        this.$store.commit("requester/updateErrorsform", [])
        var errors = this.$store.state.requester.errorsform
        
        if(_.isEmpty(this.selectedItem)){
            errors.push("requireItem")
        }
        if(_.isEmpty(this.xQty)){
            errors.push("requireQty")
        }
        if(_.isEmpty(this.selected_item_unit)){
            errors.push("requireItemUnit")
        }
        if (errors.length === 0) {
          this.$store.commit("requester/updateErrorsform", [])
          this.$store.dispatch("requester/saveDetail", {
            IOID: this.selectedMainTable.T_ItemOutID,
            itemID: this.selectedItem.M_ItemID,
            itemDescription: this.selectedItem.M_ItemDesc,
            qty: this.xQty,
            itemUnitID: this.selected_item_unit.ItemUnitID
          });
        }
    },
    updateDetail() {
        this.$store.commit("requester/updateErrorsform", [])
        var errors = this.$store.state.requester.errorsform
        
        if(_.isEmpty(this.selectedItem)){
            errors.push("requireItem")
        }
        if(_.isEmpty(this.xQty)){
            errors.push("requireQty")
        }
        if(_.isEmpty(this.selected_item_unit)){
            errors.push("requireItemUnit")
        }

        if (errors.length === 0) {
          this.$store.commit("requester/updateErrorsform", [])
            this.$store.dispatch("requester/updateDetail", {
              IOID: this.selectedMainTable.T_ItemOutID,
              IODID: this.selectedDetailTable.T_ItemOutDetailID,
              itemID: this.selectedItem.M_ItemID,
              itemDescription: this.selectedItem.M_ItemDesc,
              qty: this.xQty,
              itemUnitID: this.selected_item_unit.ItemUnitID
            });
          }
    },
    thr_search_item: _.debounce(function () {
        this.$store.dispatch("requester/searchItem", {search: this.search_item, warehouseID: this.selectedMainTable.WarehouseID})
    }, 1000),
    thr_search_item_unit: _.debounce(function () {
        this.$store.dispatch("requester/getUnit", {search: this.search_item_unit, itemID: this.selectedItem.M_ItemID})
    }, 1000),
  },
  watch: {
    // dialogDetail(val, old) {
    //   if (val) {
    //     this.$refs.formDetail.reset();
    //     this.$refs.formDetail.resetValidation();
    //   }
    // },
    xQty(val, old) {
      if (val <= 0) {
        this.$store.commit("requester/updateXQty", 0);
      }
    },
    xPrice(val, old) {
      if (val <= 0) {
        this.$store.commit("requester/updateXPrice", 0);
      }
    },
    xAmountRequest(val, old) {
      if (val <= 0) {
        this.$store.commit("requester/updateXAmountRequest", 0);
      }
    },
    xEstimationPrice(val, old) {
      if (val < 0) {
        this.$store.commit("requester/updateXEstimationPrice", 0);
      }
    },
    search_item(val, old) {
        if (val == old) return;
        if (!val) return;
        if (val.length < 1) return;
        if (this.$store.state.requester.loadingAutocomplete == 1) return;
        this.thr_search_item();
    },
    search_item_unit(val, old) {
        if (val == old) return;
        if (!val) return;
        if (val.length < 1) return;
        if (this.$store.state.requester.loadingAutocomplete == 1) return;
        this.thr_search_item_unit();
    },
  },
};
</script>
