<template>
   <v-card class="pa-1" height="100%">
      <v-layout column>

         <v-flex xs12 class="pa-2">
            <v-layout>
               <v-flex xs6 >
                  <v-autocomplete
                     label="Dokter Pengirim"
                     v-model="selected_doctor"
                     :items="doctors"
                     :search-input.sync="search"
                     auto-select-first
                     no-filter
                     return-object
                     clearable
                     item-text="M_DoctorName"
                     :loading="is_loading"
                     no-data-text="Pilih Dokter Pengirim"
                     >
                     <template
                        slot="item"
                        slot-scope="{ item }"
                        >
                        <v-list-tile-content>
                           <v-list-tile-title v-text="item.M_DoctorName"></v-list-tile-title>
                        <v-list-tile-sub-title v-text="getAddress(item)"></v-list-tile-sub-title>
                        </v-list-tile-content>
                     </template>

                  </v-autocomplete>
               </v-flex>
               <v-flex xs1 ml-1 mr-1>
                  <doctor-new-dialog></doctor-new-dialog>
               </v-flex>
               <v-flex xs5 ml-1>
                  <v-select
                     v-model="selected_address"
                     :items="doctor_address"
                     item-text="M_DoctorAddressDescription"
                     item-value="M_DoctorAddressID"
                     return-object
                     label="Alamat"
                     ></v-select>
               </v-flex>

            </v-layout>

            <v-layout>
               <v-flex xs6 mr-1>
                  <v-select
                     v-model="selected_doctor_pj"
                     :items="doctors_pj"
                     item-text="M_DoctorName"
                     label="Dokter Penanggung Jawab"
                     ></v-select>
               </v-flex>
              <v-flex xs6>
                  <v-select
                     v-model="selected_language"
                     :items="languages"
                     item-text="name"
                     item-value="key"
                     label="Bahasa"
                     return-object
                     ></v-select>

               </v-flex>
            </v-layout>

            <v-layout>
               <v-flex xs12 mr-1>
                  <v-textarea
                     label="Diagnosa"
                     rows="3"
                     v-model="diagnosa"
                     ></v-textarea>
               </v-flex>

            </v-layout>

         </v-flex>

         <v-flex xs12>
            <patient-delivery></patient-delivery>
         </v-flex>
      </v-layout>
   </v-card>
</template>
<script>
module.exports = {
   components: {
      'patient-delivery' : httpVueLoader('./patientDelivery.vue'),
      'doctor-new-dialog' : httpVueLoader('./doctorNewDialog.vue')
   },
   computed: {
      search:{
         get(){
            return this.$store.state.doctor.search
         },
         set(val)  {
            this.$store.commit('doctor/update_search',val)
         }
      },
      diagnosa: {
         get() {
            return this.$store.state.order.diagnosa
         },
         set(val) {
            this.$store.commit('order/update_diagnosa',val)
         }
      },
      languages() {
         return this.$store.state.language.languages
      },
      selected_language: {
         get() {
            return this.$store.state.language.selected_language
         },
         set(val) {
            this.$store.commit('language/update_selected_language',val)
         }
      },
      selected_doctor_pj: {
         get() {
            return this.$store.state.doctor.selected_doctor_pj
         },
         set(val) {
            this.$store.commit('doctor/update_selected_doctor_pj',val)
         }
      },
      doctors_pj() {
         return this.$store.state.doctor.doctors_pj
      },
      selected_address: {
         get() {
            return this.$store.state.doctor.selected_address
         },
         set(val) {
            this.$store.commit('doctor/update_selected_address',val)
         }
      },
      doctor_address() {
         if (! this.$store.state.doctor.selected_doctor ) return []
         if (! this.$store.state.doctor.selected_doctor.address) return []
         return this.$store.state.doctor.selected_doctor.address
      },
      doctors() {
         return this.$store.state.doctor.doctors
      },
      selected_doctor: {
         get() {
            return this.$store.state.doctor.selected_doctor
         },
         set(val) {
            this.$store.commit("doctor/update_selected_doctor",val)
            this.$store.commit('delivery/update_params', {d_id:val.M_DoctorID})
            this.$store.dispatch('delivery/search')
         }
      },
      selected_doctor_x() {
         
            return this.$store.state.doctor.selected_doctor
         
      },
      is_loading: {
         get() {
            return this.$store.state.doctor.search_status == 1
         },
         set(val) {
            this.$store.commit("doctoc/update_search_status",val ? 1 : 2)
         }
      }
   },
   methods: {
      getAddress(doc) {
         
         var s_addr = ''
         if (! doc.address ) return ''
         doc.address.forEach(function(addr){
            if (s_addr != '') s_addr += ', '
            s_addr += addr.M_DoctorAddressDescription
         });
         return s_addr
      },
      thr_search: _.debounce( function () {
         this.$store.commit("doctor/update_search_status", 1) // LOADING
         this.$store.dispatch("doctor/search")
      }, 700)
   },
   watch : {
      search(val, old) {
         // console.log("val:"+val)
         // console.log("old:"+old)

         if (this.$store.state.order.is_from_clinic)
            return
            
         if (val == null || typeof val == 'undefined') val = ""
         // console.log("1-val:"+val)
         if (val == old ) return
         // console.log("2-val:"+val)
         // if (! val) return
         // console.log("3-val:"+val)
         // if (val.length < 1 ) return
         // console.log("4-val:"+val)
      
         if (this.$store.state.doctor.search_status == 1 ) return  
         // console.log("5-val:"+val)
         this.$store.commit("doctor/update_search", val)
         this.thr_search()

         // if (this.$store.state.doctor.search_status == 1 ) return  
         // this.$store.commit("doctor/update_search",val)
         // this.thr_search()
      }
   },
   mounted: function() {
      this.$store.dispatch("language/search")
      /*
      if ( this.$store.state.doctor.mounted < 1 ) {
         this.$store.dispatch("doctor/search")
         this.$store.dispatch("doctor/search_pj")
         this.$store.dispatch("language/search")
      }
      
      this.$store.commit("doctor/increment_mounted", 1);
      console.log("doctor mounted : ", this.$store.state.doctor.mounted)
      */
   },
   data() {
      return {
         n_mounted : 1
      }
   }
}
</script>
