<template>
  <div class="confirm">
    <p v-html="content"></p>
    <Teleport
      defer
      to=".modal-card:has(.confirm) .modal-card-foot"
    >
      <div class="field is-grouped w-full is-align-items-center">
        <div class="control is-expanded">
          <div class="buttons">
            <button
              class="button is-primary has-text-white"
              @click="confirm"
            >
              Đồng ý
            </button>
            <button
              class="button is-white"
              @click="cancel"
            >
              Hủy
            </button>
          </div>
        </div>
        <CountDown
          v-if="duration"
          :duration="duration"
          @close="cancel"
        />
      </div>
    </Teleport>
  </div>
</template>
<script setup>
import CountDown from "@/components/dialog/CountDown.vue";

const props = defineProps({
  content: String,
  duration: Number,
});

const emit = defineEmits(["close", "modalevent"]);

function cancel() {
  emit("close");
}

function confirm() {
  emit("modalevent", { name: "confirm" });
  cancel();
}
</script>
