<template>
  <!-- 弹窗对话框 -->
  <vxe-modal class="vxe-table--ignore-clear" id="myModal" @close="modalClose" v-model="visible" :width="width" :height="height"

  :show-footer="showFooter"
      @confirm="confirmEvent"
    min-width="600" min-height="400" show-zoom resize  transfer>
    <!-- 
      show-footer 显示底部按钮 
      confirm 确认按钮事件
      min-width 最小宽度
      min-height 最小高度
      show-zoom 显示缩放按钮
      resize 是否可以缩放
      transfer 是否使用传送门
    -->
    <template #title>
      <span>{{ title }}</span>
      <!-- <span>提示</span> -->
    </template>
    <template #default>
      <component :is="app" ref="appPage" :dataId="dataId" :pageOptions="pageOptions" :pageMode="pageMode" @callback="handleCallback"></component>
    </template>
  </vxe-modal>

</template>
<script>

export default {
  name: "myDialog",
  data() {
    return {
      width:800,
      height:800,
      visible: false,
      title: "提示",
      callback: null,
      showFooter:false,
      dataId: "",
      pageMode: "", //add edit select
      pageOptions:{},
      app: null
    };
  },
  methods: {

    // 打开弹窗
    open(options) {
      // 解构赋值 page 页面组件 title 标题 callback 回调函数 pageMode 模式 add edit select dataId 数据id width 宽度 height 高度 pageOptions 页面参数
      // pageOptions 用于传递给页面的参数 例如：{id:1,name:'张三'} 页面通过 this.$options.pageOptions 获取
      // showFooter 是否显示底部按钮
      const { page, title, callback, pageMode, dataId,width = 800,height = 600 , pageOptions = {} ,showFooter } = options || {}; 
      
      this.width = width;
      this.height = height;
      this.dataId = dataId;
      this.pageMode = pageMode;
      this.title = title;
      this.pageOptions = pageOptions;
      this.app = page;
      this.callback = callback;
      this.showFooter = showFooter;
      // 设置延迟显示，解决弹窗显示不全的问题
      setTimeout(() => {
        this.visible = true;
      }, 10);
    },

    // 处理回调
    handleCallback(e) {
      const { callback } = this;
      // 判断是否有回调函数
      if (callback) {
        // 执行回调
        callback(e);
        // 关闭弹窗
        this.$destroy();
      }
    },

    // 关闭弹窗
    modalClose() {
      this.$destroy();
    },

    // 确认事件
    confirmEvent(){
      const { callback } = this;
      let data = this.$refs.appPage.getConfirmData();
      if (callback) {
        callback({data});
        this.$destroy();
      }
    }
  },
};
</script>
  