<template>
  <div ref="alarmDayLine" class="chart-container"></div>
</template>
<script setup lang="ts">
import { markRaw, onMounted, ref } from 'vue';
import { mainGet } from '@/api/faultManage/actAlarm';
import * as echarts from 'echarts/core';
import {
  TitleComponent,
  TitleComponentOption,
  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';

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

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

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

var xData = (function () {
  var data = [];
  for (var i = 2011; i < 2017; i++) {
    data.push(i + '年');
  }
  return data;
})();

var color = ['#1a9bfc', '#99da69', '#e32f46', '#7049f0', '#fa704d'];
var name = ['通信告警', '设备告警', '处理错误', '环境告警', '服务质量'];
var data = [
  [13.7, 3.4, 13.5, 16.1, 7.4, 15.2],
  [17.4, 13.7, 13.5, 3.4, 15.2, 13.5],
  [13.4, 7.4, 13.7, 13.5, 16.1, 13.7],
  [3.5, 15.2, 16.1, 17.4, 13.4, 6.1],
  [16.1, 13.5, 3.7, 17.4, 15.2, 18.9],
];

var series: any = [];
for (var i = 0; i < 5; i++) {
  series.push({
    name: name[i],
    type: 'line',
    symbolSize: 3, //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10[ default: 4 ]
    symbol: 'circle', //标记的图形。ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    smooth: true, //是否平滑曲线显示
    showSymbol: false, //是否显示 symbol, 如果 false 则只有在 tooltip hover 的时候显示
    areaStyle: {
      normal: {
        color: new echarts.graphic.LinearGradient(
          0,
          0,
          0,
          1,
          [
            {
              offset: 0,
              color: color[i],
            },
            {
              offset: 0.8,
              color: 'rgba(255,255,255,0)',
            },
          ],
          false
        ),
        // shadowColor: 'rgba(255,255,255, 0.1)',
        shadowBlur: 10,
        opacity: 0.3,
      },
    },
    itemStyle: {
      normal: {
        color: color[i],
        lineStyle: {
          width: 1,
          type: 'solid', //'dotted'虚线 'solid'实线
        },
        borderColor: color[i], //图形的描边颜色。支持的格式同 color
        borderWidth: 8, //描边线宽。为 0 时无描边。[ default: 0 ]
        barBorderRadius: 0,
        label: {
          show: false,
        },
        opacity: 0.5,
      },
    },
    data: data[i],
  });
}

const optionData: EChartsOption = {
  legend: {
    itemGap: 10,
    itemWidth: 20,
    textStyle: {
      color: '#fff',
      fontSize: '15',
    },
    data: name,
  },

  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // 坐标轴指示器，坐标轴触发有效
      // lineStyle: {
      //   color: '#57617B',
      // },
    },
    formatter:
      '{b}<br />{a0}: {c0}%<br />{a1}: {c1}%<br />{a2}: {c2}%<br />{a3}: {c3}%<br />{a4}: {c4}%<br />',
    // backgroundColor: 'rgba(0,0,0,0.7)', // 背景
  },
  xAxis: [
    {
      type: 'category',
      axisLine: {
      show: true,
      lineStyle: {
        color: 'rgb(0,253,255,0.6)',
      },
    },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#32346c ',
        },
      },
      boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样
      axisTick: {
        show: false,
      },
      splitArea: {
        show: false,
      },
      axisLabel: {
        inside: false,
      },
      data: xData,
    },
  ],
  yAxis: {
    type: 'value',
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgb(0,253,255,0.6)',
      },
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#32346c ',
      },
    },
    axisLabel: {
      formatter: '{value}%',
    },
  },
  series: series,
};

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

  // alarmDayLineChart.value = echarts.init(container, 'light', {
  //   width: clientWidth,
  //   height: clientHeight - 36,
  // });

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

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

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