<template>
  <div>
    <v-dialog persistent v-model="dialogDoctor" width="500">
      <!-- <template v-slot:activator="{ on }">
        <v-btn color="red lighten-2" dark v-on="on"> Click Me </v-btn>
      </template> -->

      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Pilih Dokter
        </v-card-title>

        <v-card-text>
          <v-autocomplete label="Dokter" v-model="selectedDoctor" class="mt-1" :items="doctorList"
            :search-input.sync="searchDoctor" auto-select-first hide-details style="font-size: 14px" no-filter
            item-text="doctorName" return-object :loading="loading" no-data-text="Pilih Dokter">
            <!-- :disabled="disableAutocomplete()" -->
            <template slot="item" slot-scope="{ item }">
              <v-list-tile-content>
                <v-list-tile-title v-text="item.doctorName"></v-list-tile-title>
              </v-list-tile-content>
            </template>
          </v-autocomplete>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="error" flat @click="closeDialogDoctor()"> Tutup </v-btn>
          <v-btn color="success" flat @click="saveDoctor()">Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-layout class="fill-height" column>
      <v-card class="pa-2">
        <v-layout row wrap>
          <v-flex xs2>
            <v-card class="pa-2 blue darken-4">
              <v-img :src="selectedPatient.patientFotoThumb" height="160" contain></v-img>
            </v-card>
          </v-flex>
          <v-flex xs10>
            <v-layout row wrap>
              <v-flex xs12 class="ml-3">
                <p class="display-1 font-weight-bold">
                  {{ selectedPatient.labNumber }}
                </p>
              </v-flex>
              <v-flex xs12 class="ml-3"><v-divider></v-divider></v-flex>
              <v-flex xs5 class="ml-3"><v-text-field label="NAMA PASIEN" readonly
                  v-model="selectedPatient.patientFullname">
                </v-text-field></v-flex>
              <v-flex xs5 class="ml-3"><v-text-field label="JENIS KELAMIN" readonly
                  v-model="selectedPatient.patientGender"></v-text-field></v-flex>
              <v-flex xs5 class="ml-3"><v-text-field label="UMUR" readonly
                  v-model="selectedPatient.patientAge"></v-text-field></v-flex>
              <v-flex xs5 class="ml-3"><v-text-field label="PERUSAHAAN" readonly
                  v-model="selectedPatient.corporateName"></v-text-field></v-flex>
            </v-layout>
          </v-flex>
        </v-layout>
      </v-card>
      <v-card class="pa-3 mt-2 fill-height" style="overflow-y: scroll; height: 65vh"> 
        <v-layout align-center row pb-2>
          <v-flex xs2>
            <span style="font-size:12px">Berat Badan</span>
          </v-flex>
          <v-flex xs4>
            <v-text-field style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important" outline
              single-line hide-details></v-text-field>
          </v-flex>
          <v-flex xs3 pl-1>
            <span class="mono" style="font-size:12px">kg</span>
          </v-flex>
          <v-flex xs2>
            <span style="font-size:12px">Tinggi Badan</span>
          </v-flex>
          <v-flex xs4>
            <v-text-field style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important" outline
              single-line hide-details></v-text-field>
          </v-flex>
          <v-flex xs2 pl-1>
            <span class="mono" style="font-size:12px">cm</span>
          </v-flex>
        </v-layout>
        <v-layout align-center row pb-2>
          <v-flex xs2>
            <span style="font-size:12px">Body Fat</span>
          </v-flex>
          <v-flex xs4>
            <v-text-field style="font-size:12px;margin-top:0;padding-top:0;line-height:25px!important" outline
              single-line hide-details></v-text-field>
          </v-flex>
          <v-flex xs3 pl-1>
            <span class="mono" style="font-size:12px"></span>
          </v-flex>
          <v-flex xs2>
            <span style="font-size:12px">Standart</span>
          </v-flex>
          <v-flex xs4>
            <v-btn @click="changeStandartBMI()" small color="info">asia_pacific</v-btn>
          </v-flex>
          <v-flex xs2 pl-1>
          </v-flex>
        </v-layout>
      </v-card>
    </v-layout>
    <one-dialog-print :title="printtitle" :width="printwidth" :height="500" :status="openprint" :urlprint="urlprint"
      @close-dialog-print="closePrint"></one-dialog-print>
  </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-print": httpVueLoader("../../common/oneDialogPrintX.vue"),
  },
  mounted() { },
  methods: {
    closePrint() {
      this.openprint = false;
    },
    print() {
      let user = one_user();
      var d = new Date();
      var n = d.getTime();
      //devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_resume.rptdesign&__format=pdf&PID=1&username=adhi&tm=1717726294764
      let rptname = "rpt_mcu_resume";
      this.urlprint =
        "/birt/run?__report=report/one/mcu/" +
        rptname +
        ".rptdesign&__format=pdf&username=" +
        user.M_StaffName +
        "&PID=" +
        this.patientDetail.resumeID +
        "&tm=" +
        n;
      this.openprint = true;
    },
    print2tahun() {
      let user = one_user();
      var d = new Date();
      var n = d.getTime();
      //devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_resume.rptdesign&__format=pdf&PID=1&username=adhi&tm=1717726294764
      let rptname = "rpt_mcu_saran_kesimpulan";
      this.urlprint =
        "/birt/run?__report=report/one/mcu/" +
        rptname +
        ".rptdesign&__format=pdf&username=" +
        user.M_StaffName +
        "&PID=" +
        this.patientDetail.resumeID +
        "&tm=" +
        n;
      this.openprint = true;
    },
    printCover() {
      let user = one_user();
      var d = new Date();
      var n = d.getTime();
      //devcpone.aplikasi.web.id/birt/run?__report=report/one/mcu/rpt_mcu_resume.rptdesign&__format=pdf&PID=1&username=adhi&tm=1717726294764
      let rptname = "rpt_mcu_resume_cover";
      this.urlprint =
        "/birt/run?__report=report/one/mcu/" +
        rptname +
        ".rptdesign&__format=pdf&username=" +
        user.M_StaffName +
        "&PID=" +
        this.patientDetail.resumeID +
        "&tm=" +
        n;
      this.openprint = true;
    },
    saveDoctor() {
      //   let dctr = {};
      //   this.searchDoctor = "";
      //   this.selectedDoctor = dctr;
      //   this.dialogDoctor = false;

      this.$store.dispatch("resume/savedoctor", {
        id: this.patientDetail.orderID,
        doctorid: this.selectedDoctor.doctorID,
      });
    },
    getTitle(title) {
      let rtn = false;
      for (let i = 0; i < this.patientDetail.detail.length; i++) {
        if (
          this.patientDetail.detail[i]["category"].toLowerCase() ===
          title.toLowerCase()
        ) {
          rtn = true;
        }
      }
      return rtn;
    },
    disableForm() {
      let disable = false;
      if (this.patientDetail.status.toLowerCase() !== "new" || this.loading) {
        disable = true;
      }
      return disable;
    },
    save() {
      if (this.loading) return;

      let data = this.selectedPatient;
      data.header = this.patientDetail;
      data.detail = this.patientDetail.detail;
      data.kesimpulan = this.kesimpulan;
      data.rekomendasi = this.rekomendasi;
      data.saran = this.saran;
      data.act = "NEW";
      let prm = {
        data: data,
      };
      console.log(prm);
      // return;
      this.$store.dispatch("resume/save", prm);
    },
    validate() {
      if (this.loading) return;

      let data = this.selectedPatient;
      if (
        this.patientDetail.resumeDoctorID === "0" ||
        this.patientDetail.resumeDoctorID === 0 ||
        this.patientDetail.resumeDoctorID === "" ||
        this.patientDetail.resumeDoctorID === null
      ) {
        alert("Pilih dokter terlebih dahulu");
        return;
      }
      data.header = this.patientDetail;
      data.detail = this.patientDetail.detail;
      data.kesimpulan = this.kesimpulan;
      data.rekomendasi = this.rekomendasi;
      data.saran = this.saran;
      data.act = "VAL";
      let prm = {
        data: data,
      };
      console.log(prm);
      this.$store.dispatch("resume/save", prm);
    },
    unvalidate() {
      if (this.loading) return;

      let data = this.selectedPatient;
      data.header = this.patientDetail;
      data.detail = this.patientDetail.detail;
      data.kesimpulan = this.kesimpulan;
      data.rekomendasi = this.rekomendasi;
      data.saran = this.saran;
      data.act = "UNVAL";
      let prm = {
        data: data,
      };
      console.log(prm);
      this.$store.dispatch("resume/save", prm);
    },
    getDoctorName(name) {
      console.log(name);
      console.log("Name");
      let nm = name;
      if (name === null || name === "") {
        nm = "Pilih Dokter";
      }
      return nm;
    },
    openDialogDoctor(val) {
      if (this.loading) return;
      if (val["status"] !== "NEW") return;
      console.log(val);
      this.selectedDoctrorTest = val;
      let dctr = {
        M_DoctorID: val.doctorID,
        doctorID: val.doctordoctorIDName,
        M_DoctorPrefix: "",
        M_DoctorPrefix2: "",
        M_DoctorName: "",
        M_DoctorSuffix: "",
        M_DoctorSuffix2: "",
        M_DoctorCode: "",
        doctorName: val.doctorName,
      };
      this.searchDoctor = val.doctorName;
      this.selectedDoctor = dctr;
      this.dialogDoctor = true;
    },
    closeDialogDoctor() {
      this.selectedDoctrorTest = {};
      let dctr = {};
      this.searchDoctor = "";
      this.selectedDoctor = dctr;
      this.dialogDoctor = false;
    },
    resetInput() {
      this.$store.commit("resume/reset_input");
    },
    handleChangeInput(data) {
      // console.log(data);
      let pd = this.patientDetail;
      pd.detail.forEach((e) => {
        if (e.detailOrderID === data.detailOrderID) {
          e = data;
        }
      });
      this.patientDetail = pd;
    },
    handleChangeInputHeader(data) {
      // console.log(data);
      let pd = this.patientDetail;
      pd.kesimpulan = data.kesimpulan;
      pd.rekomendasi = data.rekomendasi;
      pd.saran = data.saran;
      this.patientDetail = pd;
    },
    thr_search_doctor: _.debounce(function () {
      prm = {
        search: this.searchDoctor,
      };
      this.$store.dispatch("resume/getdoctorlist", prm);
    }, 100),
  },
  computed: {
    selectedPatient: {
      get() {
        return this.$store.state.resume.selectedPatient;
      },
      set(val) {
        this.$store.commit("resume/update_selectedPatient", val);
      },
    },
    loading: {
      get() {
        return this.$store.state.resume.loading;
      },
      set(val) {
        this.$store.commit("resume/update_loading", val);
      },
    },
    patientDetail: {
      get() {
        return this.$store.state.resume.patientDetail;
      },
      set(val) {
        this.$store.commit("resume/update_patientDetail", val);
      },
    },
    // rekomendasi: "",
    // saran: "",
    // kesimpulan: "",
    rekomendasi: {
      get() {
        return this.$store.state.resume.rekomendasi;
      },
      set(val) {
        this.$store.commit("resume/update_rekomendasi", val);
      },
    },
    saran: {
      get() {
        return this.$store.state.resume.saran;
      },
      set(val) {
        this.$store.commit("resume/update_saran", val);
      },
    },
    kesimpulan: {
      get() {
        return this.$store.state.resume.kesimpulan;
      },
      set(val) {
        this.$store.commit("resume/update_kesimpulan", val);
      },
    },
    doctorList() {
      return this.$store.state.resume.doctorList;
    },
    selectedDoctor: {
      get() {
        return this.$store.state.resume.selectedDoctor;
      },
      set(val) {
        this.$store.commit("resume/update_selectedDoctor", val);
      },
    },
    searchDoctor: {
      get() {
        return this.$store.state.resume.searchDoctor;
      },
      set(val) {
        this.$store.commit("resume/update_searchDoctor", val);
      },
    },
    dialogDoctor: {
      get() {
        return this.$store.state.resume.dialogDoctor;
      },
      set(val) {
        this.$store.commit("resume/update_dialogDoctor", val);
      },
    },
  },
  watch: {
    searchDoctor(val, old) {
      console.log(val);
      if (val == old) return;
      if (!val) return;
      if (val.length < 1) return;
      if (this.selectedDoctor.M_DoctorName == val) return;
      this.thr_search_doctor();
    },
  },
  data() {
    return {
      printtitle: "",
      printwidth: "80%",
      openprint: false,
      urlprint: "",
      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>
