<script lang="ts" setup>
import { useEcharts } from '@/components/echarts/index.ts'
import type { EChartsType } from 'echarts/core'

const props = withDefaults(defineProps<{
  reflush?: boolean
  option: Echarts.Option
}>(), {
  reflush: true
})

const container = ref<HTMLElement | null>(null)
let ins: EChartsType | null = null

onMounted(() => {
  if (props.reflush) {
    watch(
        () => props.option,
        (newVal, _) => {
          ins?.setOption(newVal)
        },
        {deep: true})
  }

  ins = useEcharts(container.value!)
  ins.setOption(props.option)
})

onBeforeUnmount(() => {
  ins?.dispose()
})

defineExpose({
  getIns() {
    return ins!
  }
})
</script>

<template>
  <div ref="container"></div>
</template>

