<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'
  },
  chartData: {
    type: Object,
    required: true
  }
})

const echartsRef = ref(null)
const chart = shallowRef(null)
let myThousand = false // 是否显示万单位

const setOptions = () => {
  // 计算 y 轴显示
  const yAxis = [
    {
      type: 'value',
      name: '销售额',
      nameTextStyle: {
        padding: [0, 60, 0, 0]
      },
      axisLabel: {
        formatter(value) {
          return formatNumberWithUnit({
            value,
            des: '元',
            carry: myThousand
          })
        }
      },
      axisPointer: {
        label: {
          formatter: (params) => {
            return formatNumberWithUnit({
              value: params.value,
              des: '元',
              carry: myThousand
            })
          }
        }
      }
    },
    {
      type: 'value',
      name: '观看人次',
      nameTextStyle: {
        padding: [0, 0, 0, 60]
      },
      axisLabel: {
        formatter(value) {
          return formatNumberWithUnit({
            value,
            des: '人',
            carry: myThousand
          })
        }
      },
      axisPointer: {
        label: {
          formatter: (params) => {
            return formatNumberWithUnit({
              value: params.value,
              des: '人',
              carry: myThousand
            })
          }
        }
      }
    }
  ]
  // 根据图例是否显示，设置 y 轴名字的值
  yAxis.filter(yObj => {
    return props.chartData.legend.some(o => {
      const target = o.data.find(o => {
        return o.name.split('-')[1] === yObj.name
      })
      if (!target?.show) yObj.name = ''
      else yObj.name = target.name.split('-')[1]
    })
  })
  // 设置图表选项
  chart.value.setOption({
    xAxis: {
      type: 'category',
      data: props.chartData.xAxis,
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '12%',
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}, // 保存为图片
        magicType: {
          type: ['tiled'] // 切换图表类型
        },
        myThousandTool: {
          show: true,
          title: '切换万单位',
          icon: 'path://M50,50 L100,50 L100,100 L150,100 L150,150 L100,150 L100,200 L50,200 L50,150 L0,150 L0,100 L50,100 Z',
          onclick: () => {
            myThousand = !myThousand
            setOptions()
          }
        }
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      },
      formatter: function (params) {
        let tooltip = '';
        params.forEach((item) => {
          // 获取系列颜色
          var color = item.color;
          // 拼接提示内容
          if (item.seriesName.split('-')[1] === '销售额') {
            tooltip += '<span style="display:inline-block;margin-right:5px;width:12px;height:6px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit({
              value: item.value,
              des: '元',
              carry: myThousand
            }) + '<br>';
          } else if (item.seriesName.split('-')[1] === '观看人次') {
            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: '人',
              carry: myThousand
            }) + '<br>';
          }
        });
        return tooltip;
      }
    },
    yAxis,
    series: props.chartData.series
  }, 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>
