<template>
  <div class="comp-content">
    <!-- <el-dialog
      :title="diaTitle"
      draggable
      :close-on-click-modal="false"
      append-to-body
      v-bind="$attrs"
      @open="openFun"
    >
      <template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
        <slot :name="name" v-bind="scope" />
      </template>
    </el-dialog> -->
    <vxe-modal
      :title="diaTitle"
      show-zoom
      resize
      v-bind="$attrs"
      transfer
      :show-footer="showFooter"
      :className="bodyClass"
      :maskClosable="closeOnClickModal"
    >
      <template v-for="name in Object.keys($slots)" :key="name" #[name]="scope">
        <slot :name="name" v-bind="scope" />
      </template>
      <!-- 这个空插槽为了消除vxe-modal的警告，无实际作用 -->
      <template #footer />
    </vxe-modal>
  </div>
</template>

<script setup lang="ts">
interface Props {
  diaTitle: string;
  bodyClass?: string;
  closeOnClickModal?: boolean;
  showFooter?: boolean;
}

withDefaults(defineProps<Props>(), {
  diaTitle: '',
  bodyClass: '',
  closeOnClickModal: false,
  showFooter: true,
});

// const emit = defineEmits(['show']);
// const openFun = () => {
//   // 兼容vxe-modal
//   emit('show');
// };
</script>
