<template>
  
    <v-dialog
      v-model="dialog"
      width="500"
    >
      

      <v-card>
        <v-card-title
          class="headline grey lighten-2 pt-2 pb-2"
          primary-title
        >
          Syarat Sampling
        </v-card-title>

        <v-card-text class="pt-2 pb-2">
          <v-layout row wrap>
            <v-flex xs12 v-for="(req, i) in requirements" v-bind:key="i">
              <v-checkbox :label="req.Nat_RequirementName" v-model="selected_requirements" :value="req.Nat_RequirementID"
                hide-details></v-checkbox>
            </v-flex>
          </v-layout>
        </v-card-text>
        <v-divider></v-divider>

        <v-card-actions>
            <v-btn
            color="primary"
            flat
            @click="dialog = false"
          >
            Tutup
          </v-btn>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            @click="save"
            :disabled="selected_requirements.length < 1"
            :dark="selected_requirements.length > 0"
          >
            Simpan
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  
</template>

<style scoped>
</style>

<script>
module.exports = {
    components : {
    },
    methods : {
       save () {
        //    this.$store.dispatch('sampling/save_requirement', "N")
            this.$store.commit('patient/update_req', {req_status:'N', reqs:this.selected_requirements})
            this.$store.commit('sampling/update_dialog_requirement', false)
       }
    },
    computed : {
       dialog: {
          get() {
             return this.$store.state.sampling.dialog_requirement;
          },
          set(val) {
             this.$store.commit('sampling/update_dialog_requirement', val);
          }
       },

       requirements : {
         get () {
           return this.$store.state.sampling.requirements
         },
         set (v) {
           this.$store.commit('sampling/update_requirements', v)
         }
       },

       selected_requirements : {
         get () {
           return this.$store.state.sampling.selected_requirements
         },
         set (v) {
           this.$store.commit('sampling/update_selected_requirements', v)
         }
       }
    },

    mounted () {
      this.$store.dispatch('sampling/get_requirement')
    },

    watch : {
      dialog(n, o) {
        let x = this.$store.state.patient.reqs
        if (n && !o)
          this.$store.commit('sampling/update_selected_requirements', x)
      }
    }
}
</script>
