<template>
  <div ref="echartsRef"
    :class="className"
    :style="{ height: height, width: width }" />
</template>

<script setup>
import * as echarts from 'echarts'
import { formatNumberWithUnit } from '@/utils'
import { useWindowResize } from '@/hooks'

const props = defineProps({
  className: {
    type: String,
    default: 'chart'
  },
  width: {
    type: String,
    default: '100%'
  },
  height: {
    type: String,
    default: '600px'
  },
  autoResize: {
    type: Boolean,
    default: true
  },
  chartData: {
    type: Object,
    required: true
  }
})
const echartsRef = ref(null)
const chart = shallowRef(null)
let myThousand = false // 是否显示万单位
let isArea = ref(true) // 是否面积图

const emits = defineEmits(['changeType'])

const setOptions = () => {
  // 面积图是否切换
  const seriesResult = props.chartData.series.map(o => {
    if (!isArea.value) {
      const obj = { ...o }
      delete obj.areaStyle
      delete obj.lineStyle
      return obj
    } else {
      return o
    }
  })

  chart.value.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      },
      formatter: function (params) {
        let tooltip = '';
        params.forEach((item) => {
          // 获取系列颜色
          var color = item.color;
          // 拼接提示内容
          if (item.seriesName.split('-')[1].includes('速')) {
            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
              value: item.value,
              carry: false,
              round: false,
              pos: false,
              des: '%'
            }) + '<br>';
          } else {
            tooltip += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ':' + formatNumberWithUnit({
              value: item.value,
              des: '人'
            }) + '<br>';
          }
        });
        return tooltip;
      }
    },
    // legend: {
    //   data: props.chartData.legend
    // },
    toolbox: {
      feature: {
        saveAsImage: {},
        magicType: {
          type: ['stack', 'tiled'] // 切换图表类型
        },
        myTool2: {
          show: true,
          title: '面积/折线图',
          icon: 'path://M5,5 L5,30 L15,30 L25,20 L35,30 L45,30 L45,5 Z',
          onclick: () => {
            isArea.value = !isArea.value
          }
        },
        myTool1: {
          show: true,
          title: '切换表格',
          icon: 'path://M5,5 L5,15 L15,15 L15,5 Z M20,5 L20,15 L30,15 L30,5 Z M5,20 L5,30 L15,30 L15,20 Z M20,20 L20,30 L30,30 L30,20 Z',
          onclick: () => {
            emits('changeType', 'table')
          }
        }
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        // type: 'category',
        // boundaryGap: false,
        data: props.chartData.xAxis
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: seriesResult
  }, true)
}

watchEffect(() => {
  if (!chart.value) return
  myThousand = props.chartData.series?.some(o => {
    return o.data.some(num => num >= 10000)
  })
  setOptions()
})



onMounted(() => {
  nextTick(() => {
    chart.value = echarts.init(echartsRef.value, null, {
      width: document.querySelector('.el-tabs__content').offsetWidth + 'px',
      height: props.height
    })
  })
})

const resize = () => {
  chart.value.resize({
    width: document.querySelector('.el-tabs__content').offsetWidth + 'px',
    height: props.height
  })
}

const injectMessage = inject('activeName')
watch(injectMessage, resize)
useWindowResize(resize)

onBeforeUnmount(() => {
  if (!chart.value) {
    return
  }
  chart.value.dispose()
  chart.value = null
})
</script>