<template>
  <div class="layout-view-bg-white flex mt1" :style="{ height: `calc(100vh - ${setIframeHeight}`, border: 'none' }" v-loading="iframeLoading">
    <div class="jump" @click="jump">
      <img src="/@/assets/open.svg">
    </div>
    <iframe allowfullscreen="true" v-if="show" :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" @load="iframeLoading = false"></iframe>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, nextTick, watch, computed } from 'vue';
import { useRoute } from 'vue-router';
import { useStore } from '/@/store/index';
export default defineComponent({
  name: 'layoutIfameView',
  setup() {
    const route = useRoute();
    const store = useStore();
    const state = reactive({
      iframeLoading: true,
      show: true,
      iframeUrl: route.meta?.linkUrl as string,
    });
    // 跳转到新页面
    const jump = () => {
      window.open(state.iframeUrl);
    };
    // 初始化页面加载 loading
    const initIframeLoad = () => { };
    // 设置 iframe 的高度
    const setIframeHeight = computed(() => {
      let { isTagsview } = store.state.themeConfig.themeConfig;
      let { isTagsViewCurrenFull } = store.state.tagsViewRoutes;
      if (isTagsViewCurrenFull) {
        return `1px`;
      } else {
        if (isTagsview) return `86px`;
        else return `52px`;
      }
    });
    // 页面加载时
    onMounted(() => {
      initIframeLoad();
    });
    // 监听路由变化，多个 iframe 时使用
    watch(
      () => route.path,
      () => {
        initIframeLoad();
      }
    );

    // 监听 vuex 中是否开启深色主题
    watch(
      () => store.state.themeConfig.themeConfig.isIsDark,
      (isIsDark) => {
        state.iframeLoading = true
        state.show = false
        nextTick(() => {
          state.show = true
        })
        if (!state.iframeUrl.includes('?')) {
          return state.iframeUrl += '?theme=' + (isIsDark ? 'dark' : 'light');
        }
        if (state.iframeUrl.includes('theme=dark')) {
          return state.iframeUrl = state.iframeUrl.replace('theme=dark', 'theme=light')
        }
        if (state.iframeUrl.includes('theme=light')) {
          return state.iframeUrl = state.iframeUrl.replace('theme=light', 'theme=dark')
        }
      },
      {
        deep: true,
        immediate: true,
      }
    );
    return {
      jump,
      setIframeHeight,
      ...toRefs(state),
    };
  },
});
</script>
<style scoped lang="scss">
.jump {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  cursor: pointer;

  img {
    width: 16px;
    height: 16px;
    display: block;
  }
}
</style>