<template>
  <v-layout class="fill-height" column>
    <v-card class="mb-2 pa-2 searchbox">
      <v-layout align-center>
        <span
          title="kembali ke penyerahan hasil"
          v-if="show_btn_back"
          @click="backToFoReceiver()"
          class="icon-medium-fill-base xs1 white--text indigo darken-1"
          ><v-icon dark>reply</v-icon></span
        >
        <v-menu
          ref="menustartdate"
          v-model="menustartdate"
          :close-on-content-click="false"
          :nudge-right="0"
          lazy
          transition="scale-transition"
          offset-y
          full-width
          max-width="290px"
          min-width="290px"
        >
          <template v-slot:activator="{ on }">
            <v-text-field
              v-model="startDateFormatted"
              label="Tanggal Awal"
              readonly
              hide-details
              class="xs3 ma-1"
              outline
              v-on="on"
              @blur="deFormatedDate(startDateFormatted)"
            ></v-text-field>
          </template>
          <v-date-picker
            v-model="xstartdate"
            no-title
            @input="menustartdate = false"
          ></v-date-picker>
        </v-menu>
        <v-text-field
          class="xs3 ma-1"
          label="Cari ..."
          placeholder="Nama / No Reg / NPK"
          v-on:keyup.enter="searchPatient"
          outline
          v-model="searchnamelab"
          hide-details
        ></v-text-field>

        <span
          @click="searchPatient"
          class="icon-medium-fill-base xs1 white--text info iconsearch-search"
        ></span>
      </v-layout>
    </v-card>
    <v-card>
      <v-layout row>
        <v-flex xs12 pl-2 pr-2 pt-2 pb-2>
          <v-data-table
            :headers="headers"
            :items="patients"
            :loading="isLoading"
            hide-actions
            class="elevation-1"
          >
            <template slot="items" slot-scope="props">
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                <p class="font-weight-black caption mb-0">
                  {{ props.item.T_OrderHeaderLabNumber }}
                </p>
              </td>
              <td
                class="text-xs-center pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                {{ props.item.order_dob }}
              </td>
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                {{ props.item.M_PatientName }}
              </td>
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                <p class="mb-0">NPK : {{ props.item.M_PatientNIP }}</p>
                <p class="font-weight-black caption mb-0">
                  PATIENT_ID Lama : {{ props.item.M_PatientOldPID }}
                </p>
                <p class="mb-0">Department : {{ props.item.M_PatientDepartement }}</p>
              </td>
            </template>
          </v-data-table>
          <v-divider></v-divider>
          <v-pagination
            style="margin-top: 10px; margin-bottom: 10px"
            v-model="curr_page"
            :length="xtotal_page"
          ></v-pagination>
        </v-flex>
      </v-layout>
    </v-card>
    <one-dialog-alert
      :status="openalertnopay"
      :msg="msgalertnopay"
      @forget-dialog-alert="forgetAlertNoPay()"
      @close-dialog-alert="closeAlertNoPay()"
    ></one-dialog-alert>
  </v-layout>
</template>

<style scoped>
.searchbox .v-input.v-text-field .v-input__slot {
  min-height: 40px;
}
.searchbox .v-btn {
  min-height: 40px;
}
table.v-table tbody td,
table.v-table tbody th {
  height: 40px;
}

table.v-table thead tr {
  height: 40px;
}

.v-messages {
  min-height: 0px !important;
}

table,
td,
th {
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  text-align: left;
}

table {
  border-collapse: collapse;
  width: 100%;
}
</style>

<script>
module.exports = {
  components: {
    "one-dialog-info": httpVueLoader("../../common/oneDialogInfo.vue"),
    "one-dialog-alert": httpVueLoader("../../common/oneDialogAlert.vue"),
  },
  mounted() {
    var url_string = window.location.href;
    var url = new URL(url_string);
    var id = url.searchParams.get("id");
    var xdate = url.searchParams.get("xdate");
    var type = url.searchParams.get("type");
    if (id) {
      this.xstartdate = xdate;
      this.xenddate = xdate;
      this.searchnamelab = id;
      this.status = { name: "Belum Lunas", value: "N" };
      this.show_btn_back = true;
      this.type_back_btn = type;
    }

    this.$store.dispatch("patient/search", {
      startdate: this.xstartdate,
      enddate: this.xenddate,
      search: this.searchnamelab,
      status: this.status.value,
      current_page: 1,
      lastidx: 0,
    });
  },
  methods: {
    thr_search_company: _.debounce(function () {
      this.$store.dispatch("patient/searchcompany", this.search_company);
    }, 2000),
    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")}`;
    },
    isSelected(p) {
      return (
        p.T_OrderHeaderID == this.$store.state.patient.selected_patient.T_OrderHeaderID
      );
    },
    searchPatient() {
      this.$store.dispatch("patient/search", {
        startdate: this.xstartdate,
        enddate: this.xenddate,
        search: this.searchnamelab,
        status: this.status.value,
        current_page: 1,
        lastidx: 0,
      });
    },
    selectMe(pat) {
      let totpay = this.$store.state.paymentnew.total_payment;
      if (totpay === 0) {
        let xobj = this.$store.state.paymentnew.types;
        console.log(xobj);
        xobj.forEach(function (obj) {
          obj.chex = false;
          obj.leftvalue = 0;
          obj.rightvalue = 0;
          obj.selected_card = { id: 0, name: "" };
          obj.selected_edc = { id: 0, name: "" };
        });
        this.$store.commit("paymentnew/update_types", {
          records: xobj,
          total: xobj.length,
        });
        this.$store.commit("patient/update_selected_patient", pat);
        this.$store.commit("paymentnew/update_total_payment", 0);
        this.$store.commit("paymentnew/update_notes", pat.notes);
      } else {
        this.$store.commit("patient/update_open_alert_no_pay", true);
      }
    },
    editorder(pat) {
      this.$store.commit("test/update_orderid", pat.T_OrderHeaderID);
      this.$store.commit("test/update_mouid", pat.T_OrderHeaderM_MouID);
      console.log("edit order");
      this.$store.commit("test/update_test_dialog", true);
      this.$store.commit("test/update_test_all", []);
      this.$store.dispatch("test/lookup", { orderid: pat.T_OrderHeaderID });
      this.$store.dispatch("test/lookup_promises", { orderid: pat.T_OrderHeaderID });
      this.$store.commit("test/update_test_message", "");
      this.$store.commit("test/update_save_status", 0);
      this.$store.commit("test/update_save_status_verification", 0);
      this.$store.commit("test/update_show_cito_dropdown", "N");
      this.$store.commit("test/update_selected_cito", {});
      this.$store.commit("test/update_test_dialog", true);
    },
    closeAlertNoPay() {
      this.$store.commit("patient/update_open_alert_no_pay", false);
    },
    forgetAlertNoPay() {
      var xval = this.$store.state.paymentnew.types;
      var valpay = 0;
      xval.forEach(function (obj) {
        obj.chex = false;
        obj.leftvalue = 0;
        obj.rightvalue = 0;
        obj.selected_card = { id: 0, name: "" };
        obj.selected_edc = { id: 0, name: "" };
      });
      this.$store.commit("paymentnew/update_total_payment", 0);
      this.$store.commit("patient/update_open_alert_no_pay", false);
    },
    backToFoReceiver() {
      this.show_btn_back = false;
      if (this.type_back_btn === "fo")
        location.replace("/one-ui/test/vuex/one-fo-handover-patient/");
      if (this.type_back_btn === "email")
        location.replace("/one-ui/test/vuex/one-fo-handover-email/");
    },
  },
  computed: {
    xcompanies() {
      return this.$store.state.patient.companies;
    },
    selected_company: {
      get() {
        return this.$store.state.patient.selected_company;
      },
      set(val) {
        this.$store.commit("patient/update_selected_company", val);
        this.searchPatient();
      },
    },
    xstartdate: {
      get() {
        return this.$store.state.patient.start_date;
      },
      set(val) {
        this.$store.commit("patient/update_start_date", val);
        this.$store.dispatch("patient/searchcompany", "");
        this.searchPatient();
      },
    },
    xenddate: {
      get() {
        return this.$store.state.patient.end_date;
      },
      set(val) {
        this.$store.commit("patient/update_end_date", val);
        this.searchPatient();
      },
    },
    searchnamelab: {
      get() {
        return this.$store.state.patient.search;
      },
      set(val) {
        this.$store.commit("patient/update_search", val);
      },
    },
    statuses() {
      return this.$store.state.patient.statuses;
    },
    status: {
      get() {
        return this.$store.state.patient.selected_status;
      },
      set(val) {
        this.$store.commit("patient/update_selected_status", val);
        this.searchPatient();
      },
    },
    startDateFormatted() {
      return this.formatDate(this.xstartdate);
    },
    endDateFormatted() {
      return this.formatDate(this.xenddate);
    },
    isLoading() {
      return this.$store.state.patient.search_status == 1;
    },
    patients() {
      return this.$store.state.patient.patients;
    },
    openalertnopay: {
      get() {
        return this.$store.state.patient.open_alert_no_pay;
      },
      set(val) {
        this.$store.commit("patient/update_open_alert_no_pay", false);
      },
    },
    msgalertnopay() {
      return this.$store.state.patient.msg_alert_no_pay;
    },
    curr_page: {
      get() {
        return this.$store.state.patient.current_page;
      },
      set(val) {
        this.$store.commit("patient/update_current_page", val);
        this.$store.dispatch("patient/search", {
          startdate: this.xstartdate,
          enddate: this.xenddate,
          search: this.searchnamelab,
          status: this.status.value,
          current_page: val,
          lastidx: 0,
        });
      },
    },
    xtotal_page: {
      get() {
        return this.$store.state.patient.total_page;
      },
      set(val) {
        this.$store.commit("patient/update_total_page", val);
      },
    },
  },

  data() {
    return {
      items: [],
      search_company: "",
      menustartdate: false,
      menuenddate: false,
      show_btn_back: false,
      type_back_btn: "",
      headers: [
        {
          text: "TGL. TRANSAKSI",
          align: "center",
          sortable: false,
          value: "mr",
          width: "10%",
          class: "pa-2 info white--text",
        },
        {
          text: "DOB",
          align: "center",
          sortable: false,
          value: "lab",
          width: "14%",
          class: "pa-2 info white--text",
        },
        {
          text: "NAMA",
          align: "center",
          sortable: false,
          value: "name",
          width: "25%",
          class: "pa-2 info white--text",
        },

        {
          text: "INFO",
          align: "center",
          sortable: false,
          value: "status",
          width: "35%",
          class: "pa-2 info white--text",
        },
        /* {
               text: "AKSI",
               align: "center",
               sortable: false,
               value: "aksi",
               width: "10%",
               class: "pa-2 warning white--text"
            }*/
      ],
    };
  },
  watch: {
    search_company(val, old) {
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.$store.state.patient.update_autocomplete_status == 1) return;
      this.thr_search_company();
    },
  },
};
</script>
