<template>
   <v-layout column>
      <v-dialog
         v-model="dialog_delivery_note"
         width="500"
      >

         <v-card>
            <v-card-title
               class="headline blue lighten-2 white--text"
            >
               Catatan Pengiriman
            </v-card-title>

         <v-card-text>
            <v-layout row>
            <v-flex d-flex>
               <v-textarea
                  outline
                  label="Isikan Catatan"
                  v-model="selected_delivery_for_note.note"
               ></v-textarea>
            </v-flex>
            </v-layout>
            <v-layout row>
               <v-flex d-flex>
                  <p class="red--text font-weight-bold caption">
                     Untuk pengiriman email, penambahan catatan digunakan sebagai pengganti alamat email terpilih, 
                     jika lebih dari satu, 
                     tulis alamat email dengan separator koma
                     contoh : aku@gmail.com, kamu@gmail.com, dia@gmail.com
                  </p>
               </v-flex>
            </v-layout>
            <v-layout row>
               <v-flex d-flex>
                  <p class="red--text font-weight-bold caption">
                     Untuk pengiriman kurir, penambahan catatan digunakan sebagai keterangan
                     dan tidak merubah kecamatan kelurahan,
                     ketika proses spk kurir
                  </p>
               </v-flex>
            </v-layout>
            
        </v-card-text>

         <v-divider></v-divider>

         <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
               color="primary"
               flat
               @click="addDeliveryNote()"
            >
               Tambahkan
            </v-btn>
         </v-card-actions>
         </v-card>
      </v-dialog>
      <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" 
                                    mt-2>
               <v-layout row wrap :class="{'ml-4':(idx%2)==1}" >
                  <v-checkbox  
                     hide-details class="shrink mr-1" 
                                  :value="delivery.idx"
                                  :disabled="delivery.typeform === 'note'"
                                  v-model="checked_id"
                                  ></v-checkbox>

                     <v-text-field
                        class="grow"
                        :append-icon="delivery.typeform === 'md' ? 'add' : 'delete'"
                        outline
                        :value="delivery.note"
                        :label="delivery.name"
                        @input="(val) => updateDelivery(idx,val)"
                        @click:append="doAction(idx,delivery)"
                        hide-details
                        readonly
                        ></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 {
          dialog_delivery_note:false,
          selected_delivery_for_note:{}
       }
    },

   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)
      },
      doAction(idx,val){
         if(val.typeform === 'md'){
            let dlv = this.$store.state.delivery.checked_id
            dlv.push(val.idx)
            this.$store.commit("delivery/update_checked_id",dlv)
            this.selected_delivery_for_note = _.clone(val, true)
            
            if(val.code == 'EMAIL')
               this.selected_delivery_for_note.note = val.note
            else
               this.selected_delivery_for_note.note = ""

            this.dialog_delivery_note = true
         }
         else{
            var deliveries = this.$store.state.delivery.deliveries
            deliveries.splice(idx, 1)
            this.$store.commit("delivery/update_deliveries",deliveries)
         }
         
      },
      addDeliveryNote(){
         var xdt = this.selected_delivery_for_note
         let dlv = this.$store.state.delivery.checked_id
         
         dlv.push(xdt.idx)
         this.$store.commit("delivery/update_checked_id",dlv)
         
         xdt.typeform = 'note'
         xdt.id = Date.now()
         xdt.selected = xdt.idx
         var deliveries = this.$store.state.delivery.deliveries
         deliveries.push(xdt)
         this.$store.commit("delivery/update_deliveries",deliveries)
         this.dialog_delivery_note = false
      }
   },
   computed: {
      deliveries() {
         return this.$store.state.delivery.deliveries
      },

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