<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"
        >DAFTAR ITEM DIGUNAKAN</v-toolbar-title
      >
      <v-spacer></v-spacer>
    </v-toolbar>
    <v-card class="pa-2">
      <div class="d-flex justify-start align-center" style="gap: 0.5rem">
          <v-menu
            v-model="menuStartDate"
            :close-on-content-click="false"
            transition="scale-transition"
            :nudge-right="40"
            lazy
            offset-y
            max-width="290px"
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="startDateFormatted"
                label="Tanggal Awal"
                readonly
                style="max-width: 250px"
                outline
                hide-details
                class="mb-0"
                v-on="on"
                @blur="dStartDate = deFormatedDate(startDateFormatted)"
              ></v-text-field>
            </template>
            <v-date-picker
              no-title
              v-model="fStartDate"
              @input="menuStartDate = false"
            ></v-date-picker>
          </v-menu>
          <v-menu
            v-model="menuEndDate"
            :close-on-content-click="false"
            transition="scale-transition"
            :nudge-right="40"
            lazy
            offset-y
            max-width="290px"
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                v-model="endDateFormatted"
                label="Tanggal Akhir"
                readonly
                style="max-width: 250px"
                outline
                hide-details
                class="mb-0"
                v-on="on"
                @blur="dEndDate = deFormatedDate(endDateFormatted)"
              ></v-text-field>
            </template>
            <v-date-picker
              no-title
              v-model="fEndDate"
              @input="menuEndDate = false"
            ></v-date-picker>
          </v-menu>
          <v-select
            v-model="statusConfirm"
            :items="statusConfirmOptions"
            label=""
            item-text="text"
            item-value="value"
            outline
            hide-details
          ></v-select>
      </div>
    </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="itemUsedList"
            :loading="loading"
            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)"
              >
                <p class="mb-0">{{ formatDate(props.item.ItemUsedDate)}}</p>
                <p class="mb-0 font-weight-bold">{{ props.item.ItemUsedNumber }}</p>
              </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-left pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                <p class="mb-0"><strong>Qty : </strong> {{ props.item.ItemUsedQty }}</p>
                <p class="mb-0"><strong>Unit : </strong> {{ props.item.ItemUnitName }}</p>
              </td>
                <td
                    class="text-xs-center pa-2"
                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)"
                >
                    {{ props.item.M_UserUsername }}
                </td>
                <td
                    class="text-xs-left pa-2"
                    v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                    @click="selectMe(props.item)"
                >
                    <span v-if="props.item.ItemUsedIsConfirm === 'N'">
                        <v-btn
                          style="min-width: 25px; height: 25px; margin: 0;"
                          color="blue"
                          small title="Konfirmasi"
                          @click="openConfirm(props.item)"
                        >
                          <v-icon small color="white">check_circle</v-icon>
                        </v-btn>
                        <!-- <v-btn
                          style="min-width: 25px; height: 25px; margin: 0;"
                          color="black"
                          small title="Edit"
                          @click="openDialogEdit(props.item)"
                        >
                          <v-icon small color="white">edit</v-icon>
                        </v-btn>
                        <v-btn
                          style="min-width: 25px; height: 25px; margin: 0;"
                          color="red"
                          small title="Hapus"
                          @click="openDialogDelete(props.item)"
                        >
                        <v-icon small color="white">delete</v-icon>
                        </v-btn> -->
                    </span>
                    <span v-else-if="props.item.ItemUsedIsConfirm === 'Y'">
                      <span class="text-xs-center">Sudah Dikonfirmasi</span>
                    </span>
                </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>


    <template>
        <v-layout row justify-center>
            <v-dialog v-model="dialogUsed" persistent max-width="600px">
            <v-card>
                <v-card-title class="headline grey lighten-2" primary-title>
                    Edit Pemakaian
                </v-card-title>
                <v-card-text class="pt-2 pb-0">
                <v-layout>
                    <v-flex xs12 pa-2>
                        <p class="mb-0"><strong>Item:</strong> {{ selectedItemUsed.M_ItemDesc }}</p>
                        <p class="mb-0"><strong>Unit:</strong> {{ selectedItemUsed.ItemUnitName }}</p>
                        <p class="mb-0"><strong>Qty:</strong> {{ selectedItemUsed.ItemUsedQty }}</p>
                    </v-flex>
                </v-layout>

                <v-layout row>
                    <v-flex xs12 pa-2>
                        <v-text-field
                            v-model="selectedusedqty"
                            label="Jumlah Digunakan"
                            hide-details
                            outline
                            type="number">
                        </v-text-field>
                        <p v-if="checkErrorForm('requireUsageQty')" class="error pl-2 pr-2" style="color:#fff">Jumlah digunakan masih kosong</p>
                    </v-flex>
                </v-layout>
                </v-card-text>
                <v-divider></v-divider>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn text @click="closeDialog">Batal</v-btn>
                    <v-btn color="primary" @click="saveItem">Simpan</v-btn>
                </v-card-actions>
            </v-card>
            </v-dialog>
        </v-layout>
    </template>

    <template>
      <v-dialog v-model="dialogConfirmation" persistent width="500">
        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>
            KONFIRMASI
          </v-card-title>

          <v-card-text>
            Apakah anda yakin untuk konfirmasi ?
            <div class="mt-2">
              <p class="mb-0"><strong>Item:</strong> {{ selectedItemUsed.M_ItemDesc }}</p>
              <p class="mb-0"><strong>Batch No:</strong> {{ selectedItemUsed.ItemUsedBatchNo }}</p>
              <p class="mb-0"><strong>Unit:</strong> {{ selectedItemUsed.ItemUnitName }}</p>
              <p class="mb-0"><strong>Qty:</strong> {{ selectedItemUsed.ItemUsedQty }}</p>
            </div>
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="red"
              flat
              @click="dialogConfirmation = false"
            >
              Tidak
            </v-btn>
            <v-btn
              color="green"
              flat
              @click="requestConfirm()"
            >
              Ya
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template>

    <template>
      <v-dialog v-model="dialogDelete" persistent width="500">
        <v-card>
          <v-card-title class="headline grey lighten-2" primary-title>
            PERHATIAN
          </v-card-title>

          <v-card-text>
            Apakah anda yakin untuk menghapus
            <span style="font-weight: bold;">{{
              selectedItemUsed.M_ItemDesc
            }}</span>
            ??
          </v-card-text>

          <v-divider></v-divider>

          <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
              color="red"
              flat
              @click="dialogDelete = false"
            >
              Tidak
            </v-btn>
            <v-btn
              color="green"
              flat
              @click="deleteUsed()"
            >
              Ya
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template>

  </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"),
  },
  data() {
    return {
      headers: [
        {
          text: "TANGGAL/NO",
          align: "center",
          sortable: false,
          value: "no",
          width: "15%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "ITEM",
          align: "center",
          sortable: false,
          value: "no",
          width: "40%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "QTY/UNIT",
          align: "center",
          sortable: false,
          value: "requestDate",
          width: "20%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "USER",
          align: "center",
          sortable: false,
          value: "status",
          width: "15%",
          class: "blue lighten-3 white--text",
        },
        {
          text: "AKSI",
          align: "left",
          sortable: false,
          value: "status",
          width: "10%",
          class: "blue lighten-3 white--text",
        }
      ],
    };
  },
  mounted() {

  },
  computed: {
    itemUsedList() {
      return this.$store.state.used.itemUsedList;
    },
    loading() {
      return this.$store.state.used.loadingStatus === 1;
    },
    dialog_error: {
      get() {
        return this.$store.state.used.alertError;
      },
      set(val) {
        this.$store.commit("used/updateAlertError", val);
      },
    },
    msgError() {
      return this.$store.state.used.errMessage;
    },
    currentPage: {
      get() {
        return this.$store.state.used.currentPage;
      },
      set(val) {
        this.$store.commit("used/updateCurrentPage", val);
        this.$store.dispatch("used/getItemUsed", {
            itemUsageID: this.$store.state.usage.selectedItemUsage.ItemUsageID,
            currentPage: val,
            search: this.$store.state.used.search,
            statusConfirm: this.$store.state.used.statusConfirm,
            startdate: this.$store.state.used.fStartDate,
            enddate: this.$store.state.used.fEndDate
        });
      },
    },
    totalPage: {
      get() {
        return this.$store.state.used.totalPageUsed;
      },
      set(val) {
        this.$store.commit("used/updateTotalPageUsed", val);
      },
    },
    selectedusedqty: {
      get() {
        return this.$store.state.used.selectedUsedQty;
      },
      set(val) {
        this.$store.commit("used/updateSelectedUsedQty", val);
      },
    },
    selectedItemUsed: {
      get() {
        return this.$store.state.used.selectedItemUsed;
      },
      set(val) {
        this.$store.commit("used/updateSelectedItemUsed", val);
      },
    },
    dialogUsed: {
      get() {
        return this.$store.state.used.dialogUsed;
      },
      set(val) {
        this.$store.commit("used/updateDialogUsed", val);
      },
    },
    snackbar: {
        get() {
            return this.$store.state.used.snackbar;
        },
        set(val) {
            this.$store.commit("used/updateSnackbar", val);
        },
    },
    dialogDelete: {
      get() {
        return this.$store.state.used.dialogDelete;
      },
      set(val) {
        this.$store.commit("used/updateDialogDelete", val);
      },
    },
    dialogConfirmation: {
      get() {
        return this.$store.state.used.dialogConfirmation;
      },
      set(val) {
        this.$store.commit("used/updateDialogConfirmation", val);
      },
    },
    xsearch: {
      get() {
        return this.$store.state.used.search;
      },
      set(val) {
        this.$store.commit("used/updateSearch", val);
        this.$store.dispatch("used/getItemUsed", {
            itemUsageID: this.$store.state.usage.selectedItemUsage.ItemUsageID,
            currentPage: this.$store.state.used.currentPage,
            search: val,
            statusConfirm: this.$store.state.used.statusConfirm,
            startdate: this.$store.state.used.fStartDate,
            enddate: this.$store.state.used.fEndDate
        });
      },
    },
    statusConfirmOptions() {
      return this.$store.state.used.statusConfirmOptions;
    },
    statusConfirm: {
      get() {
        return this.$store.state.used.statusConfirm;
      },
      set(val) {
        this.$store.commit("used/updateStatusConfirm", val);
        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: val,
            startdate: this.$store.state.used.fStartDate,
            enddate: this.$store.state.used.fEndDate
        });
      },
    },
    menuStartDate: {
      get() {
        return this.$store.state.used.menuStartDate;
      },
      set(val) {
        this.$store.commit("used/updateMenuStartDate", val);
      },
    },
    menuEndDate: {
      get() {
        return this.$store.state.used.menuEndDate;
      },
      set(val) {
        this.$store.commit("used/updateMenuEndDate", val);
      },
    },
    startDateFormatted() {
      return this.formatDate(this.fStartDate);
    },
    endDateFormatted() {
      return this.formatDate(this.fEndDate);
    },
    fStartDate: {
      get() {
        return this.$store.state.used.fStartDate;
      },
      set(val) {
        this.$store.commit("used/updateFStartDate", val);
        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: val,
            enddate: this.$store.state.used.fEndDate
        });
      },
    },
    fEndDate: {
      get() {
        return this.$store.state.used.fEndDate;
      },
      set(val) {
        this.$store.commit("used/updateFEndDate", val);
        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: val
        });
      },
    },
    dStartDate: {
      get() {
        return this.$store.state.used.dStartDate;
      },
      set(val) {
        this.$store.commit("used/updateDStartDate", val);
      },
    },
    dEndDate: {
      get() {
        return this.$store.state.used.dEndDate;
      },
      set(val) {
        this.$store.commit("used/updateDEndDate", val);
      },
    },
  },
  methods: {
    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")}`;
    },
    isSelected(item) {
      return this.$store.state.used.selectedItemUsed.ItemUsedID === item.ItemUsedID;
    },
    selectMe(item) {
      this.$store.commit("used/updateSelectedItemUsed", item);
    },
    convertMoney(money){
        return one_money(money)
    },
    openDialogEdit(item) {
      this.$store.commit("used/updateSelectedItemUsed", item);
      this.selectedusedqty = item.ItemUsedQty;
      this.dialogUsed = true;
    },
    closeDialog() {
      this.dialogUsed = false;
      this.selectedusedqty = 0;
      this.$store.commit("used/updateSelectedItemUsed", {});
      this.$store.commit("used/updateErrors", []);
    },
    checkErrorForm(val) {
        let errors = this.$store.state.used.errors;
        if (errors.includes(val)) {
            return true;
        } else {
            return false;
        }
    },
    saveItem() {
        this.$store.commit("used/updateErrors", []);
        var errors = this.$store.state.used.errors;
        if (this.selectedusedqty <= 0) {
            errors.push("requireUsageQty");
            this.$store.commit("used/updateErrors", errors);
            return;
        }
        let prm = {
          ItemUsedQty: this.selectedusedqty,
          itemUsedID: this.selectedItemUsed.ItemUsedID,
          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
        };
        this.$store.dispatch("used/updateItemUsed", prm);
    },
    openDialogDelete(item) {
      this.$store.commit("used/updateSelectedItemUsed", item);
      this.dialogDelete = true;
    },
    deleteUsed() {
      let prm = {
          itemUsedID: this.selectedItemUsed.ItemUsedID,
          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
      };
      this.$store.dispatch("used/deleteItemUsed", prm);
    },
    openConfirm(item) {
      this.$store.commit("used/updateSelectedItemUsed", item);
      this.dialogConfirmation = true;
    },
    requestConfirm() {
      let prm = {
          itemUsedID: this.selectedItemUsed.ItemUsedID,
          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
      };
      this.$store.dispatch("used/confirmItemUsed", prm);
    }
  },
};
</script>
