<template>
  <v-layout
    id="display_parent"
    style="
      width: 98vw;
      height: 98vh;
      background-color: white;
      border-radius: 24px;
    "
    column
  >
    <v-toolbar dark color="primary" style="border-radius: 24px 24px 0px 0px;">
      <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
      <v-btn @click="back()" icon class="hidden-xs-only">
        <v-icon>settings</v-icon>
      </v-btn>
      <v-btn @click="fullscreen()" icon class="hidden-xs-only">
        <v-icon>fullscreen</v-icon>
      </v-btn>

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

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

      <!-- <v-btn icon>
        <v-icon>search</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>apps</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>refresh</v-icon>
      </v-btn>

      <v-btn icon>
        <v-icon>more_vert</v-icon>
      </v-btn> -->
    </v-toolbar>

    <v-container fluid>
      <v-layout v-if="queueList.length === 1" fill-height column>
        <v-flex xs12 class="">
          <div class="grid-box">
            <v-toolbar color="cyan" dark class="elevation-0 text-center">
              <v-toolbar-title class="font-weight-bold">
                {{ queueList[0].stationName }}
              </v-toolbar-title>
            </v-toolbar>
          </div>
          <v-container fluid>
            <v-layout v-if="queueList.length === 1" fill-height row wrap>
              <v-flex xs12 class="px-2">
                <p>PROSES SAMPLING</p>
                <v-divider></v-divider>
                <v-list two-line>
                  <template v-for="(item, index) in queueList[0].process ">
                    <v-list-tile :key="item.order_lab_number">
                      <v-list-tile-content>
                        <v-list-tile-title
                          class="font-weight-bold"
                          v-html="item.order_lab_number"
                        ></v-list-tile-title>
                        <v-list-tile-sub-title
                          class="font-weight-bold"
                          v-html="item.patient_name"
                        ></v-list-tile-sub-title>
                      </v-list-tile-content>
                    </v-list-tile>
                    <v-divider></v-divider>
                  </template>
                </v-list>
              </v-flex>
              <v-flex xs12 class="mt-5">
                <p>ANTRIAN SELANJUTNYA</p>
                <v-divider></v-divider>
                <div
                  style="height: 55vh; overflow: scroll; overflow-x: hidden;"
                >
                  <v-list class="py-1">
                    <template v-for="(item, index) in queueList[0].waiting">
                      <v-list-tile :key="item.order_lab_number" class="py-0">
                        <v-list-tile-content class="py-1">
                          <v-list-tile-title
                            style="
                              display: flex;
                              justify-content: space-between;
                            "
                          >
                            {{ item.order_lab_number }} {{ item.patient_name }}
                            <kbd v-if="item.status === 'New'" class="success">{{
                              item.status
                            }}</kbd>
                            <kbd
                              v-if="item.status === 'Skip'"
                              class="warning"
                              >{{ item.status }}</kbd
                            >
                          </v-list-tile-title>
                        </v-list-tile-content>
                      </v-list-tile>
                      <v-divider></v-divider>
                    </template>
                  </v-list>
                </div>
              </v-flex>
            </v-layout>
          </v-container>
        </v-flex>
      </v-layout>

      <v-layout v-else-if="queueList.length === 2" row fill-height>
        <v-flex xs6 v-for="(item, index) in queueList" class="px-2">
          <div
            class="grid-box elevation-10"
            style="height: 85vh; border-radius: 24px;"
          >
            <v-toolbar
              color="cyan"
              dark
              class="elevation-0 text-center"
              style="border-radius: 24px 24px 0px 0px;"
            >
              <v-toolbar-title class="font-weight-bold">
                {{ item.stationName }}
              </v-toolbar-title>
            </v-toolbar>
            <v-container fluid>
              <v-layout fill-height row wrap>
                <v-flex xs12 class="px-2">
                  <p>PROSES SAMPLING</p>
                  <v-divider></v-divider>
                  <v-list two-line>
                    <template
                      v-for="(itemProcess, indexProcess) in item.process "
                    >
                      <v-list-tile :key="itemProcess.order_lab_number">
                        <v-list-tile-content>
                          <v-list-tile-title
                            class="font-weight-bold"
                            v-html="itemProcess.order_lab_number"
                          ></v-list-tile-title>
                          <v-list-tile-sub-title
                            class="font-weight-bold"
                            v-html="itemProcess.patient_name"
                          ></v-list-tile-sub-title>
                        </v-list-tile-content>
                      </v-list-tile>
                      <v-divider></v-divider>
                    </template>
                  </v-list>
                </v-flex>
                <v-flex xs12 class="mt-5">
                  <p>ANTRIAN SELANJUTNYA</p>
                  <v-divider></v-divider>
                  <div
                    style="height: 50vh; overflow: scroll; overflow-x: hidden;"
                  >
                    <v-list class="py-1">
                      <template
                        v-for="(itemWaiting, indexWaiting) in item.waiting"
                      >
                        <v-list-tile
                          :key="itemWaiting.order_lab_number"
                          class="py-0"
                        >
                          <v-list-tile-content class="py-1">
                            <v-list-tile-title
                              style="
                                display: flex;
                                justify-content: space-between;
                              "
                            >
                              {{ itemWaiting.order_lab_number }}
                              {{ itemWaiting.patient_name }}
                              <kbd
                                v-if="itemWaiting.status === 'New'"
                                class="success"
                                >{{ itemWaiting.status }}</kbd
                              >
                              <kbd
                                v-if="itemWaiting.status === 'Skip'"
                                class="warning"
                                >{{ itemWaiting.status }}</kbd
                              >
                            </v-list-tile-title>
                          </v-list-tile-content>
                        </v-list-tile>
                        <v-divider></v-divider>
                      </template>
                    </v-list>
                  </div>
                </v-flex>
              </v-layout>
            </v-container>
          </div>
        </v-flex>
        <!-- <v-flex xs6>
          <div class="grid-box">2</div>
        </v-flex> -->
      </v-layout>

      <v-layout v-else-if="queueList.length === 3" row wrap fill-height>
        <v-flex xs4 v-for="(item, index) in queueList" class="px-2">
          <div
            class="grid-box elevation-10"
            style="height: 85vh; border-radius: 24px;"
          >
            <v-toolbar
              color="cyan"
              dark
              class="elevation-0 text-center"
              style="border-radius: 24px 24px 0px 0px;"
            >
              <v-toolbar-title class="font-weight-bold">
                {{ item.stationName }}
              </v-toolbar-title>
            </v-toolbar>
            <v-container fluid>
              <v-layout fill-height row wrap>
                <v-flex xs12 class="px-2">
                  <p>PROSES SAMPLING</p>
                  <v-divider></v-divider>
                  <v-list two-line>
                    <template
                      v-for="(itemProcess, indexProcess) in item.process "
                    >
                      <v-list-tile :key="itemProcess.order_lab_number">
                        <v-list-tile-content>
                          <v-list-tile-title
                            class="font-weight-bold"
                            v-html="itemProcess.order_lab_number"
                          ></v-list-tile-title>
                          <v-list-tile-sub-title
                            class="font-weight-bold"
                            v-html="itemProcess.patient_name"
                          ></v-list-tile-sub-title>
                        </v-list-tile-content>
                      </v-list-tile>
                      <v-divider></v-divider>
                    </template>
                  </v-list>
                </v-flex>
                <v-flex xs12 class="mt-5">
                  <p>ANTRIAN SELANJUTNYA</p>
                  <v-divider></v-divider>
                  <div
                    style="height: 50vh; overflow: scroll; overflow-x: hidden;"
                  >
                    <v-list class="py-1">
                      <template
                        v-for="(itemWaiting, indexWaiting) in item.waiting"
                      >
                        <v-list-tile
                          :key="itemWaiting.order_lab_number"
                          class="py-0"
                        >
                          <v-list-tile-content class="py-1">
                            <v-list-tile-title
                              style="
                                display: flex;
                                justify-content: space-between;
                              "
                            >
                              {{ itemWaiting.order_lab_number }}
                              {{ itemWaiting.patient_name }}
                              <kbd
                                v-if="itemWaiting.status === 'New'"
                                class="success"
                                >{{ itemWaiting.status }}</kbd
                              >
                              <kbd
                                v-if="itemWaiting.status === 'Skip'"
                                class="warning"
                                >{{ itemWaiting.status }}</kbd
                              >
                            </v-list-tile-title>
                          </v-list-tile-content>
                        </v-list-tile>
                        <v-divider></v-divider>
                      </template>
                    </v-list>
                  </div>
                </v-flex>
              </v-layout>
            </v-container>
          </div>
        </v-flex>
        <!-- <v-flex xs4 class="pr-2 pb-1">
          <div
            class="grid-box elevation-10"
            style="height: 43vh; border-radius: 24px;"
          >
            <v-toolbar
              color="cyan"
              dark
              class="elevation-0 text-center"
              style="border-radius: 24px 24px 0px 0px;"
            >
              <v-toolbar-title class="font-weight-bold">
                {{ queueList[0].stationName }}
              </v-toolbar-title>
            </v-toolbar>
            <v-container fluid class="py-2 px-3">
              <v-layout fill-height row wrap>
                <v-flex xs12 class="px-2">
                  <p>PROSES SAMPLING</p>
                  <v-divider></v-divider>
                  <v-list two-line>
                    <template v-for="(item, index) in queueList[0].process ">
                      <v-list-tile :key="item.order_lab_number">
                        <v-list-tile-content>
                          <v-list-tile-title
                            class="font-weight-bold"
                            v-html="item.order_lab_number"
                          ></v-list-tile-title>
                          <v-list-tile-sub-title
                            class="font-weight-bold"
                            v-html="item.patient_name"
                          ></v-list-tile-sub-title>
                        </v-list-tile-content>
                      </v-list-tile>
                      <v-divider></v-divider>
                    </template>
                  </v-list>
                </v-flex>
                <v-flex xs12 class="mt-2">
                  <p>ANTRIAN SELANJUTNYA</p>
                  <v-divider></v-divider>
                  <div
                    style="height: 15vh; overflow: scroll; overflow-x: hidden;"
                  >
                    <v-list dense class="py-1">
                      <template v-for="(item, index) in queueList[0].waiting">
                        <v-list-tile :key="item.order_lab_number" class="py-0">
                          <v-list-tile-content class="py-1">
                            <v-list-tile-title
                              style="
                                display: flex;
                                justify-content: space-between;
                              "
                            >
                              {{ item.order_lab_number }}
                              {{ item.patient_name }}
                              <kbd
                                v-if="item.status === 'New'"
                                class="success"
                                >{{ item.status }}</kbd
                              >
                              <kbd
                                v-if="item.status === 'Skip'"
                                class="warning"
                                >{{ item.status }}</kbd
                              >
                            </v-list-tile-title>
                          </v-list-tile-content>
                        </v-list-tile>
                        <v-divider></v-divider>
                      </template>
                    </v-list>
                  </div>
                </v-flex>
              </v-layout>
            </v-container>
          </div>
        </v-flex>
        <v-flex xs4 class="pl-2 pb-1">
          <div
            class="grid-box elevation-10"
            style="height: 43vh; border-radius: 24px;"
          >
            <v-toolbar
              color="cyan"
              dark
              class="elevation-0 text-center"
              style="border-radius: 24px 24px 0px 0px;"
            >
              <v-toolbar-title class="font-weight-bold">
                {{ queueList[1].stationName }}
              </v-toolbar-title>
            </v-toolbar>
            <v-container fluid class="py-2 px-3">
              <v-layout fill-height row wrap>
                <v-flex xs12 class="px-2">
                  <p>PROSES SAMPLING</p>
                  <v-divider></v-divider>
                  <v-list dense two-line>
                    <template v-for="(item, index) in queueList[1].process ">
                      <v-list-tile :key="item.order_lab_number">
                        <v-list-tile-content>
                          <v-list-tile-title
                            class="font-weight-bold"
                            v-html="item.order_lab_number"
                          ></v-list-tile-title>
                          <v-list-tile-sub-title
                            class="font-weight-bold"
                            v-html="item.patient_name"
                          ></v-list-tile-sub-title>
                        </v-list-tile-content>
                      </v-list-tile>
                      <v-divider></v-divider>
                    </template>
                  </v-list>
                </v-flex>
                <v-flex xs12 class="mt-2">
                  <p>ANTRIAN SELANJUTNYA</p>
                  <v-divider></v-divider>
                  <div
                    style="height: 15vh; overflow: scroll; overflow-x: hidden;"
                  >
                    <v-list dense class="py-1">
                      <template v-for="(item, index) in queueList[1].waiting">
                        <v-list-tile :key="item.order_lab_number" class="py-0">
                          <v-list-tile-content class="py-1">
                            <v-list-tile-title
                              style="
                                display: flex;
                                justify-content: space-between;
                              "
                            >
                              {{ item.order_lab_number }}
                              {{ item.patient_name }}
                              <kbd
                                v-if="item.status === 'New'"
                                class="success"
                                >{{ item.status }}</kbd
                              >
                              <kbd
                                v-if="item.status === 'Skip'"
                                class="warning"
                                >{{ item.status }}</kbd
                              >
                            </v-list-tile-title>
                          </v-list-tile-content>
                        </v-list-tile>
                        <v-divider></v-divider>
                      </template>
                    </v-list>
                  </div>
                </v-flex>
              </v-layout>
            </v-container>
          </div>
        </v-flex>
        <v-flex xs4 class="pt-2">
          <div
            class="grid-box elevation-10"
            style="height: 43vh; border-radius: 24px;"
          >
            <v-toolbar
              color="cyan"
              dark
              class="elevation-0 text-center"
              style="border-radius: 24px 24px 0px 0px;"
            >
              <v-toolbar-title class="font-weight-bold">
                {{ queueList[2].stationName }}
              </v-toolbar-title>
            </v-toolbar>
            <v-container fluid class="py-2 px-3">
              <v-layout fill-height row wrap>
                <v-flex xs12 class="px-2">
                  <p>PROSES SAMPLING</p>
                  <v-divider></v-divider>
                  <v-list dense two-line>
                    <template v-for="(item, index) in queueList[2].process ">
                      <v-list-tile :key="item.order_lab_number">
                        <v-list-tile-content>
                          <v-list-tile-title
                            class="font-weight-bold"
                            v-html="item.order_lab_number"
                          ></v-list-tile-title>
                          <v-list-tile-sub-title
                            class="font-weight-bold"
                            v-html="item.patient_name"
                          ></v-list-tile-sub-title>
                        </v-list-tile-content>
                      </v-list-tile>
                      <v-divider></v-divider>
                    </template>
                  </v-list>
                </v-flex>
                <v-flex xs12 class="mt-2">
                  <p>ANTRIAN SELANJUTNYA</p>
                  <v-divider></v-divider>
                  <div
                    style="height: 15vh; overflow: scroll; overflow-x: hidden;"
                  >
                    <v-list dense class="py-1">
                      <template v-for="(item, index) in queueList[2].waiting">
                        <v-list-tile :key="item.order_lab_number" class="py-0">
                          <v-list-tile-content class="py-1">
                            <v-list-tile-title
                              style="
                                display: flex;
                                justify-content: space-between;
                              "
                            >
                              {{ item.order_lab_number }}
                              {{ item.patient_name }}
                              <kbd
                                v-if="item.status === 'New'"
                                class="success"
                                >{{ item.status }}</kbd
                              >
                              <kbd
                                v-if="item.status === 'Skip'"
                                class="warning"
                                >{{ item.status }}</kbd
                              >
                            </v-list-tile-title>
                          </v-list-tile-content>
                        </v-list-tile>
                        <v-divider></v-divider>
                      </template>
                    </v-list>
                  </div>
                </v-flex>
              </v-layout>
            </v-container>
          </div>
        </v-flex> -->
      </v-layout>

      <v-layout v-else-if="queueList.length === 4" column fill-height>
        <v-layout row fill-height>
          <v-flex xs3 v-for="(item, index) in queueList" class="px-2">
            <div
              class="grid-box elevation-10"
              style="height: 85vh; border-radius: 24px;"
            >
              <v-toolbar
                color="cyan"
                dark
                class="elevation-0 text-center"
                style="border-radius: 24px 24px 0px 0px;"
              >
                <v-toolbar-title class="font-weight-bold">
                  {{ item.stationName }}
                </v-toolbar-title>
              </v-toolbar>
              <v-container fluid>
                <v-layout fill-height row wrap>
                  <v-flex xs12 class="px-2">
                    <p>PROSES SAMPLING</p>
                    <v-divider></v-divider>
                    <v-list two-line>
                      <template
                        v-for="(itemProcess, indexProcess) in item.process "
                      >
                        <v-list-tile :key="itemProcess.order_lab_number">
                          <v-list-tile-content>
                            <v-list-tile-title
                              class="font-weight-bold"
                              v-html="itemProcess.order_lab_number"
                            ></v-list-tile-title>
                            <v-list-tile-sub-title
                              class="font-weight-bold"
                              v-html="itemProcess.patient_name"
                            ></v-list-tile-sub-title>
                          </v-list-tile-content>
                        </v-list-tile>
                        <v-divider></v-divider>
                      </template>
                    </v-list>
                  </v-flex>
                  <v-flex xs12 class="mt-5">
                    <p>ANTRIAN SELANJUTNYA</p>
                    <v-divider></v-divider>
                    <div
                      style="
                        height: 50vh;
                        overflow: scroll;
                        overflow-x: hidden;
                      "
                    >
                      <v-list class="py-1">
                        <template
                          v-for="(itemWaiting, indexWaiting) in item.waiting"
                        >
                          <v-list-tile
                            :key="itemWaiting.order_lab_number"
                            class="py-0"
                          >
                            <v-list-tile-content class="py-1">
                              <v-list-tile-title>
                                {{ itemWaiting.order_lab_number }}
                                {{ itemWaiting.patient_name }}
                              </v-list-tile-title>
                            </v-list-tile-content>
                            <v-list-tile-action>
                              <!-- <v-icon color="pink">star</v-icon> -->
                              <kbd
                                v-if="itemWaiting.status === 'New'"
                                class="success"
                                >{{ itemWaiting.status }}</kbd
                              >
                              <kbd
                                v-if="itemWaiting.status === 'Skip'"
                                class="warning"
                                >{{ itemWaiting.status }}</kbd
                              >
                            </v-list-tile-action>
                          </v-list-tile>
                          <v-divider></v-divider>
                        </template>
                      </v-list>
                    </div>
                  </v-flex>
                </v-layout>
              </v-container>
            </div>
          </v-flex>
        </v-layout>
      </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: {
      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: {
      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: "10%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "TEST",
            align: "center",
            sortable: false,
            value: "lab",
            width: "25%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "AMOUNT",
            align: "center",
            sortable: false,
            value: "lab",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "DISKON",
            align: "center",
            sortable: false,
            value: "name",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "DISKON RP",
            align: "center",
            sortable: false,
            value: "name",
            width: "15%",
            class: "pa-2 blue darken-2 white--text",
          },
          {
            text: "TOTAL",
            align: "center",
            sortable: false,
            value: "status",
            width: "20%",
            class: "pa-2 blue darken-2 white--text",
          },
        ],
      };
    },
  };
</script>
