<template>
  <!-- iframe组件 -->
  <div :style="getWrapStyle">
    <!-- <NodeHead :nodeName="label" class="ml-4" /> -->
    <Spin :spinning="loading" size="large" :style="getWrapStyle">
      <iframe v-if="iframeUrl" :src="iframeUrl" class="h-full w-full" @load="hideLoading"></iframe>
      <a-empty v-else :image="simpleImage" description="暂无页面" />
    </Spin>
  </div>
</template>
<script lang="ts" setup>
  import type { CSSProperties } from 'vue';
  import { ref, reactive, computed, watch, inject } from 'vue';
  import { Spin } from 'ant-design-vue';
  // import { NodeHead } from '/@/components/ModalPanel/index';
  import { propTypes } from '/@/utils/propTypes';
  import { Empty } from 'ant-design-vue';
  import { apiConfigFunc } from '/@/utils/event/design';
  import { getRequestData } from '/@/utils/event/pagetool';

  const props = defineProps({
    url: propTypes.string.def(''),
    list: {
      type: Array,
      default: () => {
        return [];
      },
    },
    width: String,
    height: String,
    label: String,
  });

  const simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
  const loading = ref(true);
  const widgetFormModel = inject('widgetFormModel', ref<any>({}));
  const iframeUrl = ref('');
  let preview = inject('preview') as boolean;
  const state = reactive({
    iframeList: [] as any[],
  });

  watch(
    () => props.url,
    (val) => {
      if (!val) loading.value = false;
      state.iframeList = props.list;
      changeListValue(val);
    },
    {
      immediate: true,
    },
  );
  const getWrapStyle = computed((): CSSProperties => {
    return {
      width: props.width,
      height: props.height,
      padding: preview ? 0 : '12px',
      background: '#fafafa',
    };
  });

  function hideLoading() {
    loading.value = false;
  }
  async function getFormAssignmentIframeUrl(url) {
    for (const item of state.iframeList) {
      let value = '';
      if (item.type === 'form') {
        value = getRequestData(item, widgetFormModel.value, false, 'from');
      } else if (item.type === 'api') {
        value = await apiConfigFunc(item.config, false, {});
      }
      if (url.includes(item.name)) {
        url = url.replace(item.name, value);
      }
    }

    return url;
  }
  async function changeListValue(val) {
    let url = await getFormAssignmentIframeUrl(val);
    iframeUrl.value = url;
  }
</script>
<style lang="less" scoped>
  :deep(.ant-spin-container) {
    height: 100%;
  }

  :deep(.ant-empty-normal) {
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>
