<template>
  <iframe v-if="state.url" :src="state.url" frameborder="0" width="100%" height="100%" @load="onLoad"></iframe>
</template>

<script setup name="custom-iframe">
import { reactive, watch } from 'vue';
import { isExternal } from '@/utils/validate';

const props = defineProps({
  url: {
    type: String,
    required: true,
  },
});

const emit = defineEmits(['on-load']);

const state = reactive({
  url: '',
  loaded: false,
});

watch(
  () => props.url,
  (val) => {
    if (isExternal(val)) {
      state.url = val;
    }
  },
  {
    immediate: true,
  }
);

const onLoad = () => {
  state.loaded = true;
  emit('on-load', state.loaded);
};
</script>
