<template>
   <v-card-text class="pa-0">
      <v-layout column>
         <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">PEMERIKSAAN</h5>
               </v-card>
            </v-flex>
         </v-layout>
         <v-layout mt-1 align-row row>
            <v-flex  class="pl-1 pt-1 pr-1 ma-0" >
               <v-text-field
                  placeholder="ketikkan pemeriksaan ..."
                  @change="search"
                  class="ma-0"
                  single-line
                  clearable
                  outline
                  hide-details
                  type="search"
                  
                  >
               </v-text-field>
            </v-flex>
     
         </v-layout>
         <v-layout row >
            <v-flex xs6 pl-1  pr-1>
               <p  class="mb-0 mt-2 mono caption">Tekan <kbd>enter</kbd> untuk memulai pencarian</p>
            </v-flex>
            <v-flex xs6 pl-1  pr-1 >
               <!--<p class="mb-0 pa-1 text-xs-right caption">
                     <v-icon small>search</v-icon> Ditemukan data sebanyak <kbd style="background:#64b2cd">{{test_count}}</kbd> pemeriksaan
               </p>-->
            </v-flex>
         </v-layout>
         <v-divider class="mt-2 mb-2"></v-divider>
         <v-progress-linear class="ma-0 pa-0" indeterminate :active="is_loading" />
      </v-layout>
         <v-layout pl-1 pr-1 row wrap>
             <v-flex xs6 v-for="test in tests"  v-if="!selected_test(test)" :key="test.T_TestPriceID">
                <!--<v-btn block
          
                       @click="selectPx(test)"
                       depressed small :color="px_color(test.px_type)" dark
                       outline
                       class="ma-0 btn-px"
                      
                       >
                {{test.T_TestName}}
                </v-btn>     -->
                <v-layout style="cursor:pointer" align-center @click="selectPx(test)" row>
                   <v-flex xs12>
                     <v-card  v-if="test.px_type !== 'PN' && test.px_type !== 'PR'" color="#ee7777" dark class="pa-2 ma-1"  >
                        <p class="mb-0 caption"> {{test.T_TestName}}</p>
                     </v-card>
                     <v-card  v-if="test.px_type === 'PN'" color="#40a798" dark class="pa-2 ma-1"  >
                        <p class="mb-0 caption"> {{test.T_TestName}}</p>
                     </v-card>
                      <v-card  v-if="test.px_type === 'PR'" color="#7c73e6" dark class="pa-2 ma-1"  >
                        <p class="mb-0 caption"> {{test.T_TestName}}</p>
                     </v-card>
                   </v-flex>
                </v-layout>
             </v-flex>
            
         </v-layout>
         <v-divider class="mt-4 mb-2"></v-divider>
   </v-card-text>
</template>
<style scoped>
.btn-px > .v-btn__content {
    justify-content: left !important
}
</style>

<script>
let in_selectPx = false
module.exports = {
   mounted: function() {
         //this.onResize();
        // window.addEventListener('resize', this.onResize, { passive: true })
},
   beforeDestroy () {
    if (typeof window !== 'undefined') {
      window.removeEventListener('resize', this.onResize, { passive: true })
    }
  },
   methods: {
      onResize () {
      this.isMobile = window.innerWidth < 600
    },
      selected_test(x_px){
         var nat_tests = this.$store.state.px.nat_test
         var found_nt = false
         x_px.nat_test.forEach(function(entry) {
            if (nat_tests.indexOf(entry) !== -1)
                  found_nt = true
         })
         return found_nt
      },
      search(val) {
         if ( val == this.prev_search ) return
         console.log('Searching',val)
         this.prev_search = val
         this.$store.commit("px/update_search",val)  
         this.$store.dispatch("px/search") 
      },
      keyup(e) {
           //this.showhint = true
            if (e.which==13) {
                if (!window.one_token()) {
                    this.$store.commit('update_message_error', 'Maaf, koneksi Anda sempat terputus silahkan Log Out dan Login kembali')
                    this.$store.commit('update_dialog_error', true)
                    return
                }
                
                //this.$store.commit('patient/update_current_page',1)
               if ( this.search == this.prev_search ) return
               console.log('Searching',this.search)
               this.prev_search = this.search
               in_selectPx = false
               console.log(in_selectPx)
               //this.$store.commit("px/update_search",val)  
               this.$store.dispatch("px/search") 
            }
        },

         search_test_mobile() {
           //this.showhint = true
        
                if (!window.one_token()) {
                    this.$store.commit('update_message_error', 'Maaf, koneksi Anda sempat terputus silahkan Log Out dan Login kembali')
                    this.$store.commit('update_dialog_error', true)
                    return
                }
                
                //this.$store.commit('patient/update_current_page',1)
               if ( this.search == this.prev_search ) return
               console.log('Searching',this.search)
               this.prev_search = this.search
               in_selectPx = false
               console.log(in_selectPx)
               //this.$store.commit("px/update_search",val)  
               this.$store.dispatch("px/search") 
            
        },
      
      selectPx(px) {
         //debugger
         console.log("start select px")
            if (!window.one_token()) {
                this.$store.commit('update_message_error', 'Maaf, koneksi Anda sempat terputus silahkan Log Out dan Login kembali')
                this.$store.commit('update_dialog_error', true)
                return
            }
                

         try {
            console.log(in_selectPx)
            // START LOADING
            this.$store.commit('update_dialog_loading', true)

            // IF PROFILE
            if (px.px_type == "PR" || px.px_type == "PXR")
               return this.selectProfile(px)

            // SEARCH NAT TEST
            let nt = this.$store.state.px.nat_test
            let found_nt = false
            for (let i in px.nat_test) {
               if (nt.indexOf(px.nat_test[i]) > -1)
                  found_nt = true
            }

            if (found_nt) {
                alert('Pemeriksaan tersebut sudah ada !')
                // END LOADING
                this.$store.commit('update_dialog_loading', false)
                return
            }

            //if (in_selectPx) return
            in_selectPx = true
            let selected_test = this.$store.state.px.selected_test
            let flag_found = false
            selected_test.forEach( function(t,idx) {
               if (t.T_TestID == px.T_TestID) {
                  selected_test[idx] = px 
                  flag_found = true
               }
            })
            if (!flag_found) {
               selected_test.push(px)
               let tests = this.$store.state.px.tests
               let p_idx = -1
               tests.forEach(function(t,idx) {
                  if (t.T_TestID == px.T_TestID) {
                     p_idx = idx
                  }
               })
               if (p_idx >= 0 ) {
                  _.pullAt(tests,[p_idx]) 
                  let dt = {
                     records: tests,
                     total: tests.length
                  }
                  this.$store.commit('px/update_tests',dt)
               }
            }
            this.$store.commit('px/update_selected_test', selected_test)
            if (px.px_type !== "PN"){
               let req = px.requirement
               let reqs = this.$store.state.px.requirement
               if (req.length > 0) {
                  for(let i in req) {
                     let found = false
                     for(let j in reqs) {
                        if (reqs[j]['req_id'] == req[i]['req_id'])
                           found = j
                     }

                     if (!found)
                        reqs.push({
                           px_id: [px.T_TestID],
                           label: req[i]['req_name'],
                           error_message: 'Hasil harus di isi',
                           is_error: true,
                           checked : false,
                           note: '',
                           req_id: req[i]['req_id']
                        })
                     else
                        reqs[found].px_id.push(px.T_TestID)
                  }

                  this.$store.commit('px/update_requirement', reqs)
               }
            }
            

            this.$store.dispatch('px/appx_schedule')

            in_selectPx = false
            this.$store.commit('px/update_nat_test')

            // END LOADING
            if (px.px_type == "PN")
               this.$store.dispatch('px/packet_reqs',{pxs:px.child_test})
            this.$store.commit('update_dialog_loading', false)
         } catch(e) {
            console.log(e)
            in_selectPx = false
         }
      },

      selectProfile(px) {
         try {
             
            // SEARCH NAT TEST
            let nt = this.$store.state.px.nat_test
            let found_nt = false
            for (let i in px.nat_test) {
               if (nt.indexOf(px.nat_test[i]) > -1)
                  found_nt = true
            }

            if (found_nt) {
               alert('Pemeriksaan tersebut sudah ada !')
                // END LOADING
                this.$store.commit('update_dialog_loading', false)
               return
            }

            let pxs = px.child_test
            
            for (let i in pxs) {
               px = pxs[i]
               
               let selected_test = this.$store.state.px.selected_test
               let flag_found = false

               selected_test.push(px)
               let tests = this.$store.state.px.tests
               let p_idx = -1
               tests.forEach(function(t,idx) {
                  if (t.T_TestID == px.T_TestID) {
                     p_idx = idx
                  }
               })
               
               if (p_idx >= 0 ) {
                  _.pullAt(tests,[p_idx]) 
                  let dt = {
                     records: tests,
                     total: tests.length
                  }
                  this.$store.commit('px/update_tests',dt)
               }
               
               this.$store.commit('px/update_selected_test', selected_test)

               let req = px.requirement
               
               let reqs = this.$store.state.px.requirement
               if (req.length > 0) {
                  for(let i in req) {
                     let found = false
                     for(let j in reqs) {
                        if (reqs[j]['req_id'] == req[i]['req_id'])
                           found = j
                     }

                     if (!found)
                        reqs.push({
                           px_id: [px.T_TestID],
                           label: req[i]['req_name'],
                           error_message: 'Hasil harus di isi',
                           is_error: true,
                           checked : false,
                           note: '',
                           req_id: req[i]['req_id']
                        })
                     else
                        reqs[found].px_id.push(px.T_TestID)
                  }

                  this.$store.commit('px/update_requirement', reqs)
               }
            }
            
            this.$store.dispatch('px/appx_schedule')
            in_selectPx = false
            this.$store.commit('px/update_nat_test')

            // END LOADING
            this.$store.commit('update_dialog_loading', false)

         } catch(e) {
            console.log(e)
            // END LOADING
            this.$store.commit('update_dialog_loading', false)
            in_selectPx = false
         }
      },

      px_color (x) {
         if (x == "PR")
            return "green"
         else if (x == "PN")
            return "orange"
         else
            return "error"
      }
   },
   computed: {
      test_count() {
         return this.$store.state.px.total_test
      },
      display_count() {
         return this.tests.length
      },
      tests() {
         return this.$store.state.px.tests
      },
      is_selectPx() {
         return in_selectPx
      },
      is_loading() {
         return this.$store.state.px.search_status == 1
      }
   },
   data: function(){
      return {
         search_val:false,
         search_flag:false,
         prev_search : ''
      }
   }
}
</script>
