<template>
  <div class="echarts-box" v-resize="resize">
    <div ref="chartRef" :class="className" :style="{ height: height, width: width }" />
  </div>
</template>

<script setup lang="ts">
import { ECOption, EChartsType } from '@/types/echarts'
import useSettingsStore from '@/store/modules/settings'

const settingsStore = useSettingsStore()
const echarts = inject<any>('echarts')
const chartRef = ref(null)
export interface lineChartData {
  xAxisData?: string[]
  yAxis: yAxis[]
}
interface yAxis {
  yAxisName: string
  yAxisData: number[]
  yAxisSeries: {
    smooth?: boolean
    itemStyle?: {
      color: string
      width?: number
    }
    lineStyle?: {
      color: string
      width?: number
    }
    animationDuration?: number
    animationEasing: string
  }
}
interface Props {
  className?: string
  width?: string
  height?: string
  autoResize?: boolean
  chartData: lineChartData
}
const props = withDefaults(defineProps<Props>(), {
  className: 'chart',
  width: '100%',
  height: '350px',
  autoResize: true
})
watch(
  () => props.chartData,
  (val) => {
    setOptions(val)
  },
  { deep: true }
)
let chart: EChartsType | null = null

const setOptions = (data: lineChartData) => {
  const xAxisData = data.xAxisData
  const legendData = data.yAxis.map((item) => item.yAxisName)
  const seriesData: any = data.yAxis.map((item) => {
    return {
      name: item.yAxisName,
      // itemStyle: item.yAxisSeries.itemStyle ?? undefined,
      // lineStyle: item.yAxisSeries.lineStyle ?? undefined,
      smooth: item.yAxisSeries.smooth ?? true,
      type: 'line',
      data: item.yAxisData,
      animationDuration: item.yAxisSeries.animationDuration ?? 2800,
      animationEasing: item.yAxisSeries.animationEasing
    }
  })
  const options: ECOption = {
    xAxis: {
      data: xAxisData,
      boundaryGap: false
    },
    grid: {
      left: 10,
      right: 30,
      bottom: 10,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    toolbox: {
      feature: {
        saveAsImage: {
          title: '保存'
        }
      }
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {
      data: legendData
    },
    series: seriesData
  }
  chart!.setOption(options)
  //在页面初始化加载的时候绑定页面resize事件监听。补充resize事件：resize事件是在浏览器窗口大小改变时，会触发。
  //如当用户调整窗口大小，或者最大化、最小化、恢复窗口大小显示时触发 resize 事件。
  //我们一般使用这个事件去做窗口大小与对应元素的大小适配
  // window.addEventListener('resize', () => {
  //   chart!.resize()
  // })
}
const initChart = () => {
  nextTick(() => {
    if (chart !== null && chart !== undefined) {
      chart!.dispose()
    }
    if (settingsStore.colorMode === 'dark') {
      chart = echarts.init(chartRef.value, 'chalk')
    } else {
      chart = echarts.init(chartRef.value, 'macarons')
    }
    setOptions(props.chartData)
  })
}
onMounted(() => {
  initChart()
})
const resizeHandler = () => {
  chart!.resize()
}
const resize = () => {
  resizeHandler()
}

onBeforeUnmount(() => {
  /* 页面组件销毁的时候，别忘了移除绑定的监听resize事件，否则的话，多渲染几次
      容易导致内存泄漏和额外CPU或GPU占用哦*/
  // window.removeEventListener('resize', () => {
  //   chart!.resize()
  // })
  chart!.dispose()
})
watch(
  () => settingsStore.colorMode,
  (val) => {
    initChart()
  },
  {
    immediate: true,
    deep: true
  }
)
</script>
<style lang="scss" scoped>
.echarts-box {
  width: 100%;
  height: 100%;
}
</style>
