<template>
  <div class="go-energy-box">
    <div class="content">
      <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :update-options="{
        replaceMerge: replaceMergeArr
      }" autoresize>
      </v-chart>
    </div>
  </div>

</template>

<script setup lang="ts">
import { PropType, computed, onMounted, onUnmounted, ref } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import * as echarts from 'echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import { TitleComponent, GridComponent } from 'echarts/components'
import config, { includes, createCubeShapes, createRenderItemFunction } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
const props = defineProps({
  themeSetting: {
    type: Object,
    required: true
  },
  themeColor: {
    type: Object,
    required: true
  },
  chartConfig: {
    type: Object as PropType<config>,
    required: true
  }
})
const { CubeLeft, CubeRight, CubeTop } = createCubeShapes();
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)

use([
  CanvasRenderer,
  BarChart,
  TitleComponent,
  GridComponent
])

const replaceMergeArr = ref<string[]>([])

const option = computed(() => {
  const mergedOption = mergeTheme(props.chartConfig.option, props.themeSetting, includes)

  // 重新设置 renderItem 函数
  if (mergedOption.series && mergedOption.series[1] && mergedOption.series[1].type === 'custom') {
    const { wid, w1, w2, snapHeight } = props.chartConfig.option;
    mergedOption.series[1].renderItem = createRenderItemFunction(wid, w1, w2, snapHeight)
  }

  return mergedOption
})


const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
  props.chartConfig.option.dataset = newData
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
onMounted(async () => {

})

</script>

<style lang="scss" scoped>
@include go('energy-box') {
  width: 100%;
  height: 100%;

  .content {
    width: 100%;
    height: 100%;
  }
}
</style>