<template>
  <PageWrapper dense :contentStyle="{ height: '100%' }" class="h-full">
    <div :class="`${prefixCls}__frame-box`" :style="{ height: loading ? '0' : '100%' }">
      <iframe
        :src="frameSrc"
        :class="`${prefixCls}__main`"
        ref="frameRef"
        @load="hideLoading"
      ></iframe>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  // import type { CSSProperties } from 'vue';
  import { ref } from 'vue';
  import { PageWrapper } from '/@/components/Page';
  // import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
  import { propTypes } from '/@/utils/propTypes';
  import { useDesign } from '/@/hooks/web/useDesign';
  // import { useLayoutHeight } from '/@/layouts/default/content/useContentViewHeight';

  defineProps({
    frameSrc: propTypes.string.def(''),
  });

  const loading = ref(true);
  //const topRef = ref(180);
  // const heightRef = ref(window.innerHeight);
  const frameRef = ref<HTMLFrameElement>();
  //const { headerHeightRef } = useLayoutHeight();

  const { prefixCls } = useDesign('iframe-page');
  // useWindowSizeFn(calcHeight, 150, { immediate: true });

  // const getWrapStyle = computed((): CSSProperties => {
  //   return {
  //     height: `${unref(heightRef)}px`,
  //   };
  // });

  // function calcHeight() {
  //   const iframe = unref(frameRef);
  //   if (!iframe) {
  //     return;
  //   }
  //   const top = headerHeightRef.value;
  //   topRef.value = top;
  //   heightRef.value = window.innerHeight - top;
  //   const clientHeight = document.documentElement.clientHeight - top;
  //   console.log(document.documentElement.clientHeight, top);
  //   iframe.style.height = `${clientHeight}px`;
  // }

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

  .@{prefix-cls} {
    background: #fff;
    margin-top: 10px;
    padding: 10px;
    border-radius: 16px;

    .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;
    }

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