<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog_patologianatomy" persistent max-width="50%">
      <v-card>
        <v-card-title class="red white--text">
          <span class="headline">PATOLOGI ANATOMI</span>
        </v-card-title>
        <v-card-text>
          <v-layout class="mb-2" row>
            <v-flex xs8>
              <v-select
                item-text="name"
                return-object
                style="font-size: 12px"
                class="mini-select"
                outline
                :items="doctors"
                v-model="selected_doctor"
                hide-details
                label="Dokter"
                disabled
              ></v-select>
              <p
                v-if="error_doctor"
                class="error pl-2 pr-2"
                style="color: #fff"
              >
                Dokternya siapa ? jangan lupa ya ...
              </p>
            </v-flex>
          </v-layout>

          <v-divider></v-divider>

          <v-divider></v-divider>
          <v-layout mt-2 mb-2 row>
            <v-flex pr-1 xs6>
              <v-textarea
                auto-grow
                disabled
                label="No Sediaan"
                outline
                rows="1"
                v-model="no_sediaan"
                hide-details
              ></v-textarea>
            </v-flex>
            <v-flex pl-1 xs6>
              <v-textarea
                auto-grow
                label="Lokasi Organ"
                outline
                rows="1"
                v-model="lokasi"
                disabled
                hide-details
              ></v-textarea>
            </v-flex>
          </v-layout>
          <v-layout mt-2 mb-2 row>
            <v-flex xs12>
              <v-textarea
                auto-grow
                disabled
                label="Keterangan Klinis"
                outline
                rows="2"
                v-model="klinis"
                hide-details
              ></v-textarea>
            </v-flex>
          </v-layout>
          <v-layout mt-2 mb-2 row>
            <v-flex xs12>
              <v-textarea
                auto-grow
                disabled
                label="Diagnosa Klinis"
                outline
                rows="2"
                v-model="diagnosis_klinis"
                hide-details
              ></v-textarea>
            </v-flex>
          </v-layout>
          <v-layout mt-2 mb-2 row>
            <v-flex xs12>
              <v-textarea
                auto-grow
                disabled
                label="Makroskopik"
                outline
                rows="2"
                v-model="makroskopik"
                hide-details
              ></v-textarea>
            </v-flex>
          </v-layout>
          <v-layout mt-2 mb-2 row>
            <v-flex xs12>
              <v-textarea
                auto-grow
                disabled
                label="Mikroskopik"
                outline
                rows="2"
                v-model="mikroskopik"
                hide-details
              ></v-textarea>
            </v-flex>
          </v-layout>
          <v-layout mt-2 mb-2 row>
            <v-flex xs12>
              <v-textarea
                auto-grow
                disabled
                label="Kesimpulan"
                outline
                rows="2"
                v-model="kesimpulan"
                hide-details
              ></v-textarea>
            </v-flex>
          </v-layout>
          <p class="mb-2">Makroskopis</p>
          <p class="mb-2" v-if="images_makro.length === 0">Belum unggah foto</p>
          <v-layout v-if="images_makro.length > 0" align-center row>
            <v-flex v-for="image in images_makro" xs6 pa-2>
              <v-img :src="image.image_url">
                <div class="fill-height bottom-gradient"></div>
              </v-img>
            </v-flex>
          </v-layout>
          <p class="mb-2">Mikroskopis</p>
          <p class="mb-2" v-if="images_makro.length === 0">Belum unggah foto</p>
          <v-layout v-if="images_mikro.length > 0" align-center row>
            <v-flex v-for="image in images_mikro" xs6 pa-2>
              <v-img :src="image.image_url">
                <div class="fill-height bottom-gradient"></div>
              </v-img>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="grey darken-1"
            flat
            @click="dialog_patologianatomy = false"
            >Tutup</v-btn
          >
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
module.exports = {
  mounted() {
    //this.$store.dispatch("re_patologianatomy/get_doctors",{token:''})
  },
  data() {
    return {
      error_doctor: false,
    };
  },
  computed: {
    images_makro: {
      get() {
        return this.$store.state.re_patologianatomy.images_makro;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_images_makro", val);
      },
    },
    images_mikro: {
      get() {
        return this.$store.state.re_patologianatomy.images_mikro;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_images_mikro", val);
      },
    },
    no_sediaan: {
      get() {
        return this.$store.state.re_patologianatomy.no_sediaan;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_no_sediaan", val);
      },
    },
    diagnosis_klinis: {
      get() {
        return this.$store.state.re_patologianatomy.diagnosis_klinis;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_diagnosis_klinis", val);
      },
    },
    klinis: {
      get() {
        return this.$store.state.re_patologianatomy.klinis;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_klinis", val);
      },
    },
    lokasi: {
      get() {
        return this.$store.state.re_patologianatomy.lokasi;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_lokasi", val);
      },
    },
    makroskopik: {
      get() {
        return this.$store.state.re_patologianatomy.makroskopik;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_makroskopik", val);
      },
    },
    mikroskopik: {
      get() {
        return this.$store.state.re_patologianatomy.mikroskopik;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_mikroskopik", val);
      },
    },
    kesimpulan: {
      get() {
        return this.$store.state.re_patologianatomy.kesimpulan;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_kesimpulan", val);
      },
    },
    dialog_patologianatomy: {
      get() {
        return this.$store.state.re_patologianatomy.dialog_patologianatomy;
      },
      set(val) {
        this.$store.commit(
          "re_patologianatomy/update_dialog_patologianatomy",
          val
        );
      },
    },
    results: {
      get() {
        return this.$store.state.re_patologianatomy.results;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_results", val);
      },
    },
    checks: {
      get() {
        return this.$store.state.re_patologianatomy.checks;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_checks", val);
      },
    },
    maturasi: {
      get() {
        return this.$store.state.re_patologianatomy.maturasi;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_maturasi", val);
      },
    },
    bahans: {
      get() {
        return this.$store.state.re_patologianatomy.bahans;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_bahans", val);
      },
    },
    categories: {
      get() {
        return this.$store.state.re_patologianatomy.categories;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_categories", val);
      },
    },
    doctors() {
      return this.$store.state.re_patologianatomy.doctors;
    },
    onprocess() {
      return this.$store.state.re_patologianatomy.onprocess;
    },
    selected_doctor: {
      get() {
        return this.$store.state.re_patologianatomy.selected_doctor;
      },
      set(val) {
        this.$store.commit("re_patologianatomy/update_selected_doctor", val);
      },
    },
  },
  methods: {
    saveResult_PatologiAnatomy() {
      if (_.isEmpty(this.selected_doctor) || this.selected_doctor == "0") {
        this.error_doctor = true;
      } else {
        this.$store.commit("re_patologianatomy/update_onprocess", true);
        let seldata =
          this.$store.state.re_patologianatomy.selected_patologianatomy;
        let xid = _.isEmpty(seldata) ? "0" : seldata.xid;
        var prm = {
          xid: xid,
          detail_id: this.$store.state.re_patologianatomy.orderdetail_id,
          doctor: this.selected_doctor.id,
          no_sediaan: this.no_sediaan,
          klinis: this.klinis,
          diagnosa: this.diagnosis_klinis,
          lokasi: this.lokasi,
          makroskopik: this.makroskopik,
          mikroskopik: this.mikroskopik,
          kesimpulan: this.kesimpulan,
        };
        this.$store.dispatch(
          "re_patologianatomy/saveresult_patologianatomy",
          prm
        );
      }
    },
    changeChecksSelected(value, idx) {
      let checks = this.$store.state.re_patologianatomy.checks;
      checks[idx].selected = value.selected === "N" ? "Y" : "N";
      if (checks[idx].selected === "N") checks[idx].note = "";
      this.checks = checks;
    },
    changeNote(value, idx) {
      let checks = this.$store.state.re_patologianatomy.checks;
      checks[idx].note = value.note;
      this.checks = checks;
    },
    changeCategoriesSelected(value, idx) {
      let categories = this.$store.state.re_patologianatomy.categories;
      categories[idx].selected = value.selected === "N" ? "Y" : "N";
      this.categories = categories;
    },
    changeBahansSelected(value, idx) {
      let bahans = this.$store.state.re_patologianatomy.bahans;
      bahans[idx].selected = value.selected === "N" ? "Y" : "N";
      this.bahans = bahans;
    },
    changeMaturasi(value, idx) {
      let mx = this.$store.state.re_patologianatomy.maturasi;
      mx.value[idx] = value;
      this.maturasi = mx;
    },
  },
};
</script>
