<template>
  <v-layout
    id="display_parent"
    class="pa-3"
    style="
      width: 100%;
      height: 96vh;
      background-color: white;
      border-radius: 24px;
      overflow: auto;
    "
    column
  >
    <!-- <v-toolbar dark color="primary" style="border-radius: 24px 24px 0px 0px;"> -->
    <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->

    <!-- <v-toolbar-title class="display-1 font-weight-bold white--text">
        ANTRIAN
      </v-toolbar-title> -->

    <!-- <v-spacer></v-spacer>
      <span class="display-1 font-weight-bold" id="realTimeDateTime"></span> -->
    <!-- </v-toolbar> -->

    <v-container fluid>
      <v-layout row wrap>
        <v-flex xs12 class="text-xs-right subheading mb-3">
          Ticket Booth : {{ dataTicket.ticketBoothName }}
        </v-flex>
        <v-flex xs12 class="text-xs-center headline mb-3">
          Laboratoriun Westerindo
        </v-flex>
        <v-flex xs12 class="text-xs-center headline mb-3">
          {{ dataTicket.M_BranchName }}
        </v-flex>
        <v-flex xs12 class="text-xs-center subheading mb-3">
          {{ dataTicket.queueStatusTicket }}
        </v-flex>
        <!-- <v-flex xs12 class="text-xs-center title mb-3"> NOMOR ANTRIAN </v-flex> -->
        <v-flex xs12 class="text-xs-center subheading mb-3">
          {{ dataTicket.serviceName }}
          <p class="subheading mt-3" v-if="statusStation.length > 0">
            {{ dataPatient.T_OrderHeaderLabNumber }} -
            {{ dataPatient.M_PatientName }}
          </p>
        </v-flex>
        <v-flex xs12 class="text-xs-center display-3 mb-3 font-weight-bold">
          {{ dataTicket.queueNumber }}
        </v-flex>
        <v-flex
          xs12
          class="text-xs-center title mb-3 font-weight-bold"
          v-if="statusStation.length === 0"
        >
          <v-chip
            color="primary"
            @click="vibrate()"
            class="title"
            v-if="dataTicket.queueStatusID === '2' || dataTicket.queueStatusID === '5' || dataTicket.queueStatusID === '3'"
            text-color="white"
            >{{ dataTicket.statusName }}
          </v-chip>
          <v-chip
            color="orange"
            @click="vibrate()"
            v-if="dataTicket.queueStatusID === '1'"
            class="title"
            text-color="white"
            >{{ dataTicket.statusName }}
          </v-chip>
          <v-chip
            color="green"
            @click="vibrate()"
            v-if="dataTicket.queueStatusID === '4'"
            class="title"
            text-color="white"
            >{{ dataTicket.statusName }}
          </v-chip>
        </v-flex>
        <v-flex
          xs12
          class="text-xs-center title mb-3 font-weight-bold"
          v-if="statusStation.length > 0"
        >
          <p v-if="!isObjectEmpty(selectedStatusStation)">
            {{ selectedStatusStation.T_SampleStationName }}
          </p>
          <v-chip
            color="primary"
            @click="vibrate()"
            v-if="!isObjectEmpty(selectedStatusStation)"
            class="title"
            text-color="white"
            >{{ selectedStatusStation.T_SamplingQueueStatusName }}
          </v-chip>
          <v-chip
            color="primary"
            @click="vibrate()"
            v-if="isObjectEmpty(selectedStatusStation) && statusDone === 'N'"
            class="title"
            text-color="white"
            >WAITING
          </v-chip>
          <v-chip
            color="green"
            @click="vibrate()"
            v-if="statusDone === 'Y'"
            class="title"
            text-color="white"
            >DONE
          </v-chip>
        </v-flex>
        <v-flex xs12 class="text-xs-center">
          <v-data-table
            :headers="headers"
            :items="statusFO"
            class="elevation-1"
            hide-actions
          >
            <template v-slot:items="props">
              <td class="text-xs-left">{{ props.item.status }}</td>
              <td class="text-xs-center">{{ props.item.time }}</td>
            </template>
          </v-data-table>
        </v-flex>
        <v-flex
          xs12
          class="text-xs-center mt-3"
          v-if="statusStation.length > 0"
        >
          <v-divider></v-divider>
          <v-data-table
            :headers="headersStation"
            :items="statusStation"
            class="elevation-1 mt-3"
            hide-actions
          >
            <template v-slot:items="props">
              <td class="text-xs-left">{{ props.item.T_SampleStationName }}</td>
              <td class="text-xs-center">
                {{ props.item.T_SamplingQueueStatusName }}
              </td>
            </template>
          </v-data-table>
        </v-flex>
      </v-layout>
    </v-container>
  </v-layout>
</template>
<style scoped></style>
<script>
  // const { data } = require("./onePriceHeader.vue");

  module.exports = {
    //   components: {
    //     "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
    //     "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
    //   },
    mounted() {
      console.log("ini mi=ounted");
      document.addEventListener("DOMContentLoaded", this.updateDateTime());
      // this.$store.dispatch("queue/getStation");
      // this.$store.dispatch("queue/getStation");
      const element = document.getElementById("display_parent");
      const height = element.offsetHeight;
      console.log("Offset Height:", height);
    },
    methods: {
      isEmptyObject(obj) {
        return Object.keys(obj).length === 0 && obj.constructor === Object;
      },
      vibrate() {
        // navigator.vibrate(2000);
      },
      getHeight() {
        const element = document.getElementById("display_parent");
        const height = element.offsetHeight;
        if (this.queueList.length == 1) {
          return height;
        } else {
          return height / 2;
        }
      },
      fullscreen() {
        var elem = document.documentElement;
        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
          /* Safari */
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
          /* IE11 */
          elem.msRequestFullscreen();
        }
      },
      back() {
        this.screen = "setting";
      },
      adjustCardHeights() {
        // Ambil tinggi layout-container
        const layout = document.getElementById("display_parent");
        const height = layout.offsetHeight;

        // Hitung tinggi untuk setiap kartu
        const cards = document.querySelectorAll(".card-wrapper");
        const rows = Math.ceil(this.items.length / 2); // Maksimal 2 item per baris
        const cardHeight = height / rows;

        // Set tinggi untuk setiap kartu
        cards.forEach((card) => {
          card.style.height = `${cardHeight}px`;
        });
      },
      getGridClass(length, index) {
        // Atur grid berdasarkan jumlah item
        if (length === 1) return "xs12 fill-height"; // 1 item: 1 kolom penuh
        if (length === 2) return "xs12 "; // 2 item: 1 kolom per baris
        if (length === 3) return index < 2 ? "xs6 " : "xs12 "; // 3 item: 2 atas, 1 bawah
        if (length === 4) return "xs6 "; // 4 item: 2 atas, 2 bawah
      },
      updateDateTime() {
        const dateTimeElement = document.getElementById("realTimeDateTime"); // Ganti dengan ID elemen HTML Anda

        const monthNames = [
          "Januari",
          "Februari",
          "Maret",
          "April",
          "Mei",
          "Juni",
          "Juli",
          "Agustus",
          "September",
          "Oktober",
          "November",
          "Desember",
        ];

        function formatDateTime() {
          const now = new Date();
          const day = now.getDate();
          const month = monthNames[now.getMonth()];
          const year = now.getFullYear();
          const hours = String(now.getHours()).padStart(2, "0");
          const minutes = String(now.getMinutes()).padStart(2, "0");

          return `${day} ${month} ${year} ${hours}:${minutes}`;
        }

        function refresh() {
          dateTimeElement.textContent = formatDateTime();
        }

        refresh(); // Menampilkan waktu saat pertama kali
        setInterval(refresh, 1000); // Perbarui setiap detik
      },
      isObjectEmpty(obj) {
        return Object.keys(obj).length === 0 && obj.constructor === Object;
      },
      save() {
        if (this.loading) return;
        if (this.title.trim() === "") {
          alert("Judul tidak boleh Kosong");
          return;
        }
        if (this.isObjectEmpty(this.selectedBranch)) {
          alert("Pilih salah satu cabang");
          return;
        }
        if (this.selectedStation.length === 0) {
          alert("Pilih station terlebih dahulu");
          return;
        }
        if (this.selectedStation.length > 4) {
          alert("Pilih station maksimal 4");
          return;
        }
        this.screen = "display";
      },
    },
    computed: {
      statusDone: {
        get() {
          return this.$store.state.queue.statusDone;
        },
        set(val) {
          this.$store.commit("queue/update_statusDone", val);
        },
      },
      selectedStatusStation: {
        get() {
          return this.$store.state.queue.selectedStatusStation;
        },
        set(val) {
          this.$store.commit("queue/update_selectedStatusStation", val);
        },
      },
      statusStation: {
        get() {
          return this.$store.state.queue.statusStation;
        },
        set(val) {
          this.$store.commit("queue/update_statusStation", val);
        },
      },
      dataPatient: {
        get() {
          return this.$store.state.queue.dataPatient;
        },
        set(val) {
          this.$store.commit("queue/update_dataPatient", val);
        },
      },
      dataTicket: {
        get() {
          return this.$store.state.queue.dataTicket;
        },
        set(val) {
          this.$store.commit("queue/update_dataTicket", val);
        },
      },
      statusFO: {
        get() {
          return this.$store.state.queue.statusFO;
        },
        set(val) {
          this.$store.commit("queue/update_statusFO", val);
        },
      },
      queueList: {
        get() {
          return this.$store.state.queue.queueList;
        },
        set(val) {
          this.$store.commit("queue/update_queueList", val);
        },
      },
      screen: {
        get() {
          return this.$store.state.queue.screen;
        },
        set(val) {
          this.$store.commit("queue/update_screen", val);
        },
      },
      title: {
        get() {
          return this.$store.state.queue.title;
        },
        set(val) {
          this.$store.commit("queue/update_title", val);
        },
      },
      loading: {
        get() {
          return this.$store.state.queue.loading;
        },
        set(val) {
          this.$store.commit("queue/update_loading", val);
        },
      },
      stationList: {
        get() {
          return this.$store.state.queue.stationList;
        },
        set(val) {
          this.$store.commit("queue/update_stationList", val);
        },
      },
      selectedStation: {
        get() {
          return this.$store.state.queue.selectedStation;
        },
        set(val) {
          this.$store.commit("queue/update_selectedStation", val);
        },
      },
      branchList: {
        get() {
          return this.$store.state.queue.branchList;
        },
        set(val) {
          this.$store.commit("queue/update_branchList", val);
        },
      },
      selectedBranch: {
        get() {
          return this.$store.state.queue.selectedBranch;
        },
        set(val) {
          this.$store.commit("queue/update_selectedBranch", val);
        },
      },
    },
    watch: {},
    data() {
      return {
        selected_delivery: {},
        search_company: "",
        search_test: "",
        menufilterdatestart: false,
        menufilterdateend: false,
        date: new Date().toISOString().substr(0, 10),
        items: [],
        menustartdate: false,
        menuenddate: false,
        errors: [],
        sheet: false,
        indeterminatex: false,
        checkednotall: false,
        bar_chx_all: false,
        selected_barcode: [],
        dialogtimeline: false,
        search_doctor: "",
        dialogWarning: false,
        dialogWarningMsg: "",
        rules: {
          min: (v) => v > 0 || "Minimum value 1",
          maxPersen: (v) => v <= 100 || "Maximum value 100",
        },
        headers: [
          {
            text: "STATUS",
            align: "center",
            sortable: false,
            value: "lab",
            width: "50%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "TIME",
            align: "center",
            sortable: false,
            value: "lab",
            width: "50%",
            class: "pa-2 blue darken-2 white--text",
          },
        ],
        headersStation: [
          {
            text: "STATION",
            align: "center",
            sortable: false,
            value: "lab",
            width: "50%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "STATUS",
            align: "center",
            sortable: false,
            value: "lab",
            width: "50%",
            class: "pa-2 blue darken-2 white--text",
          },
        ],
      };
    },
  };
</script>
