<script lang="ts" setup>
  import { computed } from 'vue';
  import { WidgetDataType } from '../../hooks/useDataSource';
  import { fetchViewComponent } from '../../../packages';
  import { ComponentMode, ConfigType } from '/@/views/visual/packages/index.type';
  import { ExtraDataSource } from '../../types';
  import { CSSProperties } from 'vue';
  import { toRaw } from 'vue';
  import { Spin } from 'ant-design-vue';
  import { componentMap, transformComponentKey } from '../../../packages/componentMap';
  import { onMounted } from 'vue';
  import { registerComponent } from '../../../packages/componentMap';
  import { useGetComponentConfig } from '../../../packages/hook/useGetComponetConfig';
  import { unref } from 'vue';
  import { isBoolean } from '/@/utils/is';

  const props = defineProps<{
    sourceInfo: WidgetDataType;
  }>();

  const getLayout = computed(() => {
    const { itemWidthRatio, itemHeightRatio } = props.sourceInfo || {};
    return { width: `${itemWidthRatio}%`, height: `${itemHeightRatio}%` } as CSSProperties;
  });

  const getCanRenderFlag = computed(() => {
    const { itemHeightRatio, itemWidthRatio } = props.sourceInfo;
    return [itemHeightRatio, itemWidthRatio].every(Boolean);
  });

  const getComponentConfig = computed(() => {
    const { widthPx, heightPx, itemWidthRatio, itemHeightRatio, frontId } = props.sourceInfo;

    return useGetComponentConfig(frontId, {
      widthPx,
      heightPx,
      itemWidthRatio,
      itemHeightRatio,
      mode: ComponentMode.BOUND_PREVIEW,
    });
  });

  const getBindValue = computed(() => {
    return (options: ExtraDataSource) => {
      const raw = toRaw(options);
      const config = unref(getComponentConfig);
      return {
        config: {
          ...config,
          option: { ...config.option, ...raw },
        },
      };
    };
  });

  const getIsMultipleDataSourceComponent = computed(() => {
    const { persetOption } = unref(getComponentConfig);
    const { multipleDataSourceComponent } = persetOption || {};
    return isBoolean(multipleDataSourceComponent) ? multipleDataSourceComponent : false;
  });

  const getBindMultipleDataSourceValue = computed(() => {
    const config = unref(getComponentConfig);
    const { dataSource } = props.sourceInfo;
    return {
      config: {
        ...config,
        option: { ...config.option, dataSource: toRaw(dataSource) },
      },
    };
  });

  onMounted(() => {
    const key = transformComponentKey(props.sourceInfo.frontId);
    const component = fetchViewComponent({ key } as ConfigType);
    registerComponent(key, component);
  });
</script>

<template>
  <Spin :spinning="!getCanRenderFlag" wrapperClassName="widget-distribute-spin">
    <!-- 多数据源组件 -->
    <template v-if="getCanRenderFlag">
      <template v-if="getIsMultipleDataSourceComponent">
        <component
          :is="componentMap.get(transformComponentKey(props.sourceInfo.frontId))"
          class="w-full h-full"
          v-bind="getBindMultipleDataSourceValue"
        />
      </template>

      <!-- 单一数据源组件 -->
      <template v-if="!getIsMultipleDataSourceComponent">
        <component
          v-for="item in props.sourceInfo.dataSource"
          :key="item.uuid"
          :is="componentMap.get(transformComponentKey(props.sourceInfo.frontId))"
          :style="getLayout"
          v-bind="getBindValue(item)"
        />
      </template>
    </template>
  </Spin>
</template>

<style lang="less" scoped>
  .widget-distribute-spin {
    @apply w-full h-full overflow-hidden;

    :deep(.ant-spin-container) {
      @apply w-full h-full flex flex-wrap;
    }
  }
</style>