<template>
  <div class="commons-notice">
    <div class="table-warp" :class="modelValue ? 'table-warp-open' : ''" @click.stop="closeNoticeTableModal">
      <div class="table" @click.stop v-loading="loading">
        <iframe id="myIframe" :src="iframeUrl" width="300" height="200"></iframe>
      </div>
    </div>
  </div>
</template>
<script setup>
import { watch } from "@vue/runtime-core";
import { ElMessage, ElMessageBox } from "element-plus";

const { proxy } = getCurrentInstance();
const iframeSrc = ref("");
const { modelValue, iframeUrl } = defineProps(["modelValue", "iframeUrl"]);

const emit = defineEmits();

const propValue = ref(modelValue);

const closeNoticeTableModal = () => {
  emit("update:modelValue", false);
};
let index = ref(0);
let data = ref([]);
const loading = ref(false);

// 监听来自子页面的消息
window.addEventListener("message", function (event) {
  console.log(event, "sss");
  if (event.data === "closeIframe") {
    closeIframe();
  } else if (event.data.indexOf("alertAndCloseIframe") >= 0) {
    alertAndCloseIframe(decodeURIComponent(event.data.split("#")[1]));
  }
});

onMounted(() => {
  console.log("222", modelValue);
  console.log("333", iframeUrl);
});

const noneUrl = () => {
  return "";
};

function closeIframe() {
  closeNoticeTableModal();
}

function alertAndCloseIframe(msg) {
  closeNoticeTableModal();
  ElMessageBox.alert(msg);
}
</script>
<style lang="scss">
iframe {
  border: none; /* 移除边框 */
  width: 100%; /* 使其填充父元素的宽度 */
  height: 650px; /* 设置 iframe 的高度 */
}
.table-warp {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease-in-out;
  opacity: 0;
  display: none;
}

.table-warp-open {
  opacity: 1;
  display: block;
}
.table {
  position: fixed;
  right: 30px;
  top: 52px;
  padding: 0 5px 5px;
  width: 500px;
  background: #fff;
  box-shadow: 0px 2px 20px 1px rgba(0, 0, 0, 0.1);
  z-index: 20;
  .notice-btn-box {
    text-align: right;
  }
  .tabs {
    display: flex;
    justify-content: space-between;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    font-weight: 400;
    ul {
      display: flex;
      margin: 23px 0;
      padding: 0;
      li {
        list-style: none;
        padding: 0 5px;
        cursor: pointer;
        height: 14px;
        line-height: 14px;
        border-left: 1px solid #dcdcdc;
      }
      .active {
        color: #0084ff;
      }
    }
    .more {
      color: #0084ff;
      cursor: pointer;
    }
  }
}
</style>