<template>
  <div class="echarts-container">
    <div class="main" ref="main"></div>
  </div>
</template>

<script setup>
import { hexToRgb } from '@U/theme.js'
const props = defineProps({
  color: {
    type: Array,
    default: () => ['#18FEFE', '#008AFF', '#FFDE4D', '#06F7A1']
  },
  xAxisData: {
    type: Array,
    default: () => ['1das', 'zxc2', '3cx', '4v', '5b', '6n', '7m']
  },
  unit: {
    type:String,
    default: 't'
  },
  type: {
    type: String,
    default: 'line',
  },
  legend: {
    type: Array,
    default: () => ['1das', 'zxc2', '3cx', '4v']
  },
  seriesData: {
    type: Array,
    default: () => [
      [120, 132, 101, 134, 90, 230, 210],
      [120, 132, 101, 134, 90, 230, 210],
      [120, 132, 101, 134, 90, 230, 210],
      [120, 132, 101, 134, 90, 230, 210],
    ]
  },
  gridTop: {
    type: String,
    default: '20%'
  }
});
const { proxy } = getCurrentInstance();
const myChart = shallowRef(null)
watch(props, () => {
  initChart()
},{deep:true})

const main = ref(null)
const initChart = () => {
  if (myChart.value != null && myChart.value != "" && myChart.value != undefined) {
    myChart.value.dispose();//销毁
  }
  myChart.value = proxy.echarts.init(main.value);
  let seriesList = []
  props.seriesData.forEach((item,i) => {
    let rgb = hexToRgb(props.color[i])
    seriesList.push({
      name: props.legend[i],
      type: props.type,
      barWidth: props.type === 'bar' ? (props.seriesData.length < 3 ? 10 : 6) : null,
      // stack: props.type === 'line' ? 'data' : null,\
      lineStyle: props.type === 'line' ? {
        width:1,
      } : null,
      areaStyle: props.type === 'line' ? {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [{
            offset: 0, color: `rgba(${rgb[0] || 0},${rgb[1] || 0},${rgb[2] || 0}, 0.3)` // 0% 处的颜色
          }, {
            offset: 1, color: `rgba(${rgb[0] || 0},${rgb[1] || 0},${rgb[2] || 0}, 0)`,  // 100% 处的颜色
          }],
          global: false
        }
      } : null,
      itemStyle: props.type === 'bar' ? {
        // shadowColor: 'rgba(255, 255, 255, 1)',
        // shadowBlur: 10,
        color:`rgba(${rgb[0] || 0},${rgb[1] || 0},${rgb[2] || 0})`
        // color: {
        //   type: 'linear',
        //   x: 0,
        //   y: 0,
        //   x2: 0,
        //   y2: 1,
        //   colorStops: [{
        //     offset: 0, color: `rgba(${rgb[0] || 0},${rgb[1] || 0},${rgb[2] || 0}, 0.8)` // 0% 处的颜色
        //   }, {
        //     offset: 1, color: `rgba(${rgb[0] || 0},${rgb[1] || 0},${rgb[2] || 0}, 1)`,  // 100% 处的颜色
        //   }],
        //   global: false
        // }
      } : null,
      data: item
    })
  })
  const option = {
    color: props.color,
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: props.type === 'line' ? 'line' : 'shadow',
        lineStyle: {
          color:'#0174d7',
          type: 'solid'
        },
      },
      className:'echart-tooltip',
      formatter: function (params) {
        let content = ''
        params.forEach(item => {
          content += `
            <div style="height:20px;line-height:20px;">
              <span style="display:inline-block;margin-right:4px;border-radius:50%;width:6px;height:6px;background-color:${item.color};"></span>
              <span style="color: #fff;font-size:12px;">${item.seriesName}：</span>
              <span style="color:${item.color};font-size:12px;">${item.value}</span>
            </div>
          `
        })
        const htmlContent = `
          <div style="">
            <div style="color: #fff;font-size:12px;">${params[0].name}</div>
            ${content}
          </div>
        `
        return htmlContent
      }
    },
    legend: {
      right: 6,
      top: 5,
      icon: 'roundRect',
      itemHeight: 5,
      itemWidth: 8,
      borderRadius: 2,
      textStyle:{
        color: '#828793',
      }
    },
    grid: {
      left: '5%',
      right: '8%',
      bottom: '3%',
      top: props.gridTop,
      containLabel: true
    },
    xAxis: [{
      type: 'category',
      boundaryGap: props.type === 'bar',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#384154',
        },
      },
      axisTick: {
        show:false,
      },
      axisLabel: {
        color: '#828793'
      },
      data: props.xAxisData
    }],
    yAxis: [{
      type: 'value',
      name: "单位：" + props.unit,
      nameTextStyle: {
        color: "#828793",
        nameLocation: "start",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show:false,
      },
      axisLabel: {
        color: '#828793'
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#384154',
          type: 'dashed'
        },
      },
    }],
    series: seriesList
  }
  myChart.value.setOption(option);
}

nextTick(()=>{
  initChart()
  window.addEventListener('resize',() => {
    myChart.value.resize()
  })
});
</script>

<style lang="scss" scoped>
.echarts-container{
  width: 100%;
  height: 100%;
  .main{
    width: 100%;
    height: 100%;
    :deep(.echart-tooltip){
      border-color: #008AFF !important;
      box-shadow: inset 0 0 8px 0 rgba(0, 138, 255, 0.4) !important;
      background: rgba(2, 19, 28, 0.95) !important;
    }
  }
}
</style>