<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog_preparasisperma" persistent max-width="70%">
      <v-card>
        <v-card-title>
          <span class="headline">PREPARASI SPERMA</span>
        </v-card-title>
        <v-card-text>
            <v-layout mb-3 row>
              <v-flex pl-0 xs4>
                  <v-select
                      class="mini-select"
                      item-text="name"
                      return-object
                      disabled
                      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-layout>
            <v-layout mb-2 row>
                <v-flex class="font-weight-bold" xs12>
                  <v-select
                      class="mini-select"
                      item-text="name"
                      return-object
                      outline
                      :items="methodes"
                      v-model="selected_methode"
                      hide-details
                      label="Metode"
                  ></v-select>
                </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex xs12>
                <v-layout  mb-2 row>
                    <v-flex xs6>
                        <v-layout mb-2 row>
                            <v-flex class="font-weight-bold" xs12>Pre Preparasi</v-flex>
                        </v-layout>
                        <v-layout mb-2 row>
                            <v-flex xs4>Volume</v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                    label="Volume"
                                    disabled
                                    outline
                                    v-model="results.Other_PreparasiSpermaPreVolume"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4>Motilitas</v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                    label="Progresive"
                                    disabled
                                    outline
                                    v-model="results.Other_PreparasiSpermaPreMotilitasA"
                                ></v-text-field>
                            </v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                    label="Non Progresive"
                                    disabled
                                    outline
                                    v-model="results.Other_PreparasiSpermaPreMotilitasB"
                                ></v-text-field>
                            </v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                    label="Immotile"
                                    outline
                                    disabled
                                    v-model="results.Other_PreparasiSpermaPreMotilitasC"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4>Konsentrasi</v-flex>
                            <v-flex xs6>
                              <v-text-field
                                  label="Konsentrasi"
                                  disabled
                                  outline
                                  v-model="results.Other_PreparasiSpermaPreKonsentrasi"
                              ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4>Kontaminan</v-flex>
                            <v-flex xs6>
                              <v-text-field
                                  label="Kontaminan"
                                  disabled
                                  outline
                                  v-model="results.Other_PreparasiSpermaPreKontaminan"
                              ></v-text-field>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                    <v-flex xs6>
                        <v-layout mb-2 row>
                            <v-flex class="font-weight-bold" xs12>Post Preparasi</v-flex>
                        </v-layout>
                        <v-layout mb-2 row>
                            <v-flex xs4>Volume</v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                    label="Volume"
                                    disabled
                                    outline
                                    v-model="results.Other_PreparasiSpermaPostVolume"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4>Motilitas</v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                   label="Progresive"
                                    disabled
                                    outline
                                    v-model="results.Other_PreparasiSpermaPostMotilitasA"
                                ></v-text-field>
                            </v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                    label="Non Progresive"
                                    disabled
                                    outline
                                    v-model="results.Other_PreparasiSpermaPostMotilitasB"
                                ></v-text-field>
                            </v-flex>
                            <v-flex pa-1 xs2>
                                <v-text-field
                                    label="Immotile"
                                    disabled
                                    outline
                                    v-model="results.Other_PreparasiSpermaPostMotilitasC"
                                ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4>Konsentrasi</v-flex>
                            <v-flex xs6>
                              <v-text-field
                                  label="Konsentrasi"
                                  disabled
                                  outline
                                  v-model="results.Other_PreparasiSpermaPostKonsentrasi"
                              ></v-text-field>
                            </v-flex>
                        </v-layout>
                        <v-layout row>
                            <v-flex xs4>Kontaminan</v-flex>
                            <v-flex xs6>
                              <v-text-field
                                  label="Kontaminan"
                                  disabled
                                  outline
                                  v-model="results.Other_PreparasiSpermaPostKontaminan"
                              ></v-text-field>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout>
                <v-layout row>
                  <v-flex xs12>
                    <v-textarea
                        auto-grow
                        label="Keterangan"
                        outline
                        disabled
                        grow
                        v-model="results.Other_PreparasiSpermaNote"
                        hide-details
                    ></v-textarea>
                  </v-flex>
                </v-layout>
              </v-flex>
            </v-layout>
            <v-card class="mt-1">
            <v-layout align-center row>
              <v-flex pa-2 xs6>
                <v-card>
                  <v-layout row>
                    <v-flex pa-2 xs12><p class="mb-1">Pre Preparasi</p></v-flex>
                  </v-layout>
                  <v-layout align-center justify-center  row>
                    <v-flex xs12>
                       <v-img v-if="pre_image.image_url" :src="pre_image.image_url" aspect-ratio="1"></v-img>
                       <div v-if="!pre_image.image_url" class="display-2 text-xs-center ma-3">PRE IMAGE</div>
                    </v-flex>
                  </v-layout>
                </v-card>
              </v-flex>
              <v-flex pa-2 xs6>
                <v-card>
                  <v-layout row>
                    <v-flex pa-2 xs12><p class="mb-1">Post Preparasi</p></v-flex>
                  </v-layout>
                  <v-layout align-center justify-center row>
                    <v-flex xs12>
                       <v-img v-if="post_image.image_url" :src="post_image.image_url" aspect-ratio="1"></v-img>
                       <div v-if="!post_image.image_url" class="display-2 text-xs-center ma-3">POST IMAGE</div>
                    </v-flex>
                  </v-layout>
                </v-card>
              </v-flex>
            </v-layout>
            </v-card>
        </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="blue darken-1" flat @click="dialog_preparasisperma = false">Tutup</v-btn>

        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

 <script>
 module.exports = {
   mounted() {
      //this.$store.dispatch("re_preparasisperma/get_doctors",{token:''})
      this.files = ''
   },
   data() {
      return {
        error_doctor:false,
        error_image_pre:false,
        error_image_post:false,
        type_image:'PRE'
      };
   },
    computed: {
      pre_image(){
          return this.$store.state.re_preparasisperma.pre_image
        },
        post_image(){
          return this.$store.state.re_preparasisperma.post_image
        },
      show_progrees_upload: {
            get() {
                return this.$store.state.re_preparasisperma.show_progrees_upload
            },
            set(val) {
                this.$store.commit("re_preparasisperma/update_show_progrees_upload", val)
            }
        },
        images(){
          return this.$store.state.re_preparasisperma.images
        },
        onprocess(){
          return this.$store.state.re_preparasisperma.onprocess
        },
        dialog_preparasisperma: {
            get() {
                return this.$store.state.re_preparasisperma.dialog_preparasisperma
            },
            set(val) {
                this.$store.commit("re_preparasisperma/update_dialog_preparasisperma", val)
            }
        },
        results: {
            get() {
                return this.$store.state.re_preparasisperma.results
            },
            set(val) {
                this.$store.commit("re_preparasisperma/update_results", val)
            }
        },
        doctors(){
          return this.$store.state.re_preparasisperma.doctors
        },
        selected_doctor: {
            get() {
                return this.$store.state.re_preparasisperma.selected_doctor
            },
            set(val) {
                this.$store.commit("re_preparasisperma/update_selected_doctor", val)
            }
        },
        methodes(){
          return this.$store.state.re_preparasisperma.methodes
        },
        selected_methode: {
            get() {
                return this.$store.state.re_preparasisperma.selected_methode
            },
            set(val) {
                this.$store.commit("re_preparasisperma/update_selected_methode", val)
            }
        }
    },
    methods: {
        handleFileUploads(value){
          if(value === 'PRE'){
            this.files = this.$refs.prefile.files;
            //this.$refs.prefile.files = []
          }
          else{
            this.files = this.$refs.postfile.files;
            //this.$refs.postfile.files = []
          }
          console.log(this.files)
          this.type_image = value
        },
         
         removeFile( key ){
          this.files.splice( key, 1 );
        },
        submitFiles(){
          this.error_image = false
          this.error_image_pre = false
          this.error_image_post = false
          let formData = new FormData()
          console.log(this.files)
          for( var i = 0; i < this.files.length; i++ ){
            let file = this.files[i];
            formData.append('files[' + i + ']', file)
          }
          if(this.files.length == 1){
            this.files = []
            this.show_progrees_upload = true
            formData.append('orderid', this.$store.state.re_patient.selected_patient.T_OrderHeaderID)
            formData.append('labnumber', this.$store.state.re_patient.selected_patient.T_OrderHeaderLabNumber)
            formData.append('token',  one_token())
             formData.append('type',  this.type_image)
            this.$store.dispatch("re_preparasisperma/uploadimage_preparasi_sperma",formData)
          }
          else{
            if(this.type_image === 'PRE')
              this.error_image_pre = true
            else
              this.error_image_post = true
          }
          
        },
        saveResult(){
            if(_.isEmpty(this.selected_doctor) || this.selected_doctor == '0'){
              this.error_doctor = true

            }else
              var selected_x = this.$store.state.re_preparasisperma.selected_preparasisperma
              this.$store.commit("re_preparasisperma/update_onprocess", true)
              this.$store.dispatch("re_preparasisperma/saveresult",{orderdetailid:selected_x.id,doctor:this.selected_doctor.id,results:this.results})
            }
        }
    
 }
</script>
