<template>
  <div class="about">
    <el-button type="primary" @click="showIframeDialog">显示电子围栏</el-button>
    <div>{{ returnData }}</div>
    <!-- iframe弹窗 -->
     <el-dialog 
      :visible.sync="dialogVisible" 
      @close="handleDialogClose"
      width="80%">
      <iframe
        v-if="dialogVisible"
        src="http://localhost:8085/#/rail"
        @load="handleIframeLoad"
        style="width:100%; height:70vh"
      ></iframe>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      returnData: null
    };
  },
  mounted() {
    // 监听子窗口消息
    window.addEventListener('message', this.handleChildMessage);
  },
  beforeDestroy() {
    // 移除监听
    window.removeEventListener('message', this.handleChildMessage);
  },
  methods: {
    showIframeDialog() {
      this.dialogVisible = true;
    },
    handleDialogClose() {
      // 清理工作
      this.dialogVisible = false;
    },
    handleChildMessage(event) {
      // 安全验证
      if (event.origin !== window.location.origin) return;
      
      if (event.data.type === 'CLOSE_IFRAME') {
        console.log('收到关闭指令和数据:', event.data.payload);
        this.returnData = event.data.payload;
        this.dialogVisible = false; // 关闭弹窗
        
      }
    }
  }
};
</script>

<style scoped>
.about {
  padding: 20px;
}
</style>
