<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog_papsmear" persistent max-width="50%">
      <v-card>
        <v-card-title class="red white--text">
          <span class="headline">PAP SMEAR</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"
                  ></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-flex pt-2 xs4>
                <v-layout class="pa-2" align-center text-xs-right row>
                  <v-flex xs12>
                    <h3 class="subheading font-weight-bold">Bahan dari :</h3>
                  </v-flex>
                  
                </v-layout>
              </v-flex>
            </v-layout>
            <v-layout class="mt-2 mb-2" wrap>
              <v-flex xs8>
                <v-layout v-for="(check,index) in checks" align-center mb-1 row>
                  <v-flex xs1>
                    <v-btn v-if="check.selected === 'N'" @click="changeChecksSelected(check,index)" small style="min-width:18px"><v-icon small>close</v-icon></v-btn>
                    <v-btn color="teal" dark v-if="check.selected === 'Y'" @click="changeChecksSelected(check,index)" small style="min-width:18px"><v-icon small>check</v-icon></v-btn>
                  </v-flex>
                  <v-flex xs5 pl-2>
                      <label class="body-2 font-weight-bold mb-0 mono">{{check.name}}</label>
                  </v-flex>
                  <v-flex xs6>
                    <v-text-field
                      outline
                      v-model="check.note"
                      :disabled="check.selected === 'N'"
                      @change="changeNote(check,index)"
                      single-line
                      hide-details
                    ></v-text-field>
                  </v-flex>
                </v-layout>
              </v-flex>
              <v-flex pr-4 xs4>
                <v-layout align-center text-xs-right v-for="(bahan,i) in bahans" align-center mb-1 row>
                  <v-flex xs15 pl-2>
                      <label class="body-2 font-weight-bold mb-0 mono">{{bahan.name}}</label>
                  </v-flex>
                  <v-flex xs1>
                    <v-btn v-if="bahan.selected === 'N'" @click="changeBahansSelected(bahan,i)" small style="min-width:18px"><v-icon small>close</v-icon></v-btn>
                  <v-btn color="teal" dark v-if="bahan.selected === 'Y'" @click="changeBahansSelected(bahan,i)" small style="min-width:18px"><v-icon small>check</v-icon></v-btn>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout mt-2 mb-2 align-center row>
              <v-flex xs3>
                <span class="subheading font-weight-bold">
                  Kategori keganasan :
                </span>
              </v-flex>
              <v-flex text-xs-right xs9>
                <span v-for="(category,idx) in categories">
                  <v-btn v-if="category.selected === 'N'" @click="changeCategoriesSelected(category,idx)" small style="min-width:18px"><v-icon small>close</v-icon></v-btn>
                  <v-btn color="teal" dark v-if="category.selected === 'Y'" @click="changeCategoriesSelected(category,idx)" small style="min-width:18px"><v-icon small>check</v-icon></v-btn>
                  <span class="pl-1 pr-2">{{category.name}}</span>
                </span>
              </v-flex>
            </v-layout>
            <v-divider></v-divider>
            <v-layout mt-2 mb-2 align-center row>
              <v-flex xs3>
                <span class="subheading font-weight-bold">
                  Index maturasi :
                </span>
              </v-flex>
              <v-flex xs1>
                <span class="subheading font-weight-bold">
                  M.I 
                </span>
              </v-flex>
              <v-flex v-for="(mtr,m) in maturasi.value" xs3 pl-2 pt-2 pb-2>
                <v-text-field
                      v-model="mtr"
                      @change="changeMaturasi(mtr,m)"
                      outline
                      single-line
                      hide-details
                ></v-text-field>
              </v-flex>
              
            </v-layout>
            <v-divider></v-divider>
            <v-layout v-for="result in results"  mt-2 mb-2 row>
                <v-flex xs12>
                    <v-textarea
                        auto-grow
                        :label="result.label"
                        outline
                        rows="2"
                        v-model="result.result"
                        hide-details
                    ></v-textarea>
                </v-flex>
            </v-layout>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog_papsmear = false">Tutup</v-btn>
          <v-btn v-if="!onprocess" color="green darken-1" @click="saveResult_Papsmear" flat >Simpan</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

 <script>
 module.exports = {
   mounted() {
      //this.$store.dispatch("re_papsmear/get_doctors",{token:''})
   },
   data() {
      return {
        error_doctor:false
        
      };
   },
    computed: {
        dialog_papsmear: {
            get() {
                return this.$store.state.re_papsmear.dialog_papsmear
            },
            set(val) {
                this.$store.commit("re_papsmear/update_dialog_papsmear", val)
            }
        },
        results: {
            get() {
                return this.$store.state.re_papsmear.results
            },
            set(val) {
                this.$store.commit("re_papsmear/update_results", val)
            }
        },
        checks: {
            get() {
                return this.$store.state.re_papsmear.checks
            },
            set(val) {
                this.$store.commit("re_papsmear/update_checks", val)
            }
        },
        maturasi: {
            get() {
                return this.$store.state.re_papsmear.maturasi
            },
            set(val) {
                this.$store.commit("re_papsmear/update_maturasi", val)
            }
        },
        bahans: {
            get() {
                return this.$store.state.re_papsmear.bahans
            },
            set(val) {
                this.$store.commit("re_papsmear/update_bahans", val)
            }
        },
        categories: {
            get() {
                return this.$store.state.re_papsmear.categories
            },
            set(val) {
                this.$store.commit("re_papsmear/update_categories", val)
            }
        },
        doctors(){
          return this.$store.state.re_papsmear.doctors
        },
        onprocess(){
          return this.$store.state.re_papsmear.onprocess
        },
        selected_doctor: {
            get() {
                return this.$store.state.re_papsmear.selected_doctor
            },
            set(val) {
                this.$store.commit("re_papsmear/update_selected_doctor", val)
            }
        }
    },
    methods: {
        saveResult_Papsmear(){
            if(_.isEmpty(this.selected_doctor) || this.selected_doctor == '0'){
              this.error_doctor = true

            }else{
              this.$store.commit("re_papsmear/update_onprocess", true)
              let selected_papsmear = this.$store.state.re_papsmear.selected_papsmear
              var prm = {
                order_id:selected_papsmear.order_id,
                detail_id:selected_papsmear.id,
                doctor:this.selected_doctor.id,
                checks:this.checks,
                maturasi:this.maturasi,
                bahans:this.bahans,
                categories:this.categories,
                results:this.results
              }
              this.$store.dispatch("re_papsmear/saveresult_papsmear",prm)
            }
        },
        changeChecksSelected(value,idx){
          let checks = this.$store.state.re_papsmear.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_papsmear.checks
          checks[idx].note = value.note
          this.checks = checks
        },
        changeCategoriesSelected(value,idx){
          let categories = this.$store.state.re_papsmear.categories
          categories[idx].selected = value.selected === 'N'?'Y':'N'
          this.categories = categories
        },
        changeBahansSelected(value,idx){
          let bahans = this.$store.state.re_papsmear.bahans
          bahans[idx].selected = value.selected === 'N'?'Y':'N'
          this.bahans = bahans
        },
        changeMaturasi(value,idx){
          let mx = this.$store.state.re_papsmear.maturasi
          mx.value[idx] = value
          this.maturasi = mx 
        }
    }
 
 }
</script>
