<template>
    <v-dialog v-model="DeleteRoleDialog" width="auto" persistent @keydown.esc="cancel">
        <v-card>
        <v-card-title>
            <v-row justify="end" class="pt-2"><v-hover v-slot="{ isHovering, props }"><v-icon size="small" v-bind="props" :color="isHovering ? 'grey-darken-1' : 'grey-lighten-1'" variant="plain" icon="mdi-close" @click.native="cancel"></v-icon></v-hover></v-row>
        </v-card-title>

        <v-card-text>
            <v-row class="d-flex">
                <v-col align="center" cols="12">
                    <v-avatar color="red-lighten-1" size="80">
                        <v-icon size="50" icon="mdi-briefcase-remove"></v-icon>
                    </v-avatar>
                </v-col>
                <v-col align="center" cols="12" style="font-size: 16px;color:#EF5350"><strong>{{ message }}</strong></v-col>
            </v-row> 
        </v-card-text>
        <v-card-actions class="pt-3">
            <v-btn color="red-darken-1" text @click.native="cancel">No</v-btn>
            <v-spacer></v-spacer>
            <v-btn color="green-darken-1" text @click.native="agree">Yes</v-btn>
        </v-card-actions>
        </v-card>
    </v-dialog>
</template>
<script scoped>
    export default {
        expose: ['deleteRole'],
        data: () => ({
            DeleteRoleDialog: false,
            resolve: null,
            reject: null,
            message: null,
            title: null,
        }),

        methods: {
            async deleteRole(roleID,roleName) {
                if (await this.open("Confirm","Are you sure you want to delete role: #"+roleID+' '+roleName+'?')) {
                    this.deleteRecord(roleID);
                }
            },

            open(title, message, options) {
                this.DeleteRoleDialog = true;
                this.title = title;
                this.message = message;
                return new Promise((resolve, reject) => {
                    this.resolve = resolve;
                    this.reject = reject;
                });
            },

            async deleteRecord(roleID) {
                let response;
                this.$root.$refs.overlay.showOverlay(true);
                this.$root.axiosPost('/role-manager/delete/'+roleID, null, {}).then(data => {
                    response = data.response.data;
                    this.$root.$refs.overlay.showOverlay(false);
                    if (response.status == 'Success') {
                        this.DeleteRoleDialog = false;
                        this.$emit('load-roles');
                    }
                    
                });
            },

            agree() {
                this.resolve(true);
                this.DeleteRoleDialog = false;
            },

            cancel() {
                this.resolve(false);
                this.DeleteRoleDialog = false;
            }
        }
    }
</script>