<template>
  <div class="box" :style="{ paddingTop: config.showTitle ? '40px' : 0 }">
    <div class="item-title" v-if="config.showTitle">{{ title }}</div>
    <div ref="chartRef" class="item">
      <div class="w-full h-full">
        <Spin :spinning="loading" size="large" class="w-full h-full">
          <iframe
            :src="iframeUrl"
            ref="frameRef"
            @load="hideLoading"
            class="w-full h-full"
          ></iframe>
        </Spin>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, watch } from 'vue';
  import { iframeProperties } from '../config/properties';
  import { DesktopComponent } from '/@/enums/desktop';
  import { IframeConfig } from '/@/model/desktop/designer';
  import { Spin } from 'ant-design-vue';
  import { apiConfigFunc } from '/@/utils/event/design';
  import { cloneDeep } from 'lodash-es';

  const props = withDefaults(
    defineProps<{
      type: DesktopComponent;
      w: number;
      h: number;
      title: string;
      config: IframeConfig;
    }>(),
    {
      type: DesktopComponent.MYIFRAME,
      w: 0,
      h: 0,
      config: () => {
        return iframeProperties;
      },
    },
  );
  const state = reactive({
    iframeList: [] as any[],
  });
  watch(
    () => props.config.url,
    () => {
      state.iframeList = props.config.list;
      changeListValue();
    },
  );
  watch(
    () => props.config.list,
    (val) => {
      state.iframeList = val;
      changeListValue();
    },
    {
      deep: true,
    },
  );
  const loading = ref(true);
  const iframeUrl = ref('');
  onMounted(() => {
    state.iframeList = props.config.list;
    if (props.config.url) changeListValue();
  });
  async function changeListValue() {
    let url = await getFormAssignmentIframeUrl(props.config.url);
    iframeUrl.value = url;
  }
  async function getFormAssignmentIframeUrl(url) {
    for (const list of state.iframeList) {
      let item = cloneDeep(list);
      let value = '';
      if (item.type === 'api') {
        item.config.apiParams = [
          { key: '1', title: 'Query Params', tableInfo: [] },
          { key: '2', title: 'Header', tableInfo: [] },
          { key: '3', title: 'Body', tableInfo: [] },
        ];
        if (item.config.requestParamsConfigs) {
          let temp: any = [];
          item.config.requestParamsConfigs.forEach((o) => {
            transferData(temp, o);
          });
          item.config.apiParams[0].tableInfo = temp;
        }
        if (item.config.requestHeaderConfigs) {
          let temp: any = [];
          item.config.requestHeaderConfigs.forEach((o) => {
            transferData(temp, o);
          });
          item.config.apiParams[1].tableInfo = temp;
        }
        if (item.config.requestBodyConfigs) {
          let temp: any = [];
          item.config.requestBodyConfigs.forEach((o) => {
            transferData(temp, o);
          });
          item.config.apiParams[2].tableInfo = temp;
        }
        value = await apiConfigFunc(item.config, false, {});
      }
      if (url.includes(item.name)) {
        url = url.replace(item.name, value);
      }
    }
    return url;
  }
  function hideLoading() {
    loading.value = false;
  }
  function transferData(temp, o) {
    if (o.assignmentType == 'value') {
      temp.push({
        bindType: 'value',
        dataType: o.dataType,
        name: o.name,
        type: null,
        value: o.value,
      });
    } else if (o.assignmentType == 'currentInfo') {
      temp.push({
        bindType: 'data',
        dataType: o.dataType,
        name: o.name,
        type: null,
        value: o.config,
      });
    }
  }
</script>

<style lang="less" scoped>
  .box {
    .item-title {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      line-height: 40px;
      color: #262626;
      font-size: 14px;
      padding-left: 16px;
    }

    .item-title::after {
      content: '';
      display: block;
      position: absolute;
      height: 1px;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #f0f0f0;
    }

    .item {
      width: 100%;
      height: 100%;

      :deep(.ant-spin-container) {
        height: 100%;
      }
    }
  }
</style>
