<template>
  <div ref="upfFlow" class="chart-container"></div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { mainGet } from '@/api/faultManage/actAlarm';
import * as echarts from 'echarts/core';
import {
  TooltipComponent,
  TooltipComponentOption,
  GridComponent,
  GridComponentOption,
  LegendComponent,
  LegendComponentOption,
} from 'echarts/components';
import { LineChart, LineSeriesOption } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { GaugeSeriesOption } from 'echarts';
import { markRaw } from 'vue';

echarts.use([
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

type EChartsOption = echarts.ComposeOption<
  | TooltipComponentOption
  | GridComponentOption
  | LegendComponentOption
  | LineSeriesOption
>;
/**图DOM节点实例对象 */
const upfFlow = ref<HTMLElement | undefined>(undefined);

/**图实例对象 */
const upfFlowChart = ref<any>(null);

// // 将现有数据补全为期望的格式
// function completeData(existingData: any, expectedData: any) {
//   let allType = { zh: { CommunicationAlarm: 'Communication Alarm' } };
//   const result = expectedData.map((item: any) => {
//     const found = existingData.find(
//       (existingItem: any) => existingItem.name === item.name
//     );
//     if (found) return found;
//     else {
//       return item;
//     }
//   });
//   var lang = currentLocale.value.split('_')[0];
//   console.log(lang);
//   result.forEach((item: any) => {
//     item.name = t('views.index.' + item.name);
//   });
//   return result;
// }
var charts = {
  unit: 'Kbps',
  names: ['上行', '下行'],
  lineX: [
    '2018-11-11 17:01',
    '2018-11-11 17:02',
    '2018-11-11 17:03',
    '2018-11-11 17:04',
    '2018-11-11 17:05',
    '2018-11-11 17:06',
    '2018-11-11 17:07',
    '2018-11-11 17:08',
    '2018-11-11 17:09',
    '2018-11-11 17:10',
    '2018-11-11 17:11',
    '2018-11-11 17:12',
    '2018-11-11 17:13',
    '2018-11-11 17:14',
    '2018-11-11 17:15',
    '2018-11-11 17:16',
    '2018-11-11 17:17',
    '2018-11-11 17:18',
    '2018-11-11 17:19',
    '2018-11-11 17:20',
  ],
  value: [
    [
      451, 352, 303, 534, 95, 236, 217, 328, 159, 151, 231, 192, 453, 524, 165,
      236, 527, 328, 129, 530,
    ],
    [
      360, 545, 80, 192, 330, 580, 192, 80, 250, 453, 352, 28, 625, 345, 65,
      325, 468, 108, 253, 98,
    ],
  ],
};
var color = ['rgba(23, 255, 243', 'rgba(255,100,97'];
var lineY: any = [];

for (var i = 0; i < charts.names.length; i++) {
  var x = i;
  if (x > color.length - 1) {
    x = color.length - 1;
  }
  var data = {
    name: charts.names[i],
    type: 'line',
    color: color[x] + ')',
    smooth: true,
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: color[x] + ', 0.3)',
            },
            {
              offset: 0.8,
              color: color[x] + ', 0)',
            },
          ],
          false
        ),
        shadowColor: 'rgba(0, 0, 0, 0.1)',
        shadowBlur: 10,
      },
    },
    symbol: 'circle',
    symbolSize: 5,
    data: charts.value[i],
  };
  lineY.push(data);
}

const optionData: EChartsOption = {
  tooltip: {
    show: true, //是否显示提示框组件
    trigger: 'axis',
  },
  legend: {
    data: charts.names,
    textStyle: {
      fontSize: 12,
      color: 'rgb(0,253,255,0.6)',
    },
    right: '4%',
  },
  grid: {
    top: '14%',
    left: '4%',
    right: '4%',
    bottom: '12%',
    containLabel: true,
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: charts.lineX,
    axisLabel: {
      formatter: function (params: any) {
        return params.split(' ')[0] + '\n' + params.split(' ')[1];
      },
    },
    axisLine: {
      lineStyle: {
        color: 'rgb(0,253,255,0.6)',
      },
    },
  },
  yAxis: {
    name: charts.unit,
    type: 'value',
    axisLabel: {
      formatter: '{value}',
    },
    splitLine: {
      lineStyle: {
        color: 'rgb(23,255,243,0.3)',
      },
    },
    axisLine: {
      lineStyle: {
        color: 'rgb(0,253,255,0.6)',
      },
    },
  },
  series: lineY,
};

function fnDesign(container: HTMLElement | undefined, option: EChartsOption) {
  if (!container) return;
  const { clientHeight, clientWidth } = container;

  upfFlowChart.value = markRaw(
    echarts.init(container, 'light', {
      width: clientWidth,
      height: clientHeight - 36,
    })
  );
  option && upfFlowChart.value.setOption(option);
}

onMounted(() => {
  fnDesign(upfFlow.value, optionData);
  setInterval(() => {
    upfFlowChart.value.setOption({
      legend: {
        selected: {
          上行: false,
          下行: false,
        },
      },
    });
    upfFlowChart.value.setOption({
      legend: {
        selected: {
          上行: true,
          下行: true,
        },
      },
    });
  }, 10000);
});
</script>

<style lang="less" scoped>
.chart-container {
  /* 设置图表容器大小和位置 */
  width: 100%;
  height: 100%;
}
</style>
