<template>
  <div class="go-chart-configurations-setting" v-if="targetData">
    <!-- 名称 -->
    <name-setting :chartConfig="targetData.chartConfig"></name-setting>
    <!-- 尺寸 -->
    <size-setting :isGroup="targetData.isGroup" :chartAttr="targetData.attr"></size-setting>
    <!-- 位置 -->
    <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig" />
    <!-- 滤镜 -->
    <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
    <!-- 自定义配置项 -->
    <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
  </div>
</template>

<script setup lang="ts">
import { NameSetting, PositionSetting, SizeSetting, StylesSetting } from '@/components/Pages/ChartItemSetting'
import { useTargetData } from '../hooks/useTargetData.hook'
import { watch } from 'vue'
import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'

const { targetData, chartEditStore } = useTargetData()

watch(
  () => targetData.value,
  (newValue: CreateComponentType | CreateComponentGroupType) => {
    if (!newValue) return
    if (!('yAxis' in newValue.option)) return
    try {
      if (!newValue?.option?.yAxis?.showRange) {
        Reflect.deleteProperty((targetData.value as unknown as Recordable).option.yAxis, 'min')
        Reflect.deleteProperty((targetData.value as unknown as Recordable).option.yAxis, 'max')
      } else {
        Reflect.set((targetData.value as unknown as Recordable).option.yAxis, 'min', newValue?.option?.yAxis.minData)
        Reflect.set((targetData.value as unknown as Recordable).option.yAxis, 'max', newValue?.option?.yAxis.maxData)
      }
    } catch (e) {
      console.log('🚀 ~ e:', e)
    }
  },
  {
    deep: true
  }
)
</script>

<style lang="scss" scoped>
@include go('chart-configurations-setting') {
}
</style>