<template>
   <v-layout column pb-2>
      <v-card class="pa-1 mb-0" >
         <v-layout align-center row>
            <v-flex xs12>
               <v-card tile class="pa-2" flat color="#64b2cd">
                  <h5 style="color:#fff" class="subtitle-1 font-weight-bold">KEL. PELANGGAN DAN AGREEMENT</h5>
               </v-card>
            </v-flex>
         </v-layout>
         <v-layout row>
            <v-flex  pt-1 pl-2 pr-1 xs6>
               <v-autocomplete
                  label="Kel. Pelanggan"
                  v-model="selected_company"
                  :items="companies"
                  style="font-size:12px;"
                  :search-input.sync="search"
                  :readonly="isHavingTest"
                  auto-select-first
                  no-filter
                  hide-details
                  return-object
                  :clearable="! isHavingTest"
                  item-text="M_CompanyName"
                  :loading="is_loading"
                  no-data-text="Pilih Company"
                  >
                  <template
                     slot="item"
                     slot-scope="{ item }"
                     >
                     <v-list-tile-content>
                        <v-list-tile-title v-text="item.M_CompanyName"></v-list-tile-title>
                     <v-list-tile-sub-title v-text="getMou(item)"></v-list-tile-sub-title>
                     </v-list-tile-content>
                  </template>

               </v-autocomplete>
            </v-flex>
            <v-flex  pt-1 pl-1 pr-2 xs6>
               <v-select
                  :search-input.sync="searchXMou"
                  autocomplete
                  v-model="selected_mou"
                  :items="company_mou"
                  :readonly="isHavingTest"
                  style="font-size:12px;"
                  auto-select-first
                  item-text = "M_MouName"
                  return-object
                  label="Agreement"
                  hide-details
                  class="mb-1"
                  >
                  <template
                     slot="item"
                     slot-scope="{ item }"
                     >
                     <v-list-tile-content>
                        <v-list-tile-title v-text="item.M_MouName"></v-list-tile-title>
                     <v-list-tile-sub-title v-text="getMouDate(item)"></v-list-tile-sub-title>
                     </v-list-tile-content>
                  </template>
               </v-select>
              
            </v-flex>
         </v-layout>
         <v-layout v-if="selected_mou_note.length > 0" mt-1 pt-1 pl-2 pr-2 style="border:1px dashed #64b2cd" row>
            <v-flex xs12>
               <p class="mb-1"><kbd style="background:#ec4d4d">Catatan :</kbd></p>
               <p v-for="(note, n) in selected_mou_note" v-bind:key="n" class="mb-1 caption">{{ note }}</p>
            </v-flex>
         </v-layout>
         <v-layout v-if="show_doctor_alert" mt-1 pt-1 pl-2 pr-2 row>
            <v-flex xs12>
               <p style="background:#ee7777;color:#fff" class="caption pl-2 pr-2 pt-1 pb-1 mb-1">Dokter belum dipilih, jangan lupa ya</p>
            </v-flex>
         </v-layout>
      </v-card>
   </v-layout>
</template>

<style scoped>
</style>
<script>
module.exports = {
   computed: {
      show_doctor_alert(){
         return  this.$store.state.doctor.show_doctor_alert
      },
      search:{
         get(){
            return this.$store.state.company.search
         },
         set(val)  {
            if (val == null) return
            this.$store.commit('company/update_search',val)
         }
      },
      isHavingTest() {
         return this.$store.state.px.selected_test.length > 0 ||
            this.$store.state.px.selected_panel.length > 0
      },
      selected_mou: {
            get() {
                return this.$store.state.company.selected_mou
            },

            set(val) {
               this.$store.commit("company/update_selected_mou", val)
               let dlv = this.$store.state.delivery.checked_id
                let cmou = val
                //alert(val.M_MouID)
               this.$store.dispatch('delivery/search_deliveries',{type:'mou',id:val.M_MouID})

                // Search Test
                this.$store.dispatch('px/search')
               var doctor = this.$store.state.doctor.selected_doctor
               var company = this.$store.state.company.selected_company
               var alias_doctor = this.$store.state.doctor.doctor_alias
               var doctorname = ['','']
               if(!_.isEmpty(doctor))
                  doctorname = doctor.M_DoctorName.split(']')
               
                // Auto CHECKED
                

                if(doctorname[1].trim() === '-' && company.M_CompanyName !== 'PASIEN MANDIRI'){
                    this.$store.commit("company/update_show_alias_doctor",true)
                }
                else{
                    this.$store.commit("company/update_show_alias_doctor",false)
                }
            if(doctor.M_DoctorName){
               if(doctorname[1].trim() === '-' && alias_doctor === '' && company.M_CompanyName !== 'PASIEN MANDIRI'){
                  this.$store.commit('doctor/update_show_doctor_alert', true)
               }
               else{
                this.$store.commit('doctor/update_show_doctor_alert', false)
               }
            }
            else{
                this.$store.commit('doctor/update_show_doctor_alert', true)
            }
            }
      },
      selected_company: {
         get() {
            return this.$store.state.company.selected_company
         },
         set(val) {
            this.$store.commit("company/update_selected_company", val)
            for (let i in val.mou)
                if (val.mou[i].M_MouIsDefault == 'Y'){
                   this.$store.commit('company/update_selected_mou', val.mou[i])
                   this.$store.dispatch('delivery/search_deliveries',{type:'mou',id:val.mou[i].M_MouID})
                   console.log("mulai cari px")
                   this.$store.dispatch('px/search')
                }
            var doctor = this.$store.state.doctor.selected_doctor
            var doctorname = ['','']
            if(!_.isEmpty(doctor))
                  doctorname = doctor.M_DoctorName.split(']')

            var alias_doctor = this.$store.state.doctor.doctor_alias
            
            if(doctorname[1].trim() === '-' && val.M_CompanyName !== 'PASIEN MANDIRI'){
                    this.$store.commit("company/update_show_alias_doctor",true)
                }
                else{
                    this.$store.commit("company/update_show_alias_doctor",false)
                    this.$store.commit('doctor/update_doctor_alias','')
                    this.$store.commit('doctor/update_doctor_alias_address','')
                }
            if(doctor.M_DoctorName){
               if(doctorname[1].trim() === '-' && alias_doctor === '' && val.M_CompanyName !== 'PASIEN MANDIRI'){
                  this.$store.commit('doctor/update_show_doctor_alert', true)
               }
               else{
                this.$store.commit('doctor/update_show_doctor_alert', false)
                this.$store.commit('doctor/update_doctor_alias','')
                this.$store.commit('doctor/update_doctor_alias_address','')
               }
            }
            else{
                this.$store.commit('doctor/update_show_doctor_alert', true)
            }
         }
      },
      company_mou() {
         if (! this.$store.state.company.selected_company) return []
         if (! this.$store.state.company.selected_company.mou) return []
         return this.$store.state.company.selected_company.mou
      },

      companies() {
         return this.$store.state.company.companies
      },
      is_loading() {
         return this.$store.state.company.search_status == 1
      },

        selected_mou_note() {
            let x = this.selected_mou
            if (!x)
                return []
            if (!x.M_MouNote)
                return []

            return x.M_MouNote.split(/\n/)
        }
   },
   methods: {
      getMouDate(item) {
         return item.M_MouStartDate + ' s/d ' + item.M_MouEndDate
      },
      getMou(item) {
         if (!item) return ''
         if (!item.mou) return ''
         let s_mou = ''
         item.mou.forEach( function(mou,idx) {
            if (s_mou!='') s_mou += ', '
            s_mou += mou.M_MouName
         });
         return s_mou
      },
      thr_search: _.debounce( function () {
         this.$store.dispatch("company/search")
      }, 700)
   },
   watch: {
      search(val,old) {
         if (this.$store.state.order.is_from_clinic)
            return
         if (val == null || typeof val == 'undefined') val = ""
         if (val == old ) return
         if (this.$store.state.company.search_status == 1 ) return  
         this.$store.commit("company/update_search",val)
         this.thr_search()
      }
   },
   data: function() {
      return {
         searchXMou:''
         // search : ''
      }
   },

   mounted () {
      this.$store.dispatch('company/search_default')
   }
}
</script>
