<template>
  <v-layout column fill-height>
    <one-dialog-info
      :status="xinfo"
      :msg="xmsginfo"
      @close-dialog-info="closeInfo()"
    ></one-dialog-info>

    <v-toolbar class="pa-1 mb-2" color="blue lighten-3" dark height="60px">
      <v-toolbar-title>DAFTAR ANTRIAN</v-toolbar-title>
      <v-spacer></v-spacer>
      <!-- item-text="serviceName" -->
      <v-select
        return-object
        :items="xservices"
        v-model="xservice"
        label="Layanan"
        :item-text="(item) => item.serviceName + ' ' + item.serviceDoctorName"
      >
      </v-select>
    </v-toolbar>

    <v-card class="pa-1 p-left-side grow" grow>
      <v-card-text class="pa-0 mb-5">
        <v-layout row wrap>
          <v-flex>
            <v-data-table
              :headers="headers"
              :items="xqueues"
              :loading="isLoading"
              hide-actions
              class="elevation-1"
            >
              <template slot="items" slot-scope="props">
                <td
                  :class="redClass(props.item)"
                  style="text-align: left;"
                  v-bind:class="{ 'amber lighten-4': props.item.selected }"
                >
                  {{ getTime(props.item.queueCreated) }}
                </td>
                <td
                  :class="redClass(props.item)"
                  v-bind:class="{ 'amber lighten-4': props.item.selected }"
                >
                  {{ props.item.serviceName }}
                  {{ props.item.serviceDoctorName }}
                </td>
                <td
                  :class="redClass(props.item)"
                  v-bind:class="{ 'amber lighten-4': props.item.selected }"
                >
                  {{ props.item.queueNumber }}
                </td>
                <td
                  :class="redClass(props.item)"
                  v-bind:class="{ 'amber lighten-4': props.item.selected }"
                >
                  {{ props.item.statusName }}
                </td>
                <td
                  :class="redClass(props.item)"
                  class="justify-center layout px-0"
                >
                  <v-btn
                    v-if="
                      props.item.statusName !== 'Queue Called' &&
                      props.item.statusName !== 'Queue Recall'
                    "
                    title="Panggil"
                    @click="doCall(props.item.queueNumber)"
                    flat
                    icon
                    color="warning"
                  >
                    <v-icon>mic</v-icon>
                  </v-btn>
                  <v-btn
                    v-if="
                      props.item.statusName === 'Queue Called' ||
                      props.item.statusName === 'Queue Recall'
                    "
                    title="Panggil Ulang"
                    @click="
                      doRecall(props.item.queueNumber, props.item.queueID)
                    "
                    flat
                    icon
                    color="brown"
                  >
                    <v-icon>mic</v-icon>
                  </v-btn>
                  <v-btn
                    title="Proses"
                    @click="doServe(props.item)"
                    flat
                    icon
                    color="info"
                  >
                    <v-icon>account_box</v-icon>
                  </v-btn>
                  <v-btn
                    title="Skip"
                    @click="doSkip(props.item.queueNumber, props.item.queueID)"
                    flat
                    icon
                    color="red"
                  >
                    <v-icon>skip_next</v-icon>
                  </v-btn>
                  <v-btn
                    title="Selesai"
                    @click="doDone(props.item.queueNumber, props.item.queueID)"
                    flat
                    icon
                    color="success"
                  >
                    <v-icon>done</v-icon>
                  </v-btn>
                </td></template
              >
            </v-data-table>
          </v-flex>
        </v-layout>
      </v-card-text>
    </v-card>
  </v-layout>
</template>

<style scoped>
  table.v-table tbody td,
  table.v-table tbody th {
    height: 40px;
  }

  table.v-table thead tr {
    height: 40px;
  }
  .v-input__slot {
    margin-bottom: 0;
  }
  td.isRed {
    color: #e63900;
  }
</style>

<script>
  module.exports = {
    components: {
      "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
      "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
    },
    mounted() {
      this.$store.dispatch("queue/fo_url");
      this.$store.dispatch("queue/loadx", { serviceid: 0 });
      this.$store.dispatch("queue/loadservice");
    },
    methods: {
      redClass(que) {
        let cls = { isRed: false };
        if (que.queueIsRed == "Y") {
          cls = { isRed: true };
        }
        return cls;
      },
      getTime(val) {
        //return moment(val).fromNow()
        return moment(val).format("HH:mm");
      },
      doCall(numbx) {
        this.$store.dispatch("queue/docall", { number: numbx });
        // this.$store.dispatch("queue/loadx", {
        //   serviceid: this.xservice.serviceID,
        // });
      },
      doRecall(numbx, qID) {
        this.$store.dispatch("queue/dorecall", { number: numbx, queueID: qID });
        // this.$store.dispatch("queue/loadx", {
        //   serviceid: this.xservice.serviceID,
        // });
      },
      async doServe(item) {
        let numbx = item.queueNumber;
        let qID = item.queueID;
        await this.$store.dispatch("queue/doserve", {
          number: numbx,
          queueID: qID,
        });
        console.log("item queue", item);
        if (item.serviceIsFoOrder == "Y") {
          URL_FO =
            this.fo_url +
            "?q=" +
            item.queueNumber +
            "&id_queue=" +
            item.queueID;
          window.open(URL_FO, "_blank");
        }
        // this.$store.dispatch("queue/loadx", {
        //   serviceid: this.xservice.serviceID,
        // });
      },
      doDone(numbx, qID) {
        this.$store.dispatch("queue/dodone", { number: numbx, queueID: qID });
        // this.$store.dispatch("queue/loadx", {
        //   serviceid: this.xservice.serviceID,
        // });
      },
      doSkip(numbx, qID) {
        this.$store.dispatch("queue/doskip", { number: numbx, queueID: qID });
        // this.$store.dispatch("queue/loadx", {
        //   serviceid: this.xservice.serviceID,
        // });
      },
      closeInfo() {
        this.$store.commit("queue/update_info", false);
      },
    },
    computed: {
      fo_url() {
        return this.$store.state.queue.fo_url;
      },
      xqueues() {
        return this.$store.state.queue.queues;
      },
      isLoading() {
        return this.$store.state.queue.load_queue == 1;
      },
      xinfo() {
        return this.$store.state.queue.info;
      },
      xmsginfo() {
        return this.$store.state.queue.msg_info;
      },
      xservices() {
        return this.$store.state.queue.services;
      },
      xservice: {
        get() {
          return this.$store.state.queue.selected_service;
        },
        set(val) {
          this.$store.commit("queue/update_selected_service", val);
          this.$store.dispatch("queue/loadx", { serviceid: val.serviceID });
        },
      },
    },
    data() {
      return {
        headers: [
          {
            text: "Jam",
            align: "left",
            sortable: false,
            value: "mr",
            width: "15%",
            class: " blue lighten-4",
          },
          {
            text: "Layanan",
            align: "left",
            sortable: false,
            value: "lab",
            width: "25%",
            class: "blue lighten-4",
          },
          {
            text: "No Antrian",
            align: "left",
            sortable: false,
            value: "name",
            width: "5%",
            class: "blue lighten-4",
          },
          {
            text: "Status",
            align: "left",
            sortable: false,
            value: "name",
            width: "10%",
            class: "blue lighten-4",
          },
          {
            text: "Action",
            align: "Center",
            sortable: false,
            value: "name",
            width: "5%",
            class: "blue lighten-4",
          },
        ],
      };
    },
  };
</script>
