<template>
  <v-container class="py-0 my-0">
    <v-dialog
      v-model="confirmationDialogKey"
      origin="left top"
      hide-overlay
      persistent
      max-width="1100px"
      flat
    >
      <v-card tile>
        <v-card-title>
          <v-row no-gutters>
            <v-col cols="11">
              <p
                class="body mt-7 mb-0 fontcolor-black-light"
              >{{confirmationDetails.confirmationMessage}}</p>
            </v-col>
            <v-col cols="1" class="text-right">
              <router-link to class="text-decoration-none black--text fontcolor-black-light">
                <div @click="onAction(false)">X</div>
              </router-link>
            </v-col>
          </v-row>
        </v-card-title>
        <v-card-actions class="px-4">
          <v-row no-gutters>
            <v-col cols="12">
              <v-hover v-slot:default="{ isHovering , props}">
                <v-btn
                  class="text-uppercase body-font ma-2 button-background"
                  v-bind="props"
                  size="large"
                  rounded="0" 
                  @click="onAction(false)"
                    :variant="isHovering ? 'outlined' : 'outlined'"
                  :class="
                  isHovering ? ' bg-white text-primary' : 'bg-primary'
                  "
                >CANCEL</v-btn>
              </v-hover>
              <v-hover v-slot:default="{  isHovering , props }">
                <v-btn
                  class="text-uppercase body-font ma-2 button-background text-white"
                   :variant="isHovering ? 'outlined' : 'outlined'"
                  :class="
                  isHovering ? ' textColor' : 'bgColor'
                  "
                  v-bind="props"
                  size="large"
                  rounded="0" 
                  @click="onAction(true)"
                >OK</v-btn>
              </v-hover>
            </v-col>
          </v-row>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-container>
</template>
<script>
export default {
  name: "ConfirmationDialogForm",
  props: ["confirmationDialog", "confirmationDetails"],
  data() {
    return {
      
    };
  },
  components: {},
  computed: {
    confirmationDialogKey(){
      return this.confirmationDialog
    }
  },
  methods: {
    onAction: function(action) {
      this.$emit("actionRemove", { submit: action });
    }
  },
  created() {}
};
</script>
<style scoped>
.bgColor{
    background-color: red;
}
.textColor{
    background-color: white !important;
    color: red !important;
}
</style>


