<template>
  <div>
    <v-layout class="fill-height" column>
      <v-layout align-center column>
        <v-card style="width: 100%" class="mb-2 pa-2 searchbox">
          <v-layout row wrap>
            <v-flex xs12 md12 lg3 >
              <v-autocomplete
                label="proyek MCU"
                v-model="selectedSetup"
                :items="setupList"
                item-text="Mgm_McuLabel"
                outline
                class="mr-2 mb-2"
                hide-details
                :disabled="loading"
                return-object
                :loading="loading"
                no-data-text="Pilih Proyek MCU"
              >
                  <template slot="item" slot-scope="{ item }">
                  <template>
                    <v-list-tile-content>
                      <v-list-tile-title
                        >{{ item.Mgm_McuNumber }} -
                        {{ item.Mgm_McuLabel }}</v-list-tile-title
                      >
                      <v-list-tile-sub-title>
                        {{ item.Mgm_McuStartDate }}/
                        {{ item.Mgm_McuEndDate }}</v-list-tile-sub-title
                      >
                    </v-list-tile-content>
                  </template>
                </template></v-autocomplete
              </v-autocomplete>
            </v-flex>
            <v-flex xs6 md6 lg3 class="">
              <v-menu
                v-model="menuFormDateStart"
                :close-on-content-click="false"
                :nudge-right="40"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                max-width="290px"
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    class="mr-2 mb-2"
                    v-model="formatedStartDate"
                    label="Tanggal Awal"
                    outline
                    hide-details
                    readonly
                    v-on="on"
                    @blur="deFormatedDate(formatedStartDate)"
                  ></v-text-field>
                </template>
                <v-date-picker
                  v-model="startDate"
                  no-title
                  @input="menuFormDateStart = false"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex xs6 md6 lg3 class="">
              <v-menu
                v-model="menuFormDateEnd"
                :close-on-content-click="false"
                :nudge-right="40"
                lazy
                transition="scale-transition"
                offset-y
                full-width
                max-width="290px"
                min-width="290px"
              >
                <template v-slot:activator="{ on }">
                  <v-text-field
                    class="mr-2 mb-2"
                    v-model="formatedEndDate"
                    label="Tanggal Akhir"
                    outline
                    readonly
                    hide-details
                    v-on="on"
                    @blur="deFormatedDate(formatedEndDate)"
                  ></v-text-field>
                </template>
                <v-date-picker
                  v-model="endDate"
                  no-title
                  @input="menuFormDateEnd = false"
                ></v-date-picker>
              </v-menu>
            </v-flex>
            <v-flex xs12 md12 lg3>
              <v-text-field
                label="Cari..."
                outline
                class="mr-2 mb-2"
                hide-details
                v-model="search"
              ></v-text-field>
            </v-flex>
          </v-layout>
        </v-card>
      </v-layout>
      <v-card style="overflow-y: scroll; height: 65vh" class="fill-height">
        <v-data-table
          :loading="loading"
          :items="orderList"
          :headers="headers"
          class="v-table elevation-1"
          hide-actions
        >
          <template v-slot:headers="props">
            <tr>
              <th
                v-for="header in props.headers"
                :width="header.width"
                :class="header.class"
              >
                {{ header.text }}
              </th>
            </tr>
          </template>
          <v-progress-linear
            v-slot:progress="loading"
            color="blue"
            :indeterminate="true"
          ></v-progress-linear>
          <template v-slot:items="props">
            <tr @click="redirectUploadDocument(props.item)">
              <td class="py-2">
                {{ props.item.patientName }}
              </td>
              <td class="py-2">
                {{ props.item.labNumber }}
              </td>
             
            </tr>
          </template>
        </v-data-table>
      </v-card>
      <v-card class="pa-2">
        <div class="text-xs-left">
          <v-pagination
            v-model="page"
            :length="total"
          ></v-pagination>
        </div>
      </v-card>
    </v-layout>
  </div>
</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;
}
.scroll-container {
  scroll-padding: 50px 0 0 50px;
}

::-webkit-scrollbar {
  width: 7px;
}

/* this targets the default scrollbar (compulsory) */

::-webkit-scrollbar-track {
  background-color: #73baf3;
}

/* the new scrollbar will have a flat appearance with the set background color */

::-webkit-scrollbar-thumb {
  background-color: #2196f3;
}

/* this will style the thumb, ignoring the track */

::-webkit-scrollbar-button {
  background-color: #0079da;
}

/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */

::-webkit-scrollbar-corner {
  background-color: black;
}
</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("patient/getsetup");
    this.$store.dispatch("patient/search");
  },
  methods: {
    redirectUploadDocument(data){
        // noreg=R2407150001&id=322
        let link = window.location.protocol + "//" + window.location.hostname+"/one-ui/" + this.url+"?noreg="+data.labNumber+"&id="+data.orderID;
        
        window.open(link, '_blank')
    },
    formatDate(date) {
      if (!date) return null;

      const [year, month, day] = date.split("-");
      return `${day}-${month}-${year}`;
    },
    deFormatedDate(date) {
      if (!date) return null;

      const [day, month, year] = date.split("-");
      return `${year}-${month.padStart(2, "0")}-${day.padStart(2, "0")}`;
    },
  },
  computed: {
    url: {
      get() {
        return this.$store.state.patient.url;
      },
      set(val) {
        this.$store.commit("patient/update_url", val);
      },
    },
    total: {
      get() {
        return this.$store.state.patient.total;
      },
      set(val) {
        this.$store.commit("patient/update_total", val);
      },
    },
    loading: {
      get() {
        return this.$store.state.patient.loading;
      },
      set(val) {
        this.$store.commit("patient/update_loading", val);
      },
    },
    search: {
      get() {
        return this.$store.state.patient.search;
      },
      set(val) {
        this.$store.commit("patient/update_search", val);
        this.$store.commit("patient/update_page", 1);

        this.$store.dispatch("patient/search");
      },
    },
    setupList: {
      get() {
        return this.$store.state.patient.setupList;
      },
      set(val) {
        this.$store.commit("patient/update_setupList", val);
      },
    },
    selectedSetup: {
      get() {
        return this.$store.state.patient.selectedSetup;
      },
      set(val) {
        this.$store.commit("patient/update_selectedSetup", val);
        this.$store.commit("patient/update_startDate", val.Mgm_McuStartDate);
        this.$store.commit("patient/update_endDate", val.Mgm_McuEndDate);
        this.$store.commit("patient/update_page", 1);
        
        this.$store.dispatch("patient/search");
      },
    },
    orderList: {
      get() {
        return this.$store.state.patient.orderList;
      },
      set(val) {
        this.$store.commit("patient/update_orderList", val);
      },
    },
    successMsg: {
      get() {
        return this.$store.state.patient.successMsg;
      },
      set(val) {
        this.$store.commit("patient/update_successMsg", val);
      },
    },
    errorMsg: {
      get() {
        return this.$store.state.patient.errorMsg;
      },
      set(val) {
        this.$store.commit("patient/update_errorMsg", val);
      },
    },
    snackbarError: {
      get() {
        return this.$store.state.patient.snackbarError;
      },
      set(val) {
        this.$store.commit("patient/update_snackbarError", val);
      },
    },
    snackbarSuccess: {
      get() {
        return this.$store.state.patient.snackbarSuccess;
      },
      set(val) {
        this.$store.commit("patient/update_snackbarSuccess", val);
      },
    },
    page: {
      get() {
        return this.$store.state.patient.page;
      },
      set(val) {
        this.$store.commit("patient/update_page", val);
        this.$store.dispatch("patient/search");

      },
    },
    startDate: {
      get() {
        return this.$store.state.patient.startDate;
      },
      set(val) {
        this.$store.commit("patient/update_startDate", val);
        this.$store.dispatch("patient/search");
        this.$store.commit("patient/update_page", 1);


      },
    },
    endDate: {
      get() {
        return this.$store.state.patient.endDate;
      },
      set(val) {
        this.$store.commit("patient/update_endDate", val);
        this.$store.dispatch("patient/search");
        this.$store.commit("patient/update_page", 1);


      },
    },
    formatedStartDate() {
      return this.formatDate(this.startDate);
    },
    formatedEndDate() {
      return this.formatDate(this.endDate);
    },
  },
  watch: {},
  data() {
    return {
      menuFormDateStart: false,
      menuFormDateEnd: false,
      headers: [
        {
          text: "NAMA",
          align: "center",
          sortable: false,
          value: "lab",
          width: "10%",
          class: "pa-2 blue darken-2 white--text",
        },
        {
          text: "NO LAB",
          align: "center",
          sortable: false,
          value: "lab",
          width: "25%",
          class: "pa-2 blue darken-2 white--text",
        },
      ],
    };
  },
};
</script>
