<script setup>
import { twMerge } from "tailwind-merge";
import { computed, defineProps, onMounted, ref, watch } from "vue";

/* ----------------------------------------------------------------
  id名.showModal(): 開啟 modal
  id名.close(): 關閉 modal
  詳細請參考 daisyUI
------------------------------------------------------------------- */

const props = defineProps({
  id: String,
  title: String,
  onCancel: Function,
  modalClass: String,
  width: Number || String,
  draggable: {
    type: Boolean,
    default: false,
  },
  backdrop: {
    type: Boolean,
    default: true,
  },
  modalStyle: {
    type: Object,
    default: {},
  },
});

const dom = ref(null)

onMounted(() => {
  document.querySelector(`#${props.id}[open]`)?.addEventListener("load",()=>{
    console.log("loading")
  })
  document.querySelector(`#${props.id}`).addEventListener("load",()=>{
    console.log("loading")
  })
})

</script>

<template>
  <!-- Open the modal using ID.showModal() method -->
  <!-- :class="twMerge('modal', open && innerOpen ? 'modal-open' : 'modal-close')" -->
  <dialog ref="dom" :id="id" :class="twMerge(
    'modal',
    backdrop
      ? ''
      : 'focus-visible:outline-none backdrop:bg-transparent',
  )" :style="modalStyle" v-draggable="draggable">
    <div :class="twMerge(
      'modal-box static rounded-md border border-info py-5 px-6 overflow-y-auto bg-normal',
      modalClass
    )
      " :style="{ minWidth: isNaN(width) ? width : `${width}px` }">
      <div class="text-2xl font-bold">
        <slot name="modalTitle">
          {{ title }}
        </slot>
      </div>
      <div class="min-h-[200px]">
        <slot name="modalContent"></slot>
      </div>

      <div class="modal-action relative">
        <slot name="modalAction"></slot>
      </div>
    </div>
    <form v-if="backdrop" method="dialog" class="modal-backdrop">
      <button @click="() => {
        onCancel ? onCancel() : cancel();
      }
        ">
        close
      </button>
    </form>
  </dialog>
</template>

<style lang="css" scoped>
.modal-box::before {
  @apply fixed top-1 right-1 h-5 w-5 rotate-90 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background01.svg')] bg-center;
  content: "";
}

.modal-action::after {
  @apply absolute -bottom-3 -left-4 h-5 w-5 rotate-90 bg-no-repeat z-10 bg-[url('../../assets/img/table/content-box-background05.svg')] bg-center;
  content: "";
}
</style>
