<template>
  <div class="echart-line" ref="line"></div>
</template>

<script setup lang="ts">
  import { ref, nextTick, watch } from 'vue';

  import * as echarts from 'echarts';

  const props = defineProps({
    echartData: {
      type: Object,
      default: () => {
        return {};
      },
    },
    xAxis: {
      type: Array,
      default: () => {
        return [0, 1, 2];
      },
    },
    /** { name, position, min, max } */
    yAxis: {
      type: Array,
      default: () => {
        return [
          { name: 'ppm', gridIndex: 0, position: 'left' },
          { name: '%', gridIndex: 1, position: 'left', max: 100 },
          { name: 'kPa', gridIndex: 2, position: 'left' },
          { name: '℃', gridIndex: 2, position: 'right' },
        ];
      },
    },
  });
  //获取dom元素节点
  const line = ref<any>();

  // function initSeries(param) {
  //   if (param.length) {
  //     const data = param.map((el) => {
  //       const seriesD = plainOptions.find((v) => v.value == el.label);
  //       return {
  //         name: seriesD['label'],
  //         type: 'line',
  //         stack: '',
  //         symbol: 'circle',
  //         symbolSize: 0,

  //         itemStyle: {
  //           normal: {
  //             color: seriesD['color'],
  //             lineStyle: {
  //               color: seriesD['color'],
  //               width: 1,
  //             },
  //             areaStyle: {
  //               color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
  //                 {
  //                   offset: 0,
  //                   color: seriesD['areaColor'][0],
  //                 },
  //                 {
  //                   offset: 1,
  //                   color: seriesD['areaColor'][1],
  //                 },
  //               ]),
  //             },
  //           },
  //         },
  //         data: el.value.map((v) => v[el.label]),
  //       };
  //     });
  //     return data;
  //   }
  // }

  function getSeriesData(param, label) {
    return param.yData?.find((v) => v.label === label)?.value.map((el) => el[label]) || [];
  }

  function buildLineSeries(param, name, label, color, areaStart, areaEnd, gridIndex, yAxisIndex) {
    return {
      name,
      type: 'line',
      xAxisIndex: gridIndex,
      yAxisIndex,
      symbol: 'circle',
      symbolSize: 0,
      itemStyle: {
        color,
      },
      lineStyle: {
        width: 1,
        color,
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          { offset: 0, color: areaStart },
          { offset: 1, color: areaEnd },
        ]),
      },
      data: getSeriesData(param, label),
    };
  }

  function getOption(param) {
    nextTick(() => {
      const myChart = echarts.init(line.value);

      const commonXAxis = {
        boundaryGap: false,
        axisLabel: {
          color: '#74767b',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#3173f0',
            width: 1,
            type: 'dashed',
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(209, 229, 253)',
          },
        },
      };

      const commonYAxis = {
        type: 'value',
        axisLabel: {
          formatter: '{value}',
          color: '#74767b',
        },
        nameTextStyle: {
          color: '#74767b',
          fontSize: 14,
          lineHeight: 10,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
      };

      const option = {
        grid: [
          {
            left: '2%',
            right: '66%',
            top: '10%',
            bottom: '10%',
            containLabel: true,
          },
          {
            left: '34%',
            right: '34%',
            top: '10%',
            bottom: '10%',
            containLabel: true,
          },
          {
            left: '66%',
            right: '2%',
            top: '10%',
            bottom: '10%',
            containLabel: true,
          },
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, .6)',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
        },
        xAxis: props.xAxis.map((ele) => {
          return {
            ...commonXAxis,
            type: 'category',
            gridIndex: ele,
            data: param.xData || [],
          };
        }),
        yAxis: props.yAxis.map((ele: any) => {
          return {
            ...ele,
            ...commonYAxis,
          };
        }),
        series: [
          buildLineSeries(param, 'CO浓度(ppm)', 'coVal', '#3bd97a', 'rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)', 0, 0),
          buildLineSeries(param, 'C2H4浓度(ppm)', 'c2h4Val', '#d35400', 'rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)', 0, 0),
          buildLineSeries(param, 'C2H2浓度(ppm)', 'c2h2Val', '#c0392b', 'rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)', 0, 0),
          buildLineSeries(param, 'CH4浓度(%)', 'ch4Val', '#f9c74a', 'rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)', 1, 1),
          buildLineSeries(param, 'CO2浓度(%)', 'co2Val', '#1fd0da', 'rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)', 1, 1),
          buildLineSeries(param, 'O2浓度(%)', 'o2Val', '#ff6666', 'rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)', 1, 1),
          buildLineSeries(param, '压差(kPa)', 'sourcePressure', '#3b4bd9', 'rgba(59, 75, 217,0.1)', 'rgba(59, 75, 217,0.8)', 2, 2),
          buildLineSeries(param, '温度(℃)', 'temperature', '#f18736', 'rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)', 2, 3),
          buildLineSeries(param, '密闭墙外CO浓度(ppm)', 'coValOut', '#3bd97a', 'rgba(59, 217, 122,0.1)', 'rgba(59, 217, 122,0.8)', 0, 0),
          buildLineSeries(param, '密闭墙外C2H4浓度(ppm)', 'c2h4ValOut', '#d35400', 'rgba(211, 84, 0,0.1)', 'rgba(211, 84, 0,0.8)', 0, 0),
          buildLineSeries(param, '密闭墙外C2H2浓度(ppm)', 'c2h2ValOut', '#c0392b', 'rgba(192, 57, 43,0.1)', 'rgba(192, 57, 43,0.8)', 0, 0),
          buildLineSeries(param, '密闭墙外CH4浓度(%)', 'ch4ValOut', '#f9c74a', 'rgba(249, 199, 74,0.1)', 'rgba(249, 199, 74,0.8)', 1, 1),
          buildLineSeries(param, '密闭墙外CO2浓度(%)', 'co2ValOut', '#1fd0da', 'rgba(31, 208, 218,0.1)', 'rgba(31, 208, 218,0.8)', 1, 1),
          buildLineSeries(param, '密闭墙外O2浓度(%)', 'o2ValOut', '#ff6666', 'rgba(255, 102, 102,0.1)', 'rgba(255, 102, 102,0.8)', 1, 1),
          buildLineSeries(param, '密闭墙外温度(℃)', 'temperatureOut', '#f18736', 'rgba(241, 135, 54,0.1)', 'rgba(241, 135, 54,0.8)', 2, 3),
        ],
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0, 1, 2],
            start: 10,
            end: 100,
          },
        ],
      };

      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    });
  }

  watch(
    () => props.echartData,
    (val) => {
      val && getOption(val);
    },
    { deep: true, immediate: true }
  );
</script>

<style lang="less" scoped>
  .echart-line {
    width: 100%;
    height: 100%;
  }
</style>
