<template>
    222222222222222222
    <chart
        ref="ChartRef"
        :class="animationsClass(chartConfig?.styles?.animations)"
        :option="option"
        :init-options="initOptions"
        :chart-config="chartConfig"
        autoresize
        :theme="themeColor"
        style="height: 500px"
    ></chart>
</template>

<script setup lang="ts" name="BarCommon">
import { computed, watch, ref, nextTick } from 'vue'
import { animationsClass, getFilterStyle, getBlendModeStyle, getTransformStyle } from '@packages/utils'
import Chart from '@packages/components/_common/Charts'
import { useCanvasInitOptions } from '@packages/hooks/useCanvasInitOptions.hook'
import { mergeTheme } from '@packages/public/chart'
import cloneDeep from 'lodash/cloneDeep'
import isObject from 'lodash/isObject'
import { includes, seriesItem } from './config'

import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
use([DatasetComponent, BarChart, GridComponent, TooltipComponent, LegendComponent])

const props = defineProps({
    themeSetting: {
        type: Object,
        required: true
    },
    themeColor: {
        type: Object,
        required: true
    },
    chartConfig: {
        type: Object,
        required: true
    }
})

const replaceMergeArr = ref<string[]>()

const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

const option = computed(() => {
    console.log('========props.chartConfig=======', JSON.stringify(props.chartConfig))
    return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
})

// dataset 无法变更条数的补丁
watch(
    () => props.chartConfig.option.dataset,
    (newData: { dimensions: any }, oldData) => {
        try {
            if (!isObject(newData) || !('dimensions' in newData)) return
            if (Array.isArray(newData?.dimensions)) {
                const seriesArr = []
                // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
                // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
                const oldDimensions =
                    Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
                const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
                const dimensionsGap = newDimensions - oldDimensions
                if (dimensionsGap < 0) {
                    // eslint-disable-next-line vue/no-mutating-props
                    props?.chartConfig?.option?.series?.splice(newDimensions - 1)
                } else if (dimensionsGap > 0) {
                    if (
                        !oldData ||
                        !oldData?.dimensions ||
                        !Array.isArray(oldData?.dimensions) ||
                        !oldData?.dimensions.length
                    ) {
                        props.chartConfig.option.series = []
                    }
                    for (let i = 0; i < dimensionsGap; i++) {
                        seriesArr.push(cloneDeep(seriesItem))
                    }
                    props.chartConfig.option.series.push(...seriesArr)
                }
                replaceMergeArr.value = ['series']
                nextTick(() => {
                    replaceMergeArr.value = []
                })
            }
        } catch (error) {
            console.log(error)
        }
    },
    {
        deep: false
    }
)
</script>

<style lang="scss"></style>
