<template>
  <v-layout class="fill-height" column>
    <!-- Alert dialog -->
    <v-dialog v-model="dialog_delete" persistent max-width="290">
      <v-card>
        <!-- <v-card-title class="headline">Peringatan</v-card-title> -->
        <v-card-text>
          Apakah yakin anda akan membatalkan staff "{{ selected.staffName }}"
          sebagai kurir ?</v-card-text
        >
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog_delete = false"
            >tidak</v-btn
          >
          <v-btn color="red darken-1" flat @click="delete_kurir">Ya</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- End alert dialog -->

    <!-- Snackbar -->
    <v-snackbar
      v-model="snackbar"
      :timeout="5000"
      :multi-line="false"
      :vertical="false"
      :top="true"
      color="success"
      :value="snackbar"
    >
      {{ snackbar_msg }}
      <v-btn flat @click="snackbar = false"> Tutup </v-btn>
    </v-snackbar>
    <!-- End Snackbar -->

    <!-- ERROR DIALOG -->
    <v-dialog v-model="error_dialog" 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">{{ error_msg }}</div>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="primary" flat @click="error_dialog = false"
            >Close</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
    <!-- END ERROR DIALOG -->

    <v-card class="mb-2 pa-2 searchbox">
      <v-layout>
        <v-flex xs6>
          <v-text-field
            class="xs3 ma-1 mini-select"
            v-model="name"
            style="font-size: 14px;"
            label="Cari"
            placeholder="Masukkan nama atau username"
            outline
            hide-details
          ></v-text-field>
        </v-flex>
      </v-layout>
    </v-card>
    <v-card>
      <v-layout align-center row>
        <v-flex
          xs12
          pl-2
          style="max-height: 600px; overflow: auto;"
          pr-2
          pt-2
          pb-2
        >
          <v-data-table
            :headers="headers"
            :items="couriers"
            :loading="isLoading"
            hide-actions
            class="elevation-1"
          >
            <template v-slot:items="props">
              <td class="text-xs-left pa-2">{{ props.item.staffName }}</td>
              <td class="text-xs-left pa-2">{{ props.item.username }}</td>
              <td class="text-xs-center pa-2 d-flex justify-content-center">
                <v-flex justify-center>
                  <v-checkbox
                    v-model="isCourier"
                    :disabled="isLoading"
                    @click="changeCourir(props.item.userID, props.item.staffID, props.item.courierID ?? 'new', props.item)"
                    :value="props.item.userID ?? 'new'"
                  ></v-checkbox>
                </v-flex>
              </td>
            </template>
          </v-data-table>
          <v-divider></v-divider>
          <v-layout>
            <v-flex>
              <v-pagination
                style="margin-top: 10px; margin-bottom: 10px;"
                v-model="curr_page"
                :length="total_page"
              >
              </v-pagination>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>
    </v-card>
  </v-layout>
</template>

<style scoped>
  .searchbox .v-input.v-text-field .v-input__slot {
    min-height: 60px;
  }

  .searchbox .v-btn {
    min-height: 60px;
  }

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

  table.v-table thead tr {
    height: 40px;
  }
</style>

<script>
  module.exports = {
    data() {
      return {
        //dropdown courier
        dialog_delete: false,
        selected: {},
        headers: [
          {
            text: "NAMA",
            align: "left",
            sortable: false,
            value: "mr",
            width: "50%",
            class: "text-xs-left pa-2 blue-grey white--text",
          },
          {
            text: "USERNAME",
            align: "left",
            sortable: false,
            value: "mr",
            width: "45%",
            class: "text-xs-left pa-2 blue-grey white--text",
          },
          {
            text: "AKSI",
            align: "center",
            sortable: false,
            value: "lab",
            width: "5%",
            class: "text-xs-center pa-2 blue-grey white--text",
          },
        ],
      };
    },
    mounted() {
      this.$store.dispatch("courier/search");
    },
    computed: {
      name: {
        get() {
          return this.$store.state.courier.name;
        },
        set(val) {
          this.$store.commit("courier/update_name", val);
        },
      },
      curr_page: {
        get() {
          return this.$store.state.courier.curr_page;
        },
        set(val) {
          this.$store.commit("courier/update_curr_page", val);
          this.$store.dispatch("courier/search");
        },
      },
      isCourier: {
        get() {
          return this.$store.state.courier.is_courier;
        },
        // set(val) {
        //     console.log("valllll :" + val)
        //     // this.$store.commit("courier/update_is_courier", val)

        // }
      },
      couriers() {
        return this.$store.state.courier.couriers;
      },
      isLoading() {
        return this.$store.state.courier.loading;
      },
      total_page: {
        get() {
          return this.$store.state.courier.total;
        },
        set(val) {
          this.$store.commit("courier/update_total", val);
        },
      },
      snackbar: {
        get() {
          return this.$store.state.courier.snackbar;
        },
        set(val) {
          this.$store.commit("courier/update_snackbar", val);
        },
      },
      error_dialog: {
        get() {
          return this.$store.state.courier.error_dialog;
        },
        set(val) {
          this.$store.commit("courier/update_error_dialog", val);
        },
      },
      snackbar_msg() {
        return this.$store.state.courier.snackbar_msg;
      },
      error_msg() {
        return this.$store.state.courier.error_message;
      },
    },
    methods: {
      changeCourir(userID, staffID, type, data) {
        this.selected = data;
        console.log("change courier" + userID + " " + staffID);
        var tempCourrier = JSON.stringify(this.isCourier);
        var arrCourier = JSON.parse(tempCourrier);
        console.log(type);
        if (type !== "new") {
          this.dialog_delete = true;
          // console.log("hapus kurir");
          // this.$store.dispatch("courier/deleteData", {
          //     "courierID": type
          // });
          // arrCourier.filter((e) => e === type);
        } else {
          var validation = arrCourier.includes(userID);
          if (!validation) {
            this.$store.dispatch("courier/add", {
              staffID: staffID,
              userID: userID,
            });
            console.log("add kurir");
            arrCourier.push(userID);
          }
        }
        console.log(arrCourier);
        this.$store.commit("courier/update_is_courier", arrCourier);
        this.$store.dispatch("courier/search");
      },
      delete_kurir() {
        console.log("hapus kurir");
        this.$store.dispatch("courier/deleteData", {
          courierID: this.selected.courierID,
        });
        this.dialog_delete = false;
      },

      thr_search: _.debounce(function () {
        this.$store.dispatch("courier/search");
      }, 1000),
    },

    watch: {
      name(val, old) {
        this.name = val;
        this.thr_search();
      },
    },
  };
</script>
