import { ElButton, ElDialog } from "element-plus";
import { createApp, h } from "vue";
// 創(chuàng)建一個 DialogManager 類來管理對話框
class DialogManager {
  constructor() {
    this.dialogs = [];
  }
  /**
   * 創(chuàng)建并顯示一個動態(tài)對話框
   * @param {Object} options - 對話框配置選項
   * @returns {Object} - 返回對話框?qū)嵗?
   */
  create(options = {}) {
    // 合并默認配置
    const defaultOptions = {
      title: "提示",
      visible: true,
      fullscreen: false,
      top: "15vh",
      modal: true,
      lockScroll: true,
      closeOnClickModal: true,
      closeOnPressEscape: true,
      beforeClose: null,
      footerBtns: [
        {
          label: "取消",
          type: "default",
          handler: (instance) => {
            instance.close();
          },
        },
        {
          label: "確定",
          type: "primary",
          handler: (instance) => {
            instance.close();
          },
        },
      ],
    };
    const dialogOptions = { ...defaultOptions, ...options };
    // 創(chuàng)建一個容器元素
    const container = document.createElement("div");
    document.body.appendChild(container);
    // 創(chuàng)建 Dialog 組件實例
    const app = createApp({
      data() {
        return {
          dialogVisible: dialogOptions.visible,
        };
      },
      provide() {
        return {
          manager: this.$options.manager, // 提供manager
        };
      },
      inject: ["manager"], // 注入manager
      render() {
        const footerNodes = dialogOptions.footerBtns.map((btn, index) => {
          return h(
            ElButton,
            {
              key: index,
              type: btn.type || "default",
              size: "small",
              onClick: () => {
                if (btn.handler) {
                  btn.handler(this);
                }
              },
            },
            () => btn.label
          );
        });
        // 改進 content 渲染方式
        const renderContent = () => {
          if (typeof dialogOptions.content === "string") {
            return h("div", { class: "dialog-content" }, dialogOptions.content);
          } else if (dialogOptions.content) {
            // 只傳遞必要的屬性和方法
            const props = {
              // 提供關(guān)閉對話框的回調(diào)
              closeDialog: () => {
                this.close();
              },
              // 可以添加其他必要的屬性
            };
            // 如果有額外的 props，合并它們
            if (dialogOptions.contentProps) {
              Object.assign(props, dialogOptions.contentProps);
            }
            return h(dialogOptions.content, props);
          } else {
            return h("div", { class: "dialog-content" }, "No content provided");
          }
        };
        return h(
          ElDialog,
          {
            title: dialogOptions.title,
            modelValue: this.dialogVisible,
            "onUpdate:modelValue": (val) => {
              this.dialogVisible = val;
            },
            fullscreen: dialogOptions.fullscreen,
            top: dialogOptions.top,
            modal: dialogOptions.modal,
            lockScroll: dialogOptions.lockScroll,
            closeOnClickModal: dialogOptions.closeOnClickModal,
            closeOnPressEscape: dialogOptions.closeOnPressEscape,
            beforeClose: dialogOptions.beforeClose,
            onClose: () => {
              this.dialogVisible = false;
              if (dialogOptions.onClose) {
                dialogOptions.onClose(this);
              }
              // 延遲銷毀，讓關(guān)閉動畫完成
              setTimeout(() => {
                this.destroy();
              }, 300);
            },
          },
          {
            // 默認插槽用于對話框內(nèi)容
            default: renderContent,
            footer: () =>
              h(
                "div",
                {
                  class: "dialog-footer",
                },
                footerNodes
              ),
          }
        );
      },
      methods: {
        // 關(guān)閉對話框
        close() {
          this.dialogVisible = false;
        },
        // 銷毀對話框?qū)嵗?
        destroy() {
          app.unmount();
          if (container.parentNode) {
            container.parentNode.removeChild(container);
          }
          // 從管理列表中移除
          if (this.manager) {
            const index = this.manager.dialogs.indexOf(this);
            if (index !== -1) {
              this.manager.dialogs.splice(index, 1);
            }
          }
        },
      },
      mounted() {
        // 添加到管理列表
        if (this.manager) {
          this.manager.dialogs.push(this);
        } else {
          console.error("Manager is not initialized");
        }
      },
    }).provide("manager", this); // 全局提供manager
    // 掛載應用
    const instance = app.mount(container);
    instance.manager = this; // 直接在實例上設(shè)置manager
    return instance;
  }
  /**
   * 關(guān)閉所有對話框
   */
  closeAll() {
    this.dialogs.forEach((dialog) => {
      dialog.close();
    });
  }
}
// 創(chuàng)建單例實例
const dialogManager = new DialogManager();
// 導出創(chuàng)建對話框的函數(shù)
export function createDialog(options) {
  return dialogManager.create(options);
}
// 導出關(guān)閉所有對話框的函數(shù)
export function closeAllDialogs() {
  dialogManager.closeAll();
}

-------------------------------- 基本文本對話框 -------------------------------------
import { createDialog } from '@/utils/dialog-manager';
export default {
  methods: {
    showSimpleDialog() {
      createDialog({
        title: '確認操作',
        content: '你確定要執(zhí)行這個操作嗎？',
        onClose: () => {
          console.log('對話框已關(guān)閉');
        },
        footerBtns: [
          {
            label: '取消',
            handler: (instance) => {
              console.log('點擊了取消');
              instance.close();
            },
          },
          {
            label: '確認',
            type: 'primary',
            handler: (instance) => {
              console.log('執(zhí)行確認操作');
              instance.close();
            },
          },
        ],
      });
    },
  },
};
-------------------------- 包含組件的對話框 --------------------------------
import { createDialog } from '@/utils/dialog-manager';
import MyComponent from '@/components/MyComponent.vue';
export default {
  methods: {
    showComponentDialog() {
      createDialog({
        title: '自定義組件對話框',
        content: MyComponent,
        contentProps: {     // 這里可以傳入組件的props
          message: '這是來自父組件的消息',
          src: 'xxx',
        },
        width: '600px',
        footerBtns: [
          {
            label: '關(guān)閉',
            handler: (instance) => {
              instance.close();
            },
          },
        ],
      });
    },
  },
};
-------------------------- 異步操作對話框 --------------------------------
import { createDialog } from '@/utils/dialog-manager';
export default {
  methods: {
    async showAsyncDialog() {
      const dialog = createDialog({
        title: '正在加載...',
        content: '數(shù)據(jù)加載中，請稍候...',
        showClose: false, // 隱藏關(guān)閉按鈕
        footerBtns: [],   // 不顯示底部按鈕
      });
      try {
        // 模擬異步操作
        const result = await this.fetchData();
        dialog.close();
        // 顯示成功消息
        createDialog({
          title: '操作成功',
          content: '數(shù)據(jù)加載完成',
          footerBtns: [
            {
              label: '確定',
              type: 'primary',
              handler: (instance) => instance.close(),
            },
          ],
        });
      } catch (error) {
        dialog.close();
        // 顯示錯誤消息
        createDialog({
          title: '操作失敗',
          content: `錯誤: ${error.message}`,
          footerBtns: [
            {
              label: '關(guān)閉',
              handler: (instance) => instance.close(),
            },
          ],
        });
      }
    },
  },
};