<template>
  <iframe v-if="src" class="x-iframe" :src="src"></iframe>
</template>

<script>
export default {
  name: 'XIframe',
  props: {
    src: {
      type: String
    },
    wrapperClass: {
      type: String,
      default: 'x-iframe__wrapper'
    }
  },
  data() {
    return {};
  },
  methods: {
    setWrapperClass(isAdd) {
      const wrapper = this.$el?.parentNode || this.wrapper;
      if (!wrapper) return;
      this.wrapper = wrapper;
      if (isAdd) {
        wrapper.classList.add(this.wrapperClass);
      } else {
        wrapper.classList.remove(this.wrapperClass);
      }
    }
  },
  activated() {
    this.setWrapperClass(true);
  },
  deactivated() {
    this.setWrapperClass(false);
  },
  mounted() {
    this.setWrapperClass(true);
  },
  beforeDestroy() {
    this.setWrapperClass(false);
  }
};
</script>

<style scoped>

</style>
