<template>
   <v-layout column>
      <h5 class="headline ml-2 mb-1">Pengiriman Hasil</h5>
      <v-container grid-list-md>
         <v-layout row wrap >
            <v-flex class="row" xs6 v-for="(delivery,idx) in deliveries" 
                                    :key="delivery.idx" mt-2>
               <v-layout row wrap :class="{'ml-4':(idx%2)==1}" >
                  <v-checkbox  
                     hide-details class="shrink mr-1" 
                                  :value="delivery.idx"
                                  v-model="checked_id"
                                  ></v-checkbox>

                     <v-text-field
                        class="grow"
                        outline
                        :value="delivery.note"
                        :label="delivery.name"
                        @input="(val) => updateDelivery(idx,val)"
                        hide-details
                        ></v-text-field>                
               </v-layout>
            </v-flex >
            
            <!-- <v-flex class="row" xs6 v-for="(delivery,idx) in deliveries" 
                                    :key="delivery.id" mt-2>
               <v-layout row wrap :class="{'ml-4':(idx%2)==1}" >
                  <v-checkbox  
                     hide-details class="shrink mr-1" 
                                  :value="delivery.selected"
                                  @change="(val) => updateSelected(idx,val)"
                                  ></v-checkbox>

                     <v-text-field
                        class="grow"
                        outline
                        :value="delivery.note"
                        :label="delivery.name"
                        @input="(val) => updateDelivery(idx,val)"
                        hide-details
                        ></v-text-field>                
               </v-layout>
            </v-flex > -->
            
         </v-layout>
      </v-container>
   </v-layout>

</template>

<script>
module.exports = {
   // data () {
   //    return {
   //       checked_id : []
   //    }
   // },

   methods: {
      updateSelected(idx,val) {
         console.log('idx:'+idx)
         console.log('val:'+val)
         var deliveries = this.$store.state.delivery.deliveries
         deliveries[idx].selected = val
         this.$store.commit("delivery/update_deliveries",deliveries)
      },
      updateDelivery(idx,val) {
         
         var deliveries = this.$store.state.delivery.deliveries
         deliveries[idx].note = val
         this.$store.commit("delivery/update_deliveries",deliveries)
      }
   },
   computed: {
      deliveries() {
         return this.$store.state.delivery.deliveries
      },

      checked_id : {
         get() {
            return this.$store.state.delivery.checked_id
         },
         set(val) {
            this.$store.commit("delivery/update_checked_id", val)
            this.$store.commit("delivery/update_deliveries_2")
         }
      }
   },
   mounted: function() {
      this.$store.dispatch('delivery/search')
   }
}
</script>
