
<template>
    <div ref="dialogContainer">
  </div>
</template>
  
  <script setup lang="ts">
  import { Button, Dialog } from "kintone-ui-component";
  import { onBeforeUnmount, onMounted, ref, watch } from "vue";
 
  const props = defineProps<{
    message: string;
    show: boolean;
  }>();

  const isDialogVisible = ref(props.show);

watch(
  () => props.message,
  (newMessage) => {
    if (dialog.value) {
      dialog.value.content=newMessage;
    }
  }
);
watch(
  () => props.show,
  (newValue) => {
    if (dialog.value) {
      if (newValue) {
        dialog.value.open();
      } else {
        dialog.value.close();
      }
    }
  }
);

  const emit = defineEmits(["update:show"]);

  const dialog = ref<Dialog | null>(null);
  const dialogContainer = ref<HTMLDivElement | null>(null);

  const closeDialog = () => {
    if (dialog.value) {
      dialog.value.close();
    }
    emit("update:show", false); 
  }

  onMounted(() => {
    if (!dialogContainer.value) return;

    const okButton = new Button({ text: "OK", type: "normal" });
    okButton.addEventListener("click", closeDialog);

    const footerDiv = document.createElement("div");
    footerDiv.className="dialog-action-bar";
    footerDiv.appendChild(okButton);

    // 创建 Dialog 实例
    dialog.value = new Dialog({
      header: "エラー情報",
      content: props.message,
      icon: "error",
      container: dialogContainer.value, 
      footer: footerDiv,
      footerVisible:true
    });

    if (props.show) {
      dialog.value.open();
    }
});



</script>
 