<template>
  <div style="width: 100%">
    <v-snackbar
      v-model="snackbar.state"
      :color="snackbar.type"
      :timeout="3000"
      multi-line
      top
    >
      {{ snackbar.message }}
      <v-btn flat @click="snackbar.state = false">
        Close
      </v-btn>
    </v-snackbar>

    <!-- ERROR DIALOG -->
    <v-dialog v-model="dialog_error" max-width="500px">
      <v-card>
        <v-card-title>
          <span>ERROR !</span>
          <v-spacer></v-spacer>
        </v-card-title>
        <v-divider></v-divider>
        <div class="ma-3 red--text">{{ msgError }}</div>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="dialog_error = false"
            >Tutup</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- END ERROR DIALOG -->


    <v-toolbar color="primary" dark>
      <v-toolbar-title class="white--text"
        >PEMAKAIAN ITEM PER DIVISI</v-toolbar-title
      >
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-card class="pa-2">
      <v-layout row>
        <v-flex pl-2 xs4>
          <v-autocomplete
          v-model="selectedDivision"
          menu-icon="mdi-chevron-down"
          :items="divisionOptions"
          item-text="DivisionName"
          item-value="DivisionID"
            :loading="loadingAutocomplete"
            return-object
          label="Divisi"
          outline
          hide-details
        ></v-autocomplete>
        </v-flex>
        <v-flex xs4 pl-2>
            <v-text-field
                label="Cari..."
                placeholder="ITEM"
                outline
                hide-details
                v-model="xsearch"
            ></v-text-field>
        </v-flex>
      </v-layout>
      
    </v-card>
    <v-card class="pa-2 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="headers"
            :items="itemUsageList"
            :loading="loading"
            hide-actions
            class="elevation-1"
          >
            <template slot="items" slot-scope="props">
              <td
                class="text-xs-center pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                  {{ props.item.DivisionName }}
              </td>
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                <span class="font-weight-bold" style="color:#000000">{{ props.item.M_ItemCode }}</span> {{ props.item.M_ItemDesc }}
              </td>
              <td
                class="text-xs-center pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              >
                    <v-btn
                        color="info"
                        @click="openDialogDetail(props.item)"
                    >
                        Detail
                    </v-btn>
              </td>
            </template>
          </v-data-table>
        </v-flex>
      </v-layout>
      <v-divider></v-divider>
      <v-pagination
        style="margin-top: 10px; margin-bottom: 10px"
        v-model="currentPage"
        :length="totalPage"
      ></v-pagination>
    </v-card>

    <dialog-detail-usage-item></dialog-detail-usage-item>

  </div>
</template>

<style scoped>
.date-type-table {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

.table.v-table thead tr {
  height: 40px;
}

.scroll-container {
  scroll-padding: 50px 0 0 50px;
}
</style>

<script>
module.exports = {
  components: {
    "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
    "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
    "dialog-detail-usage-item": httpVueLoader("./dialogDetailUsageItem.vue"),
  },
  data() {
    return {
      headers: [
        {
          text: "DIVISI",
          align: "center",
          sortable: false,
          value: "no",
          width: "30%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "ITEM",
          align: "center",
          sortable: false,
          value: "requestDate",
          width: "60%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sortable: false,
          value: "keterangan",
          width: "10%",
          class: "blue lighten-3 white--text",
        }
      ],
    };
  },
  mounted() {
    this.$store.dispatch("usage/getDivisionByUser")
    .then(() => {
      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
      });
    })
    .catch(error => {
      console.error("Error fetching:", error);
    });
  },
  computed: {
    itemUsageList() {
      return this.$store.state.usage.itemUsageList;
    },
    loading() {
      return this.$store.state.usage.loadingStatus === 1;
    },
    snackbar: {
        get() {
            return this.$store.state.usage.snackbar;
        },
        set(val) {
            this.$store.commit("usage/updateSnackbar", val);
        },
    },
    dialog_error: {
      get() {
        return this.$store.state.usage.alertError;
      },
      set(val) {
        this.$store.commit("usage/updateAlertError", val);
      },
    },
    msgError() {
      return this.$store.state.usage.errMessage;
    },
    selectedDivision: {
      get() {
        return this.$store.state.usage.selectedDivision;
      },
      set(val) {
        this.$store.commit("usage/updateSelectedDivision", val);
        this.$store.commit("usage/update_last_id", -1);
        this.$store.dispatch("usage/search", { 
            currentPage: this.$store.state.usage.currentPage,
            divisionID: val == undefined ? 0 : val.DivisionID,
            search: this.$store.state.usage.xsearch,
        });
      }
    },
    divisionOptions: {
      get() {
        return this.$store.state.usage.divisionOptions;
      },
      set(val) {
        this.$store.commit("usage/updateDivisionOptions", val);
        this.$store.commit("usage/update_last_id", -1);
      }
    },
    currentPage: {
      get() {
        return this.$store.state.usage.currentPage;
      },
      set(val) {
        this.$store.commit("usage/updateCurrentPage", val);
        this.$store.commit("usage/update_last_id", -1);
        this.$store.dispatch("usage/search", { 
            currentPage: val,
            divisionID: this.$store.state.usage.selectedDivision == undefined ? 0 : this.$store.state.usage.selectedDivision.DivisionID,
            search: this.$store.state.usage.xsearch,
            last_id: -1
        });
      }
    },
    totalPage: {
      get() {
        return this.$store.state.usage.totalPage;
      },
      set(val) {
        this.$store.commit("usage/updateTotalPage", val);
      }
    },
    loadingAutocomplete() {
      return this.$store.state.usage.loadingAutocomplete === 1;
    },
    selectedItemUsage: {
      get() {
        return this.$store.state.usage.selectedItemUsage;
      },
      set(val) {
        this.$store.commit("usage/updateSelectedItemUsage", val);
      }
    },
    xsearch: {
      get() {
        return this.$store.state.usage.xsearch;
      },
      set(val) {
        this.$store.commit("usage/updateXsearch", val);
        this.$store.commit("usage/update_last_id", -1);
        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: val,
            last_id: -1
        });
      }
    }
  },
  methods: {
    isSelected(item) {
      return this.$store.state.usage.selectedItemUsage.ItemUsageID === item.ItemUsageID;
    },
    selectMe(item) {
      this.$store.commit("usage/updateSelectedItemUsage", item);
    },
    convertMoney(money){
        return one_money(money)
    },
    openDialogDetail(item){
        this.$store.commit("usage/updateDialogform", true);
        this.$store.commit("usage/updateItemRequestList", item.ItemRequest);
        this.$store.commit("usage/updateSelectedItemUsage", item);

        let prm = {
            itemUnitID: item.ItemUnitID
        }
        this.$store.dispatch("usage/getUnit", prm);
    },
    thr_search: _.debounce(function () {
      this.$store.dispatch("used/getItemUsed", {
          itemUsageID: this.$store.state.usage.selectedItemUsage.ItemUsageID,
          currentPage: this.$store.state.used.currentPage,
          search: this.$store.state.used.search,
          statusConfirm: this.$store.state.used.statusConfirm,
          startdate: this.$store.state.used.fStartDate,
          enddate: this.$store.state.used.fEndDate
      });
    }, 700),
  },
  watch: {
    selectedItemUsage(val, old) {
      this.thr_search()
    }
  }
};
</script>
