<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog_mikro" persistent max-width="50%">
      <v-card>
        <v-card-title class="teal white--text">
          <span class="headline">Mikro</span>
        </v-card-title>
        <v-card-text>
          <v-layout class="mb-0" row>
              <v-flex xs6 pa-2 pb-0>
                  <v-select
                    item-text="value" 
                    return-object 
                    class="mini-select"
                    :items="result_values" 
                    v-model="selected_result_value"
                    label="Pilih Hasil"
                    outline
                    hide-details
                  ></v-select>
                  <p v-if="error_hasil" class="error pt-1 pl-2 pr-2" style="color:#fff">Hasilnya apa ? jangan lupa ya ...</p>
              </v-flex>
            </v-layout>
          <v-layout class="mb-0" row>
              <v-flex xs6 pa-2 pb-0>
                  <v-select
                    item-text="name" 
                    return-object 
                    class="mini-select"
                    :items="doctors" 
                    v-model="selected_doctor"
                    label="Pilih Dokter"
                    outline
                    hide-details
                  ></v-select>
                   <p v-if="error_doctor" class="error pt-1 pl-2 pr-2" style="color:#fff">Dokternya siapa ? jangan lupa ya ...</p>
              </v-flex>
              <v-flex xs6 v-if="selected_result_value.id === 'Positif'" pa-2 pb-0>
                  <v-select
                    class="mini-select"
                    item-text="name" 
                    return-object 
                    :items="bacteries" 
                    v-model="selected_bacteria"
                    label="Pilih Bakteri"
                    outline
                    hide-details
                  ></v-select>
                  <p v-if="error_bacteria" class="error pt-1 pl-2 pr-2" style="color:#fff">Bakterinya ? jangan lupa ya ...</p>
              </v-flex>
            </v-layout>
            <v-layout v-if="selected_result_value.id === 'other'" class="pl-2 pr-2" row>
              <v-flex xs12>
                <v-textarea
                    auto-grow
                    label="Hasil Lainnya"
                    outline
                    rows="2"
                    v-model="results.result_other"
                    hide-details
                ></v-textarea>
                <p v-if="error_result_other"  class="error pt-1 pl-2 pr-2" style="color:#fff">Hasil Lainnya : harus diisi</p>
              </v-flex>
            </v-layout>
            <v-layout v-if="selected_result_value.id === 'Positif'" class="mb-2" row>
              <v-flex xs6 pa-2 pb-0>
                  <v-text-field
                    label="Hasil Biakan"
                    outline
                    v-model="results.hasil_biakan"
                    hide-details
                  ></v-text-field>
              </v-flex>
              <v-flex xs6 pa-2 pb-0>
                  <v-text-field
                    label="Jenis Bahan"
                    outline
                    v-model="results.sample_name"
                    hide-details
                  ></v-text-field>
              </v-flex>
            </v-layout>
            <v-layout v-if="selected_result_value.id === 'Positif'" class="mb-2" row>
              <v-flex xs12>
                <table style="width:100%;border-collapse: collapse;" class="table_antibiotics">
                  <thead>
                    <tr>
                      <th width="5%" style="padding: 8px;border: 1px solid black;" rowspan="2">No.</th>
                      <th width="22%" style="padding: 8px;border: 1px solid black;" rowspan="2">Jenis Obat</th>
                      <th style="padding: 8px;border: 1px solid black;" colspan="3">Standart</th>
                      <th width="10%" style="padding: 8px;border: 1px solid black;" rowspan="2">Test</th>
                      <th width="23%" style="padding: 8px;border: 1px solid black;" rowspan="2">Keterangan</th>
                    </tr>
                    <tr>
                      <th width="12%" style="padding: 8px;border: 1px solid black;">R &#60;</th>
                      <th width="12%" style="padding: 8px;border: 1px solid black;"> &#61;&#60; I &#61; </th>
                      <th width="12%" style="padding: 8px;border: 1px solid black;">S &#62;&#61;</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr style="border: 1px solid black;" 
                      v-for="detail in results.details"
                    >
                      <td style="border: 1px solid black;padding: 8px;text-align:center">{{detail.xno}}</td>
                      <td style="border: 1px solid black;padding: 8px;">{{detail.T_AntibioticName}}</td>
                      <td style="border: 1px solid black;padding: 8px;text-align:center">{{detail.T_AntibioticNoteR}}</td>
                      <td style="border: 1px solid black;padding: 8px;text-align:center">{{detail.T_AntibioticNoteI}}</td>
                      <td style="border: 1px solid black;padding: 8px;text-align:center">{{detail.T_AntibioticNoteS}}</td>
                      <td style="border: 1px solid black;padding: 8px;">
                        <v-text-field
                          single-line
                          v-model="detail.value"
                          @change="changeValue(detail,detail.value)"
                          hide-details
                        ></v-text-field>
                      </td>
                      <td style="border: 1px solid black;padding: 8px;text-align:center">
                        <v-btn style="min-width:30px" v-if="detail.chx_r === 'Y'" color="teal" dark small>R</v-btn>
                        <v-btn style="min-width:30px" v-if="detail.chx_r === 'N'" color="red" dark small>R</v-btn>
                        <v-btn style="min-width:30px" v-if="detail.chx_i === 'Y'" color="teal" dark small>I</v-btn>
                        <v-btn style="min-width:30px" v-if="detail.chx_i === 'N'" color="red" dark small>I</v-btn>
                        <v-btn style="min-width:30px" v-if="detail.chx_s === 'Y'" color="teal" dark small>S</v-btn>
                        <v-btn style="min-width:30px" v-if="detail.chx_s === 'N'" color="red" dark small>S</v-btn>
                      </td>
                    </tr>
                    
                  </tbody>
                </table>
              </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="grey darken-1" flat @click="dialog_mikro = false">Tutup</v-btn>
          <v-btn v-if="!onprocess" color="blue darken-1" @click="saveResult_Mikro" flat >Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>
<style scoped>
  table.table_antibiotics {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  table.table_antibiotics tbody td, table.table_antibiotics tbody th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
  }

  table.table_antibiotics tbody tr:nth-child(even) {
    background-color: #dddddd;
  }
</style>
 <script>
 module.exports = {
   mounted() {
      //this.$store.dispatch("re_mikro/get_doctors",{token:''})
   },
   data() {
      return {
        error_doctor:false,
        error_bacteria:false,
        error_hasil:false,
        error_result_other:false
      };
   },
    computed: {
      onprocess(){
          return this.$store.state.re_mikro.onprocess
        },
      disable_save(){
          return this.$store.state.re_mikro.disable_save
        },
      selected_result_value: {
            get() {
                return this.$store.state.re_mikro.selected_result_value
            },
            set(val) {
                this.$store.commit("re_mikro/update_selected_result_value", val)
            }
        },
      result_values(){
          return this.$store.state.re_mikro.result_values
        },
        bacteries(){
          return this.$store.state.re_mikro.bacteries
        },
        selected_bacteria: {
            get() {
                return this.$store.state.re_mikro.selected_bacteria
            },
            set(val) {
                this.$store.commit("re_mikro/update_selected_bacteria", val)
                this.$store.dispatch("re_mikro/getantibiotics", val)
            }
        },
        dialog_mikro: {
            get() {
                return this.$store.state.re_mikro.dialog_mikro
            },
            set(val) {
                this.$store.commit("re_mikro/update_dialog_mikro", val)
            }
        },
        results: {
            get() {
                return this.$store.state.re_mikro.results
            },
            set(val) {
                this.$store.commit("re_mikro/update_results", val)
            }
        },
        hasil_biakan: {
            get() {
                return this.$store.state.re_mikro.hasil_biakan
            },
            set(val) {
                this.$store.commit("re_mikro/update_hasil_biakan", val)
            }
        },
        result_other: {
            get() {
                return this.$store.state.re_mikro.result_other
            },
            set(val) {
                this.$store.commit("re_mikro/update_result_other", val)
            }
        },
        sample_name: {
            get() {
                return this.$store.state.re_mikro.sample_name
            },
            set(val) {
                this.$store.commit("re_mikro/update_sample_name", val)
            }
        },
        interpretasi: {
            get() {
                return this.$store.state.re_mikro.interpretasi
            },
            set(val) {
                this.$store.commit("re_mikro/update_interpretasi", val)
            }
        },
        doctors(){
          return this.$store.state.re_mikro.doctors
        },
        selected_doctor: {
            get() {
                return this.$store.state.re_mikro.selected_doctor
            },
            set(val) {
                this.$store.commit("re_mikro/update_selected_doctor", val)
            }
        }
    },
    methods: {
      changeValue(detail,value){
        let antibiotics = this.results.details
        let idx = _.findIndex(antibiotics, function(o) { return o.T_AntibioticID === detail.T_AntibioticID })
        console.log(antibiotics[idx])
        antibiotics[idx].value = value
        antibiotics[idx].chx_r = 'N'
        antibiotics[idx].chx_s = 'N'
        antibiotics[idx].chx_i = 'N'

        if(
          ((detail.T_AntibioticMinInclusiveR === 'N' && parseFloat(antibiotics[idx].value) > detail.T_AntibioticMinValueR) || 
          (detail.T_AntibioticMinInclusiveR === 'Y' && parseFloat(antibiotics[idx].value) >= detail.T_AntibioticMinValueR)) &&
          ((detail.T_AntibioticMaxInclusiveR === 'N' && parseFloat(antibiotics[idx].value) < detail.T_AntibioticMaxValueR) || 
          (detail.T_AntibioticMaxInclusiveR === 'Y' && parseFloat(antibiotics[idx].value) <= detail.T_AntibioticMaxValueR))
        ){
          antibiotics[idx].chx_r = 'Y'
          antibiotics[idx].note = 'R'
        }

        if(
          ((detail.T_AntibioticMinInclusiveS === 'N' && parseFloat(antibiotics[idx].value) > detail.T_AntibioticMinValueS) || 
          (detail.T_AntibioticMinInclusiveS === 'Y' && parseFloat(antibiotics[idx].value) >= detail.T_AntibioticMinValueS)) &&
          ((detail.T_AntibioticMaxInclusiveS === 'N' && parseFloat(antibiotics[idx].value) < detail.T_AntibioticMaxValueS) || 
          (detail.T_AntibioticMaxInclusiveS === 'Y' && parseFloat(antibiotics[idx].value) <= detail.T_AntibioticMaxValueS))
        ){
          antibiotics[idx].chx_s = 'Y'
          antibiotics[idx].note = 'S'
        }

         if(
          ((detail.T_AntibioticMinInclusiveI === 'N' && parseFloat(antibiotics[idx].value) > detail.T_AntibioticMinValueI) || 
          (detail.T_AntibioticMinInclusiveI === 'Y' && parseFloat(antibiotics[idx].value) >= detail.T_AntibioticMinValueI)) &&
          ((detail.T_AntibioticMaxInclusiveI === 'N' && parseFloat(antibiotics[idx].value) < detail.T_AntibioticMaxValueI) || 
          (detail.T_AntibioticMaxInclusiveI === 'Y' && parseFloat(antibiotics[idx].value) <= detail.T_AntibioticMaxValueI))
        ){
          antibiotics[idx].chx_i = 'Y'
          antibiotics[idx].note = 'I'
        }

        this.results.details = antibiotics
      },
      getAntibiotics(){
        console.log(this.selected_bacteria)
        var prm = this.selected_bacteria
        this.$store.dispatch("re_mikro/getantibiotics", prm)
      },
        changeChildsChex(childs,idxxx,idxx,idx){
          let interpretasi = this.interpretasi
          var parent_id = interpretasi[idx].subgroups[idxx].childs[idxxx].parent_id
          if(parent_id !== '0'){
            let childs = interpretasi[idx].subgroups[idxx].childs
            let index_parent = _.findIndex(childs, function(o) { return o.id === parent_id }) 
            if(childs.chex)
              interpretasi[idx].subgroups[idxx].childs[index_parent].chex = true
            else
              {
                let xfilter = _.filter(childs, { 'chex': true, 'parent_id': parent_id })
                if(xfilter.length === 0)
                  interpretasi[idx].subgroups[idxx].childs[index_parent].chex = false
                else
                  interpretasi[idx].subgroups[idxx].childs[index_parent].chex = true
              }
          }
          this.interpretasi = interpretasi
        },
        saveResult_Mikro(){
          var go_save = true
          this.$store.commit("re_mikro/update_disable_save", true)
            if(_.isEmpty(this.selected_doctor) || this.selected_doctor.id == '0'){
              this.error_doctor = true
              go_save = false
            }
            if(this.selected_result_value.id === 'Positif' && (_.isEmpty(this.selected_bacteria) || this.selected_bacteria.id == '0')){
              this.error_bacteria = true
              go_save = false
            }

            if(this.selected_result_value.id === 'other' && this.results.result_other === ''){
              this.error_result_other = true
              go_save = false
            }
            if(go_save){
              this.$store.commit("re_mikro/update_onprocess", true)
              let selected_mikro = this.$store.state.re_mikro.selected_mikro
              var prm = {
                result_value:this.selected_result_value.id,
                doctor:this.selected_doctor.id,
                bacteria:this.selected_bacteria.id,
                hasil_biakan:this.hasil_biakan,
                sample_name:this.sample_name,
                results:this.results
              }
              this.$store.dispatch("re_mikro/saveresult_mikro",prm)
            }else{
              this.$store.commit("re_mikro/update_disable_save", false)
            }
        }
    }
 
 }
</script>
