<template>
  <div style="width: 100%">
    <!-- snackbar -->
    <v-snackbar
        :color="snackbar.color" v-model="snackbar.isOpen"
        :timeout="3000" multi-line top
    >
        {{ snackbar.msg }}
        <v-btn class="ml-2" flat @click="snackbar.isOpen = false">Tutup</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"
        >MUTASI ANTAR CABANG</v-toolbar-title
      >
      <v-spacer></v-spacer>
      <v-btn icon @click="openDialogRequest()">
        <v-icon>add_box</v-icon>
      </v-btn>
    </v-toolbar>
    <v-card class="pa-2">
      <v-layout row align-center>
        <v-flex pl-2 xs2>
          <v-menu
            v-model="menuStartDate"
            :close-on-content-click="false"
            transition="scale-transition"
            :nudge-right="40"
            lazy
            offset-y
            full-width
            max-width="290px"
            min-width="290px"
          >
            <template v-slot:activator="{ on }">
              <v-text-field
                :value="startDateFormatted"
                label="Tanggal Awal"
                readonly
                outline
                hide-details
                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-flex>
        <v-flex pl-2 xs2>
          <v-menu
          v-model="menuEndDate"
          :close-on-content-click="false"
          transition="scale-transition"
          :nudge-right="40"
          lazy
          offset-y
          full-width
          max-width="290px"
          min-width="290px"
        >
          <template v-slot:activator="{ on }">
            <v-text-field
              :value="endDateFormatted"
              label="Tanggal Akhir"
              readonly
              outline
              hide-details
              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-flex>
        <v-flex pl-2 xs2>
          <v-autocomplete
          v-model="fStatus"
          menu-icon="mdi-chevron-down"
          :items="statusOptions"
          item-text="text"
          item-value="value"
          label="Status"
          outline
          hide-details
        ></v-autocomplete>
        </v-flex>
        <v-flex pl-2 xs2>
          <v-text-field
          v-model="fSearch"
          label="Cari..."
          placeholder="NO. "
          outline
          hide-details
        ></v-text-field>
        </v-flex>
        <v-flex pl-2>
          <v-btn
          dark
          color="primary"
          style="min-width: 50px; height: 50px; margin: 0"
          @click="mainSearch()"
        >
          <v-icon>search</v-icon>
        </v-btn>
        </v-flex>

      <v-spacer></v-spacer>
      </v-layout>
      
    </v-card>
    <v-card class="pa-2 mt-2">
      <div style="overflow-y: scroll;">
        <v-data-table
          :headers="headers"
          :items="listdata"
          :loading="isLoading"
          hide-actions
          class="elevation-1"
        >
          <template slot="items" slot-scope="props">
          <tr>
            <td
              class="text-xs-center"
              v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              @click="selectMe(props.item)"
            >
              {{ props.item.MutasiRequestNumber }}
            </td>
            <td
              class="text-xs-center"
              v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              @click="selectMe(props.item)"
            >
              <span>
                {{
                  deFormatedDate(props.item.MutasiRequestDate)
                }}
              </span>
            </td>
            <td
              class="text-xs-center"
              v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              @click="selectMe(props.item)"
            >
                {{ props.item.itemCategoryName }}
            </td>
            <td
              class="text-xs-center"
              v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              @click="selectMe(props.item)"
            >
                {{ props.item.branch_asal_name }}
            </td>
            <td
              class="text-xs-center"
              v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              @click="selectMe(props.item)"
            >
                {{ props.item.branch_tujuan_name }}
            </td>
            <td
              class="text-xs-center"
              v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              @click="selectMe(props.item)"
            >
                {{ props.item.MutasiRequestNote }}
            </td>
            <td
              class="text-xs-center"
              v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
              @click="selectMe(props.item)"
            >
              <v-chip
                small
                :text-color="
                  props.item.MutasiRequestStatus === 'Draft'
                    ? 'black'
                    : 'white'
                "
                :color="
                  getChipStatusColor(
                    props.item.MutasiRequestStatus
                  )
                "
              >
                {{ props.item.MutasiRequestStatus }}
              </v-chip>
            </td>
            
            <td
              class="text-xs-center"
              v-bind:class="{
                'amber lighten-4': isSelected(props.item),
              }"
            >
              <div v-show="props.item.MutasiRequestStatus === 'Draft'">
                <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                        <v-btn 
                            style="min-width: 30px; height: 30px; margin: 0;" outline
                            small @click="editRM(props.item)" color="blue lighten-2"
                            class="mt-1 mb-1"
                        >
                            <v-icon small color="blue" v-on="on">edit</v-icon>
                        </v-btn>
                    </template>
                    <span>Edit</span>
                </v-tooltip>
                <v-tooltip bottom>
                    <template v-slot:activator="{ on }">
                        <v-btn 
                            style="min-width: 30px; height: 30px; margin: 0;" outline
                            small @click="deleteRM(props.item)" color="red lighten-2"
                            class="mt-1 mb-1"
                        >
                            <v-icon small color="red" v-on="on">delete</v-icon>
                        </v-btn>
                    </template>
                    <span>Hapus</span>
                </v-tooltip>
              </div>
            </td>
          </tr>
          </template>
        </v-data-table>
      </div>
      <v-divider></v-divider>
      <v-pagination
        style="margin-top: 10px; margin-bottom: 10px"
        v-model="currentPage"
        :length="totalPages"
      ></v-pagination>
    </v-card>

    <add-request-mutasi></add-request-mutasi>
    <one-dialog-item-mutasi></one-dialog-item-mutasi>
    <one-dialog-form-edit-mutasi></one-dialog-form-edit-mutasi>
    <one-dialog-rm-layout></one-dialog-rm-layout>

  </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-item-mutasi": httpVueLoader("./dialogSelectItem.vue"),
    "one-dialog-form-edit-mutasi": httpVueLoader("./dialogFormMutasiEdit.vue"),
    "one-dialog-rm-layout": httpVueLoader("./dialogRmLayout.vue"),
    "add-request-mutasi": httpVueLoader("./dialogFormMutasi.vue"),
    "add-request-detail-dialog": httpVueLoader("./addRequestDetailDialog.vue"),
    "approve-dialog": httpVueLoader("./approveDialog.vue"),
    "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
    "one-dialog-error": httpVueLoader("../../common/oneDialogError.vue"),
  },
  data() {
    return {
      msgAlertDeleteRequest: "",
      dialogAlertDeleteRequest: false,
      dialogAlertDeleteDetail: false,
      headers: [
        {
          text: "NO",
          align: "center",
          sortable: false,
          value: "no",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "TANGGAL",
          align: "center",
          sortable: false,
          value: "requestDate",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "KATEGORI",
          align: "center",
          sortable: false,
          value: "keterangan",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "CABANG ASAL",
          align: "center",
          sortable: false,
          value: "keterangan",
          width: "15%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "CABANG TUJUAN",
          align: "center",
          sortable: false,
          value: "keterangan",
          width: "15%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "KETERANGAN",
          align: "center",
          sortable: false,
          value: "keterangan",
          width: "20%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "STATUS",
          align: "center",
          sortable: false,
          value: "status",
          width: "10%",
          class: "pa-2 blue lighten-3 white--text",
        },
        {
          text: "AKSI",
          align: "center",
          sortable: false,
          value: "action",
          width: "25%",
          class: "pa-2 text-center blue lighten-3 white--text",
        },
      ]
    };
  },
  mounted() {
    this.$store.dispatch("mutasi/search");
  },
  computed: {
    menuStartDate: {
      get() {
        return this.$store.state.mutasi.menu_start_date;
      },
      set(val) {
        this.$store.commit("mutasi/update_menu_start_date", val);
      },
    },
    menuEndDate: {
      get() {
        return this.$store.state.mutasi.menu_end_date;
      },
      set(val) {
        this.$store.commit("mutasi/update_menu_end_date", val);
      },
    },
    startDateFormatted() {
      return this.formatDate(this.fStartDate);
    },
    endDateFormatted() {
      return this.formatDate(this.fEndDate);
    },
    dStartDate: {
      get() {
        return this.$store.state.mutasi.d_start_date;
      },
      set(val) {
        this.$store.commit("mutasi/update_d_start_date", val);
      },
    },
    dEndDate: {
      get() {
        return this.$store.state.mutasi.d_end_date;
      },
      set(val) {
        this.$store.commit("mutasi/update_d_end_date", val);
      },
    },
    fStartDate: {
      get() {
        return this.$store.state.mutasi.f_start_date;
      },
      set(val) {
        this.$store.commit("mutasi/update_f_start_date", val);
      },
    },
    fEndDate: {
      get() {
        return this.$store.state.mutasi.f_end_date;
      },
      set(val) {
        this.$store.commit("mutasi/update_f_end_date", val);
      },
    },
    fStatus: {
      get() {
        return this.$store.state.mutasi.f_status;
      },
      set(val) {
        this.$store.commit("mutasi/update_f_status", val);
      },
    },
    statusOptions() {
      return this.$store.state.mutasi.status_options;
    },
    fSearch: {
      get() {
        return this.$store.state.mutasi.f_search;
      },
      set(val) {
        this.$store.commit("mutasi/update_f_search", val);
      },
    },
    listdata() {
      return this.$store.state.mutasi.list_data;
    },
    isLoading() {
      return this.$store.state.mutasi.isLoading === 1;
    },
    currentPage: {
      get() {
        return this.$store.state.mutasi.current_page;
      },
      set(val) {
        this.$store.commit("mutasi/update_current_page", val);
        this.$store.dispatch("mutasi/search");
      },
    },
    totalPages: {
      get() {
        return this.$store.state.mutasi.total_pages;
      },
      set(val) {
        this.$store.commit("mutasi/update_total_pages", val);
      },
    },
    snackbar: {
      get() {
          return this.$store.state.mutasi.snackbar;
      },
      set(val) {
          this.$store.commit("mutasi/update_snackbar", 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(p) {
      return (
        p.MutasiRequestID ==
        this.$store.state.mutasi.selected_list_data
          .MutasiRequestID
      );
    },
    selectMe(spr) {
      this.$store.commit("mutasi/update_selected_list_data", spr);
    },
    getChipStatusColor(status) {
      switch (status) {
        case "Verified":
          return "primary"
        case "Approved":
          return "green";
        case "Rejected":
          return "error";
        case "Sent":
          return "yellow darken-2";
        case "Received":
          return "blue";
        case "Done":
          return "info";
        default:
          return "";
      }
    },
    openDialogRequest() {
      this.$store.commit("form/update_dialog_form_mutasi", true);
      this.$store.dispatch("form/resetForm");
      this.$store.dispatch("form/getCategory");
      this.$store.dispatch("form/getBranchAsal");
      this.$store.dispatch("form/getBranchTujuan");
    },
    mainSearch() {
      this.$store.dispatch("mutasi/search");
    },
    editRM(data) {
      this.$store.commit("form/update_dialog_form_mutasi_edit", true);
      this.$store.commit("mutasi/update_selected_list_data", data);
      this.$store.dispatch("mutasi/getItemMutasiUpdate");
      this.$store.dispatch("form/getCategory");
      this.$store.dispatch("form/getBranchAsal");
      this.$store.dispatch("form/getBranchTujuan");
    },
    deleteRM(data) {
      this.$store.commit("mutasi/update_selected_list_data", data);
      this.$store.commit("mutasi/update_dialog_delete", true);
    }
  },
};
</script>
