<!--
* @FileDescription: 云教练 弹窗
* @Author: 黄琪勇
* @Date:2024-09-05 19:13:16
-->
<template>
   <el-dialog modal-class="practiceFormClass" class="practiceForm" v-bind="$attrs" :fullscreen="true" :show-close="false">
      <iframe v-if="practiceUrl" class="penIframe" frameborder="0" :src="practiceUrl"></iframe>
   </el-dialog>
</template>

<script setup lang="ts">
import { onUnmounted } from "vue"
defineProps<{
   practiceUrl: string
}>()
const emits = defineEmits<{
   (e: "close"): void
}>()

// 监听iframe传来的关闭弹窗事件
window.addEventListener("message", messageClose)
function messageClose(event: MessageEvent<any>) {
   const { api } = event.data
   if (api === "api_YjtClose") {
      emits("close")
   }
}
onUnmounted(() => {
   window.removeEventListener("message", messageClose)
})
</script>
<style lang="scss">
.practiceForm.el-dialog {
   padding: 0;
   background-color: initial;
   .el-dialog__header {
      padding: 0;
   }
   .el-dialog__body {
      width: 100%;
      height: 100%;
      background-color: #fff;
      .penIframe {
         display: block;
         width: 100%;
         height: 100%;
      }
   }
}
.practiceFormClass.el-overlay {
   background-color: initial;
}
</style>
