<template>
   <div>
      <v-layout column pb-2>
         <v-card class="one-fo-requirement">
            <v-subheader red--text text--lighten-1>
               <span>PERSYARATAN</span>
               <v-spacer></v-spacer>
               <span class="red--text">Perkiraan Janji Hasil : {{ appx_schedule }}</span>
            </v-subheader>
            <v-divider></v-divider>
            <v-container fluid grid-list-sm>
               <v-layout row wrap>
                  <one-field-verification v-for="req in requirements" :key="req.idx"
                                          @input="update_req"
                                          :value="req" class="xs12 sm10" >
                  </one-field-verification>
               </v-layout>
            </v-container>
            <v-divider></v-divider>
            <v-layout>
               <v-flex xs12 pa-2>
                  <v-checkbox
                     v-model="received_sample"
                     value="Y"
                     label="Received Sample Only"
                  ></v-checkbox>
                  
               </v-flex>
            </v-layout>
         </v-card>
      </v-layout>
   </div>
</template>

<style scoped>
div.persyaratan input[type=text]::-webkit-input-placeholder {
   font-size: 1em;
}
div.persyaratan input[type=text] {
   font-size: .7em;
}
div.persyaratan label {
   color: #f44336!important;
   font-size: 1.1em;
   font-weight:400;
}
</style>
<script>
module.exports = {
   components: {
      "one-field-verification" : httpVueLoader("./oneFieldVerification.vue")
   },
   methods: {
      update_req(val) {
         
         let reqs = this.$store.state.px.requirement
         reqs.forEach(function(r,idx) {
            if ( val.idx = r.idx ) {
               reqs[idx] = val 
            }
         })
         this.$store.commit("px/update_requirement",reqs)
      }
   },
   computed: {
      requirements(){
         return this.$store.state.px.requirement
      },

      received_sample : {
         get () {
            return this.$store.state.order.received_sample
         },

         set (v) {
            if (v == null)
               v = "N";
               
            this.$store.commit("order/update_received_sample", v)
            return
         }
      },

      appx_schedule() {
         return this.$store.state.px.appx_schedule
      }
   }
}
</script>
