import * as echarts from 'echarts'
import { nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

export function useEchart(optionRef) {
  const elRef = ref(null)
  let chart = null

  const render = async () => {
    await nextTick()
    if (!elRef.value) {
      return
    }
    if (!chart) {
      chart = echarts.init(elRef.value)
    }
    chart.setOption(optionRef.value || {}, true)
  }

  const resize = () => {
    if (chart) {
      chart.resize()
    }
  }

  onMounted(() => {
    render()
    window.addEventListener('resize', resize)
  })

  watch(optionRef, render, { deep: true })

  onUnmounted(() => {
    window.removeEventListener('resize', resize)
    if (chart) {
      chart.dispose()
      chart = null
    }
  })

  return {
    elRef,
    resize,
    render
  }
}