// TODO: 二次封裝 ECharts 實(shí)例
import * as echarts from 'echarts/core'

// 引入使用的圖表
import {
  BarChart,
  LineChart,
  PieChart
} from 'echarts/charts'

// 系列組件
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  VisualMapComponent,
  GeoComponent
} from 'echarts/components'

// 功能增強(qiáng)模塊
import {
  LabelLayout,
  UniversalTransition
} from 'echarts/features'

// 渲染器
import { CanvasRenderer } from 'echarts/renderers'

// 注冊(cè)所有必須組件
echarts.use([
  // 圖表
  BarChart,
  LineChart,
  PieChart,
  // 組件
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  VisualMapComponent,
  GeoComponent,
  // 功能
  LabelLayout,
  UniversalTransition,
  // 渲染
  CanvasRenderer
])

// 導(dǎo)出類型
export * from '../../types'   // 這里指向你自己的全局類型文件，也可以直接導(dǎo)出 echarts 自帶類型

// 導(dǎo)出手動(dòng)封裝后的 echarts
export { echarts }

export type { ECharts, EChartsOption } from 'echarts'

/**
 * 從 echarts/core 導(dǎo)入 ComposeOption 和 ECharts 類型
 * ComposeOption 是 ECharts 提供的類型組合工具，用于創(chuàng)建包含多種組件和圖表類型的配置選項(xiàng)類型
 * ECharts 是 ECharts 實(shí)例的類型
 */
import type { ComposeOption } from 'echarts/core'

/**
 * 從 echarts/charts 導(dǎo)入圖表系列類型
 */
import type {
  BarSeriesOption,
  LineSeriesOption,
  PieSeriesOption
} from 'echarts/charts'

/**
 * 從 echarts/components 導(dǎo)入組件配置類型
 */
import type {
  TitleComponentOption,
  TooltipComponentOption,
  LegendComponentOption,
  GridComponentOption,
  VisualMapComponentOption,
  GeoComponentOption
} from 'echarts/components'

/**
 * 導(dǎo)出具體的圖表類型，方便在需要時(shí)單獨(dú)使用
 */
export type { ECharts } from 'echarts/core'
export type {
  BarSeriesOption,
  LineSeriesOption,
  PieSeriesOption
} from 'echarts/charts'

/**
 * 統(tǒng)一的 EChartsOption 類型
 * 使用 ComposeOption 組合所有需要的類型，創(chuàng)建一個(gè)完整的配置選項(xiàng)類型
 * 這樣可以獲得更好的類型提示和類型檢查
 */
export type EChartsOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | PieSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | LegendComponentOption
  | GridComponentOption
  | VisualMapComponentOption
  | GeoComponentOption
>

import { ref, watch, onMounted, onUnmounted, unref, type Ref } from 'vue'
import { echarts } from '@/utils/echarts'
import type { EChartsOption, ECharts } from '@/utils/echarts'

/**
 * ECharts 圖表 Hook
 * 自動(dòng)初始化、響應(yīng)式更新配置、自動(dòng)銷毀、窗口自適應(yīng)
 *
 * @param elRef - 圖表掛載的 DOM 引用（可以是 Ref 或原生 DOM 元素）
 * @param option - 圖表配置項(xiàng)
 * @param autoResize - 是否自動(dòng)跟隨窗口大小變化，默認(rèn) true
 * @returns { chart, updateOption }
 */
export const useECharts = (
  elRef: Ref<HTMLElement | null> | HTMLElement | null | undefined,
  option: EChartsOption,
  autoResize = true
) => {
  const chart = ref<ECharts | null>(null)

  // 初始化圖表
  const initChart = () => {
    const dom = unref(elRef)
    if (!dom) return
    chart.value = echarts.init(dom)
    chart.value.setOption(option)
  }

  // 更新配置
  const updateOption = (newOption: EChartsOption) => {
    chart.value?.setOption(newOption)
  }

  // 監(jiān)聽配置變化
  watch(
    () => option,
    () => updateOption(option),
    { deep: true }
  )

  // 監(jiān)聽 DOM 元素變化
  let resizeObserver: ResizeObserver | null = null
  const resize = () => chart.value?.resize()

  watch(
    () => unref(elRef),
    (newEl) => {
      if (newEl) {
        initChart()
        if (autoResize) {
          resizeObserver?.disconnect()
          resizeObserver = new ResizeObserver(resize)
          resizeObserver.observe(newEl)
        }
      }
    },
    { immediate: true }
  )

  // 組件掛載
  onMounted(() => {
    initChart()
    if (autoResize) {
      window.addEventListener('resize', resize)
      const dom = unref(elRef)
      if (dom) {
        resizeObserver = new ResizeObserver(resize)
        resizeObserver.observe(dom)
      }
    }
  })

  // 組件卸載
  onUnmounted(() => {
    if (autoResize) {
      window.removeEventListener('resize', resize)
      resizeObserver?.disconnect()
    }
    chart.value?.dispose()
    chart.value = null
  })

  return {
    chart: chart.value,
    updateOption,
  }
}

<template>
  <div ref="chartRef" style="width: 100%; height: 400px" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useECharts } from '@/hooks/useECharts'
import type { EChartsOption } from '@/utils/echarts'

const chartRef = ref<HTMLElement>()

const option: EChartsOption = {
  title: { text: '月度銷售趨勢(shì)' },
  tooltip: {},
  xAxis: { type: 'category', data: ['1月', '2月', '3月', '4月'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [120, 200, 150, 80] }]
}

const { chart, updateOption } = useECharts(chartRef, option, true)

// 模擬動(dòng)態(tài)更新數(shù)據(jù)
setTimeout(() => {
  updateOption({
    series: [{ type: 'line', data: [300, 400, 250, 100] }]
  })
}, 3000)
</script>

<script setup>
import { ref } from 'vue'

const chartData = ref([120, 200, 150])
const option = computed(() => ({
  xAxis: { data: ['A', 'B', 'C'] },
  series: [{ type: 'bar', data: chartData.value }]
}))

const { chart } = useECharts(chartRef, option.value)
// 現(xiàn)在當(dāng) chartData 變化時(shí)，option 會(huì)重新計(jì)算，并觸發(fā) watch 自動(dòng)調(diào)用 updateOption
</script>

// 增加事件監(jiān)聽
const on = (event: string, handler: any) => chart.value?.on(event, handler)
// 增加 loading
const showLoading = () => chart.value?.showLoading()
const hideLoading = () => chart.value?.hideLoading()