<!-- 散点图 -->
<template>
  <div ref="chartRef" class="scatter-chart" :style="{ height: props.height }"></div>
</template>

<script setup lang="ts">
  import type { EChartsOption } from 'echarts'
  import { getCssVar } from '@/utils/ui'
  import { useChart, useChartOps } from '@/composables/useChart'
  const {
    chartRef,
    initChart,
    isDark,
    getAxisLineStyle,
    getAxisLabelStyle,
    getAxisTickStyle,
    getSplitLineStyle
  } = useChart()

  interface Props {
    data?: { value: number[] }[]
    color?: string
    height?: string
    symbolSize?: number
  }

  const props = withDefaults(defineProps<Props>(), {
    data: () => [{ value: [0, 0] }, { value: [0, 0] }],
    color: '',
    height: useChartOps().chartHeight,
    symbolSize: 14
  })

  const options: () => EChartsOption = () => {
    const computedColor = props.color || getCssVar('--main-color')

    return {
      grid: {
        top: 10,
        right: 10,
        bottom: 0,
        left: 3,
        containLabel: true
      },
      tooltip: {
        trigger: 'item',
        formatter: function (params: any) {
          return `(${params.value[0]}, ${params.value[1]})`
        }
      },
      xAxis: {
        type: 'value',
        axisTick: getAxisTickStyle(),
        axisLabel: getAxisLabelStyle(),
        axisLine: getAxisLineStyle(),
        splitLine: getSplitLineStyle()
      },
      yAxis: {
        type: 'value',
        axisLabel: getAxisLabelStyle(),
        axisLine: getAxisLineStyle(),
        axisTick: getAxisTickStyle(),
        splitLine: getSplitLineStyle()
      },
      series: [
        {
          data: props.data,
          type: 'scatter',
          itemStyle: {
            color: computedColor
          },
          symbolSize: props.symbolSize
        }
      ]
    }
  }

  watch(isDark, () => {
    initChart(options())
  })

  onMounted(() => {
    initChart(options())
  })
</script>
