<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">
        <CountDown
          v-if="duration"
          :duration="duration"
          @close="cancel"
        />
        <div class="ml-auto buttons">
          <button
            class="button is-white"
            @click="cancel"
          >
            Hủy
          </button>
          <button
            ref="confirmBtn"
            class="button is-primary"
            @click="confirm"
          >
            Đồng ý
          </button>
        </div>
      </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();
}

const confirmBtn = useTemplateRef("confirmBtn");
onMounted(() => {
  confirmBtn.value.focus();
});
</script>
