<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">Konfirmasi</v-card-title>
        <v-card-text>{{ init_text }}</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click="dialog = false">Batal</v-btn>
          <v-btn color="green darken-1" dark @click="confirm">{{ init_button_confirm }}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
module.exports = {
    props : ['text', 'data', 'button_confirm'],

    data () {
        return {
            init_text : this.text ? this.text : 'Apakah anda akan menghapus data tersebut ?',
            init_data : this.data ? this.data : null,
            init_button_confirm : this.button_confirm ? this.button_confirm : 'Hapus'
        }
    },

    computed : {
        dialog : {
            get () {
                return this.$store.state.dialog_confirm
            },
            set (v) {
                this.$store.commit('update_dialog_confirm', v)
            }
            
        }
    },

    methods : {
        confirm : function() {
            this.dialog = false
            console.log('Confirm dialog : confirmed')
            this.$emit('confirm', {data: this.init_data});
        }
    }
}
</script>