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

<script>
export default {
  data() {
    return {
      id: 'google_ads_frame2' + new Date().getTime()
    }
  },
  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(this.id)
        iframe.onload = () => {
          let arr = this.setData.map(i => ({
            key: i.key,
            name: i.name,
            type: i.type
          }))
          iframe.contentWindow.postMessage(arr, "*")
        }
      })
    }
  },
  watch: {
    dialog: {
      deep: true,
      handler: function () {
        if (this.dialog.details) {
          this.setMess()
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
#google_ads_frame2 {
  height: 300px;
  overflow: auto;
}
</style>

