<template>
  <el-dialog
    :title="title"
    append-to-body
    class="iframe"
    :visible.sync="dialog.details"
    width="500px"
  >
    <iframe
      id="google_ads_frame2"
      name="google_ads_frame2"
      frameborder="0"
      width="100%"
      height="600px"
      :src="iframeSrc"
      marginwidth="0"
      marginheight="0"
      vspace="0"
      hspace="0"
      allowtransparency="true"
      scrolling="no"
      allowfullscreen="true"
    ></iframe>
  </el-dialog>
</template>

<script>
export default {
  props: {
    iframeSrc: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: "详情"
    },
    dialog: {
      type: Object,
      default: function () {
        return {
          details: false
        }
      }
    },
    setData: {
      type: [Array, String],
      default: function () {
        return []
      }
    }
  },
  methods: {
    setMess() {
      this.$nextTick(_ => {
        let iframe = document.getElementById("google_ads_frame2")
        iframe.onload = () => {
          iframe.contentWindow.postMessage(this.setData, "*")
        }
      })
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.details) {
          this.setMess()
        }
      }
    }
  }
}
</script>

