<template>
  <div
    class="chart-item"
    v-for="(item, index) in localStorageInfo.componentList"
    :class="animationsClass(item.styles.animations)"
    :key="item.id"
    :style="{
      ...getComponentAttrStyle(item.attr, index),
      ...getFilterStyle(item.styles),
      ...getTransformStyle(item.styles),
      ...getStatusStyle(item.status),
      ...getBlendModeStyle(item.styles)
    }"
  >
    <!-- 分组 -->
    <preview-render-group
      v-if="item.isGroup"
      :groupData="item"
      :groupIndex="index"
      :themeSetting="themeSetting"
      :themeColor="themeColor"
    ></preview-render-group>

    <!-- 单组件 -->
    <component
      v-else
      :is="item.chartConfig.chartKey"
      :id="item.id"
      :chartConfig="item"
      :themeSetting="themeSetting"
      :themeColor="themeColor"
      :style="{ ...getSizeStyle(item.attr) }"
      v-on="useLifeHandler(item)"
    ></component>
  </div>
</template>

<script setup name="PreviewRenderList">
import { computed, onMounted } from 'vue';
import { useChartDataPondFetch } from './hooks/useStore.hook';
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '../utils/chart-util';
import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from './utils/style';
import { useLifeHandler } from './hooks/useLifeHandler.hook';
import PreviewRenderGroup from './preview-render-group.vue';

// 初始化数据池
const { initDataPond } = useChartDataPondFetch();

const props = defineProps({
  localStorageInfo: {
    type: Object,
    required: true
  }
});

// 主题色
const themeSetting = computed(() => {
  const chartThemeSetting = props.localStorageInfo.editCanvasConfig.chartThemeSetting;
  return chartThemeSetting;
});

// 配置项
const themeColor = computed(() => {
  const chartThemeColor = props.localStorageInfo.editCanvasConfig.chartThemeColor;
  return {};
});

// 组件渲染结束初始化数据池
onMounted(() => {
  initDataPond(props.localStorageInfo.requestGlobalConfig);
});
</script>

<style lang="less" scoped>
.chart-item {
  position: absolute;
}
</style>
