<template>
  <div
    :class="animationsClass(groupData.styles.animations)"
    :style="{
      ...getSizeStyle(groupData.attr),
      ...getFilterStyle(groupData.styles)
    }"
  >
    <div
      class="chart-item"
      v-for="item in groupData.groupList"
      :class="animationsClass(item.styles.animations)"
      :key="item.id"
      :style="{
        ...getComponentAttrStyle(item.attr, groupIndex),
        ...getStatusStyle(item.status),
        ...getPreviewConfigStyle(item.preview),
        ...getBlendModeStyle(item.styles)
      }"
    >
      <component
        :is="item.chartConfig.chartKey"
        :id="item.id"
        :chartConfig="item"
        :themeSetting="themeSetting"
        :themeColor="themeColor"
        :style="{
          ...getSizeStyle(item.attr),
          ...getFilterStyle(item.styles),
          ...getTransformStyle(item.styles)
        }"
        v-on="useLifeHandler(item)"
      ></component>
    </div>
  </div>
</template>

<script setup>
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '../utils/chart-util';
import { getSizeStyle, getComponentAttrStyle, getStatusStyle, getPreviewConfigStyle } from './utils/style';
import { useLifeHandler } from './hooks/useLifeHandler.hook';

const props = defineProps({
  groupData: {
    type: Object,
    required: true
  },
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  groupIndex: {
    type: Number,
    required: true
  }
});
</script>

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