<template>
  
    <v-dialog
      v-model="dialog"
      max-width="30%"
    >
        <v-card>
            <v-card-title
                class="headline grey lighten-2 pt-2 pb-2"
                primary-title
            >
            Peringatan !
            </v-card-title>
            <v-card-text class="pt-2 pb-2">
                <v-layout row>
                    <v-flex xs12 d-flex>
                        <v-layout row>
                            <v-flex pb-1 xs12>
                                <v-layout row>
                                    <v-flex pt-2 pr-2 xs12>
                                        {{xmsg}}
                                    </v-flex>
                                </v-layout>
                            </v-flex>
                        </v-layout>
                    </v-flex>
                </v-layout> 
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
                <v-btn
                    color="error"
                    flat
                    @click="forgetAlert()"
                >
                Abaikan
                </v-btn>
                <v-spacer></v-spacer>
                <v-btn
                    color="primary"
                    flat
                    @click="closeAlert()"
                >
                OK
                </v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
  
</template>

<style scoped>
</style>

<script>
module.exports = {
    props : ['status', 'msg'],
    computed : {
        xmsg() {
            return this.msg
        },
        dialog: {
            get() {
                return this.status
            },
            set(val) {
                 this.$emit('close-dialog-alert')
            }
        }
    },
    methods: {
        closeAlert() {
            this.$emit('close-dialog-alert')
        },
        forgetAlert() {
            this.$emit('forget-dialog-alert')
        }
    }
}
</script>
