<template>
  <PageWrapper dense :contentStyle="{ height: '100%' }" class="h-full">
    <div :class="`my__frame-box`" :style="{ height: loading ? '0' : '100%' }">
      <iframe :src="frameSrc" :class="`my__main`" ref="frameRef" @load="hideLoading"></iframe>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  import { propTypes } from '/@/utils/propTypes';

  defineProps({
    frameSrc: propTypes.string.def(''),
  });
  const loading = ref(true);

  function hideLoading() {
    loading.value = false;
  }
</script>
<style lang="less" scoped>
  @prefix-cls: '';

  .my__frame-box {
    .ant-spin-nested-loading {
      position: relative;
      height: 100%;

      .ant-spin-container {
        width: 100%;
        height: 100%;
        padding: 10px;
      }
    }

    &__mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    &__frame-box {
      width: 100%;
      height: 100%;
      padding: 10px;
      background: #fff;
      border-radius: 16px;
    }

    .my__main {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: @component-background;
      border: 0;
      box-sizing: border-box;
    }
  }
</style>
