<template>
   <v-card-text>
      <v-layout row >
         <v-flex xs6 class="pa-0 ma-0" >
            <v-text-field
               label="Panel"
               placeholder="Cari Panel"
               @change="search"
               class="ma-0"
               outline
               >
            </v-text-field>
         </v-flex>
            <v-flex xs6 class="pa-3">
               <v-label >
                  Panel found {{panel_count}}, display {{ panel_count < 20 ? panel_count : 20  }}
               </v-label>
            </v-flex>
      </v-layout>
      <v-container grid-list-xs text-xs-center pa-0>
         <v-layout row wrap>
            <v-btn xs3 v-for="p in panels" :key="p.T_TestPanelID" 
                       @click="selectPanel(p)"
                       depressed small color="error">
               {{p.T_TestPanelName}}
            </v-btn>
         </v-layout>
      </v-container>
   </v-card-text>
</template>
<script>
module.exports = {
   methods: {
      search(val) {
         if (this.prev_val == val ) return
         this.prev_val = val
         this.$store.commit("px/update_search_panel",val)  
         this.$store.dispatch("px/panel")  
      },
      update_req(px) {
         if (px.T_TestRequirement != '' ) {
            let reqs = this.$store.state.px.requirement
            if (! _.find(reqs, function(r) { return r.label == px.T_TestRequirement; }) ) {
               reqs.push({
                  label: px.T_TestRequirement,
                  is_error: true,
                  checked : false,
                  error_message: 'Hasil harus di isi',
                  note: ''
               })
            }
            this.$store.commit('px/update_requirement',reqs)
         }
      },
      selectPanel(panel) {
         try {
            let selected_panel = this.$store.state.px.selected_panel
            let flag_found = false
            selected_panel.forEach( function(p,idx) {
               if (panel.T_TestPanelID == p.T_TestPanelID) {
                  selected_panel[idx] = panel
                  flag_found = true
               }
            })
            if (!flag_found) {
               let f_update_req = this.update_req
               selected_panel.push(panel)
               panel.test.forEach(function(px){
                  f_update_req(px)
               })
            }
            this.$store.commit('px/update_selected_panel',selected_panel)
            let panels = this.$store.state.px.panels
            let p_idx= -1
            panels.forEach( function(p,idx) {
               if (p.T_TestPanelID == panel.T_TestPanelID) p_idx = idx
            })
            if (p_idx >= 0 ) {
               _.pullAt(panels,[p_idx]) 
               let dt = {
                  records: panels,
                  total : panels.length
               }
               this.$store.commit('px/update_panels',dt)
            }
         } catch(e) {
            console.log(e)
         }
      }
   },
   computed: {
      panel_count() {
         return this.$store.state.px.total_panel
      },
      panels() {
         console.log('get panels')
         return this.$store.state.px.panels
      },
      is_loading() {
         return this.$store.state.px.search_panel_status == 1
      }
   },
   data: function(){
      return {
         prev_val: ''
      }
   }
}
</script>
