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

<script setup>
import * as echarts from 'echarts'
import { formatNumberWithUnit } from '@/utils'
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)
const myThousand = ref(false) // 是否显示万单位

const setOptions = () => {
  // 计算 y 轴显示
  const yAxis = [
    {
      type: 'value',
      name: '销售额',
      nameTextStyle: {
        padding: [0, 60, 0, 0]
      },
      axisLabel: {
        formatter(value) {
          return formatNumberWithUnit(value, '元', myThousand.value, true)
        }
      },
      axisPointer: {
        label: {
          formatter: (params) => {
            return formatNumberWithUnit(params.value, '元', myThousand.value, true)
          }
        }
      }
    },
    {
      type: 'value',
      name: '观看人次',
      nameTextStyle: {
        padding: [0, 0, 0, 60]
      },
      axisLabel: {
        formatter(value) {
          return formatNumberWithUnit(value, '人', myThousand.value, true)
        }
      },
      axisPointer: {
        label: {
          formatter: (params) => {
            return formatNumberWithUnit(params.value, '人', myThousand.value, true)
          }
        }
      }
    }
  ]
  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: '9%',
      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.value = !myThousand.value
            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;border-radius:10px;width:9px;height:9px;background-color:' + color + ';"></span>' + item.seriesName + ': ' + formatNumberWithUnit(item.value, '元', myThousand.value) + '<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(item.value, '人', myThousand.value) + '<br>';
          }
        });
        return tooltip;
      }
      // padding: [5, 10],
      // formatter: (params) => {
      //   let tooltip = '';
      //   params.forEach((item) => {
      //     if (item.seriesName.split('-')[1] === '销售额') {
      //       tooltip += item.marker + item.seriesName + ': ' + (this.myThousand ? convertToUnit(item.value, true) : toFixed2(item.value) + '元') + '<br>';
      //     } else if (item.seriesName.split('-')[1] === '观看人次') {
      //       tooltip += item.marker + item.seriesName + ': ' + toFixed2(item.value) + (this.myThousand ? '万' : '') + '人<br>';
      //     }
      //   });
      //   console.log(tooltip)
      //   return tooltip;
      // }
    },
    yAxis,
    series: props.chartData.series
  }, true)
}

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

const initChart = () => {
  chart.value = echarts.init(echartsRef.value)
  setOptions()
}

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