<template>
  <div>
    <!-- style="width: 100%; height: 100%; background-color: red;" -->
    <!-- <v-dialog persistent v-model="dialogValidasi" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          <v-layout align-center justify-space-between row fill-height>
            <div>KONFIRMASI</div>
          </v-layout>
        </v-card-title>
        <v-card-text
          >Apakah anda yakin akan mevalidasi
          <kbd class="mx-2">{{ selectedPriceHeader.headerCode }}</kbd>
          <span>{{ selectedPriceHeader.headerName }}</span> ?
        </v-card-text>
        <v-divider></v-divider>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="error"
            :disabled="loading"
            flat
            @click="dialogValidasi = false"
          >
            BATAL
          </v-btn>
          <v-btn
            color="success"
            :disabled="loading"
            flat
            @click="validateHeader()"
          >
            YAKIN
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog> -->
    <v-layout class="fill-height" style="width: 100%; height: 100%;" column>
      <v-card
        v-if="!loading"
        style="height: 100%; border-radius: 24px; width: 50vw;"
        class="mx-5 p-3"
      >
        <v-card-title class="headline font-weight-bold">
          SETTING ANTRIAN WESTERINDO
        </v-card-title>
        <v-card-text>
          <v-layout row wrap>
            <v-flex xs12>
              <v-text-field
                label="TITLE *"
                v-model="title"
                hide-details
                outline
              ></v-text-field>
            </v-flex>
            <v-flex xs12>
              <v-select
                v-model="selectedStation"
                :items="stationList"
                class="mini-select mt-3"
                :menu-props="{ maxHeight: '400' }"
                item-text="stationName"
                label="STATION *"
                hide-details
                return-object
                multiple
                outline
              ></v-select>
            </v-flex>
            <v-flex xs12>
              <v-select
                class="mt-3 mini-select"
                v-model="selectedBranch"
                :items="branchList"
                return-object
                hide-details
                item-text="M_BranchName"
                label="CABANG *"
                outline
              ></v-select>
            </v-flex>
            <v-flex xs12>
              <v-checkbox v-model="onSite" label="Antrian onsite"></v-checkbox>
            </v-flex>
            <v-flex xs12 v-if="onSite">
              <v-autocomplete
                class="mt-3"
                label="Pilih Proyek MCU"
                v-model="selectedSetup"
                :items="setupList"
                :item-text="
                    (item) => item.Mgm_McuNumber + ' - ' + item.Mgm_McuLabel
                  "
                outline
                hide-details
                return-object
                no-data-text="Pilih Proyek MCU"
              >
                <!-- <template slot="item" slot-scope="{ item }">
                    <v-list-tile-content>
                      <v-list-tile-title
                        :v-text="(itm) => itm.Mgm_McuNumber + ' - ' + itm.Mgm_McuLabel"
                      ></v-list-tile-title>
                    </v-list-tile-content>
                  </template> -->
              </v-autocomplete>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn flat color="success" @click="save()">SIMPAN</v-btn>
        </v-card-actions>
      </v-card>
      <v-card v-if="loading" class="pa-5">
        <v-progress-circular
          v-if="loading"
          :size="70"
          :width="7"
          color="green"
          indeterminate
        ></v-progress-circular>
      </v-card>
    </v-layout>
  </div>
</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() {
      // this.$store.dispatch("queue/getStation");
      // this.$store.dispatch("queue/getStation");
    },
    methods: {
      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;
        }
        if (this.onSite) {
          if (this.isObjectEmpty(this.selectedSetup)) {
            alert("Pilih salah satu proyek mcu");
            return;
          }
          // alert("Pilih station maksimal 4");
          // return;
        }

        let local = {
          title: this.title,
          station: this.selectedStation,
          branch: this.selectedBranch,
          onSite: this.onSite,
          setup: this.selectedSetup,
        };

        localStorage.setItem("queue-west", JSON.stringify(local));
        var elem = document.documentElement;

        /* View in fullscreen */

        if (elem.requestFullscreen) {
          elem.requestFullscreen();
        } else if (elem.webkitRequestFullscreen) {
          /* Safari */
          elem.webkitRequestFullscreen();
        } else if (elem.msRequestFullscreen) {
          /* IE11 */
          elem.msRequestFullscreen();
        }
        this.$store.dispatch("queue/getAntrian");
        this.screen = "display";
      },
    },
    computed: {
      onSite: {
        get() {
          return this.$store.state.queue.onSite;
        },
        set(val) {
          this.$store.commit("queue/update_onSite", val);
        },
      },
      selectedSetup: {
        get() {
          return this.$store.state.queue.selectedSetup;
        },
        set(val) {
          this.$store.commit("queue/update_selectedSetup", val);
        },
      },
      setupList: {
        get() {
          return this.$store.state.queue.setupList;
        },
        set(val) {
          this.$store.commit("queue/update_setupList", 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);
          this.selectedSetup = {};
          this.$store.dispatch("queue/getSetup");
        },
      },
    },
    watch: {
      onSite(val, old) {
        if (val == false) {
          this.selectedSetup = {};
        }
      },
    },
    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>
