<template>
  <v-layout class="fill-height" column>
    <v-dialog v-model="dialog_success" width="500">
      <v-card>
        <v-card-title class="headline info lighten-2" primary-title dark>
          Info
        </v-card-title>

        <v-card-text>
          <p>Pergabungan sukses</p>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="grey" flat @click="closeSuccess()"> Tutup </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-dialog v-model="dialog_alert" width="500">
      <v-card>
        <v-card-title class="headline red lighten-2" primary-title dark>
          Peringatan
        </v-card-title>

        <v-card-text>
          {{ msg_alert }}
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="grey" flat @click="dialog_alert = false"> Batal </v-btn>
          <v-btn color="primary" v-if="bolehjalan" @click="doGabungkan()">Lakukan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <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-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 warning 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-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.NPK }}</p>
                <p class="font-weight-black caption mb-0">
                  PATIENT_ID Lama : {{ props.item.PATIENT_ID }}
                </p>
                <p class="mb-0">Department : {{ props.item.DEPT }}</p>
              </td>
              <td
                class="text-xs-left pa-2"
                v-bind:class="{ 'amber lighten-4': isSelected(props.item) }"
                @click="selectMe(props.item)"
              >
                <v-btn dark @click="gabungkan(props.item)" color="red">Gabungkan</v-btn>
              </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_old_patient", {
      startdate: this.xstartdate,
      enddate: this.xenddate,
      search: this.searchnamelab,
      status: this.status.value,
      current_page: 1,
      lastidx: 0,
    });
  },
  methods: {
    closeSuccess() {
      this.dialog_success = false;
      this.$store.dispatch("patient/search_old_patient", {
        startdate: this.xstartdate,
        enddate: this.xenddate,
        search: this.searchnamelab,
        status: this.status.value,
        current_page: this.curr_page,
        lastidx: 0,
      });
    },
    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) {
      //console.log(this.$store.state.patient.old_selected_patient);
      let x = this.$store.state.patient.old_selected_patient;
      if (!_.isEmpty(x))
        return p.REG_NO == this.$store.state.patient.old_selected_patient.REG_NO;
      else return false;
    },
    searchPatient() {
      this.$store.dispatch("patient/search_old_patient", {
        startdate: this.xstartdate,
        enddate: this.xenddate,
        search: this.searchnamelab,
        status: this.status.value,
        current_page: 1,
        lastidx: 0,
      });
    },
    selectMe(pat) {
      this.$store.commit("patient/update_old_selected_patient", pat);
    },
    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/");
    },
    doGabungkan() {
      this.loading = true;
      this.dialog_alert = false;
      var valnew = this.$store.state.patient.selected_patient;
      var valold = this.$store.state.patient.old_selected_patient;
      this.$store.dispatch("patient/gabungkan", { new: valnew, old: valold });
    },
    gabungkan(pat) {
      this.bolehjalan = false;
      this.selectMe(pat);
      var valnew = this.$store.state.patient.selected_patient;
      console.log(pat);
      if (!_.isEmpty(valnew)) {
        // console.log(pat);
        this.bolehjalan = true;
        let msg_alert =
          "Apakah anda yakin, menggabungkan pasien " +
          valnew.M_PatientName +
          " dengan " +
          pat.M_PatientName +
          " ?";
        this.msg_alert = msg_alert;
      } else {
        let xmsg_alert =
          "Anda belum memilih pasien yang akan digabungkan, klik pasien di listing sebelah kiri";
        this.msg_alert = xmsg_alert;
      }
      this.dialog_alert = true;
    },
  },
  computed: {
    msg_alert: {
      get() {
        return this.$store.state.patient.msg_alert;
      },
      set(val) {
        this.$store.commit("patient/update_msg_alert", val);
      },
    },
    dialog_alert: {
      get() {
        return this.$store.state.patient.dialog_alert;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_alert", val);
      },
    },
    loading: {
      get() {
        return this.$store.state.patient.loading;
      },
      set(val) {
        this.$store.commit("patient/update_loading", val);
      },
    },
    dialog_success: {
      get() {
        return this.$store.state.patient.dialog_success;
      },
      set(val) {
        this.$store.commit("patient/update_dialog_success", val);
      },
    },
    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.old_search;
      },
      set(val) {
        this.$store.commit("patient/update_old_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.old_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.old_current_page;
      },
      set(val) {
        this.$store.commit("patient/update_old_current_page", val);
        this.$store.dispatch("patient/search_old_patient", {
          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.old_total_page;
      },
      set(val) {
        this.$store.commit("patient/update_old_total_page", val);
      },
    },
  },

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

        {
          text: "INFO",
          align: "center",
          sortable: false,
          value: "status",
          width: "35%",
          class: "pa-2 warning 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>
