import { defineComponent, ref, computed, watch, withDirectives, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, toDisplayString, renderSlot, vShow, unref } from "vue";
import useZIndex from "../../../../hooks/useZIndex.mjs";
import vTap from "../../../../directives/vTap.mjs";
const _hoisted_1 = { class: "dialog-container" };
const _hoisted_2 = { class: "dialog-title" };
const _hoisted_3 = { class: "dialog-footer" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "DialogH5",
  props: {
    modelValue: { type: Boolean, default: false },
    title: { default: "" },
    confirmButton: { default: "" },
    cancelButton: { default: "" },
    closeOnClickModal: { type: Boolean, default: true },
    appendToBody: { type: Boolean, default: false },
    appendToRoomContainer: { type: Boolean, default: false },
    modal: { type: Boolean, default: false }
  },
  emits: ["update:modelValue", "close", "confirm", "cancel"],
  setup(__props, { emit: __emit }) {
    const visible = ref(false);
    const overlayContainerStyle = ref({});
    const { nextZIndex } = useZIndex();
    const dialogRef = ref();
    const hasTitle = computed(() => props.title !== "");
    const props = __props;
    const emit = __emit;
    watch(
      () => props.modelValue,
      (val) => {
        visible.value = val;
      }
    );
    watch(visible, (val) => {
      var _a;
      if (val) {
        overlayContainerStyle.value = { zIndex: nextZIndex() };
        if (props.appendToRoomContainer) {
          (_a = document.getElementById("roomContainer")) == null ? void 0 : _a.appendChild(dialogRef.value);
        }
      }
    });
    function handleConfirm() {
      emit("confirm");
    }
    function handleCancel() {
      emit("cancel");
    }
    function handleClose() {
      visible.value = false;
      emit("update:modelValue", false);
      emit("close");
    }
    function handleOverlayClick(event) {
      if (!props.closeOnClickModal) {
        return;
      }
      if (event.target !== event.currentTarget) {
        return;
      }
      handleClose();
    }
    return (_ctx, _cache) => {
      return withDirectives((openBlock(), createElementBlock("div", {
        ref_key: "dialogRef",
        ref: dialogRef,
        class: normalizeClass(["overlay-container", [_ctx.modal && "overlay"]]),
        style: normalizeStyle(overlayContainerStyle.value)
      }, [
        createElementVNode("div", _hoisted_1, [
          createElementVNode("span", _hoisted_2, toDisplayString(props.title), 1),
          createElementVNode("div", {
            class: normalizeClass([hasTitle.value ? "dialog-content" : "dialog-content-notitle"])
          }, [
            renderSlot(_ctx.$slots, "default", {}, void 0, true)
          ], 2),
          createElementVNode("div", _hoisted_3, [
            createElementVNode("div", {
              onClick: handleCancel,
              class: "cancel-button"
            }, toDisplayString(props.cancelButton), 1),
            createElementVNode("div", {
              onClick: handleConfirm,
              class: "confirm-button"
            }, toDisplayString(props.confirmButton), 1)
          ])
        ])
      ], 6)), [
        [vShow, visible.value],
        [unref(vTap), handleOverlayClick]
      ]);
    };
  }
});
export {
  _sfc_main as default
};
