import 'echarts/lib/component/dataZoom';

import { type Ref, ref } from 'vue';

import echarts from '@/plugins/echarts';
import { debounceChart } from '@/utils/chart';

const option = ref<any>();
option.value = {
  backgroundColor: 'transparent',
  grid: { right: 10, left: 10, bottom: 20 },
  title: {
    text: '近7天车辆数据',
    textStyle: { fontSize: 18, color: '#fff', fontWeight: 'lighter' },
  },
  tooltip: {},
  legend: {
    data: [
      { name: '出园', icon: 'rect', itemStyle: { color: '#4182FF' } },
      { name: '入园', icon: 'rect', itemStyle: { color: '#00FFFF' } },
    ],
    icon: 'rect',
    right: 0,
    top: 0,
    itemGap: 9,
    orient: 'horizontal',
    align: 'left',
    textStyle: { fontSize: 14, color: '#fff' },
  },
  xAxis: {
    type: 'category',
    show: true,
    data: ['02.01', '02.02', '02.03', '02.04', '02.05', '02.06', '02.07'],
    itemStyle: { color: '#ccc' },
    splitLine: {
      show: true,
      lineStyle: {
        color: '#333',
        width: 1,
        type: 'solid', // 'solid' ||'dashed'||'dotted'
      },
    },
    splitArea: {
      show: false,
    },
  },
  yAxis: { show: false, type: 'value' },
  series: [
    {
      name: '入园',
      type: 'line',
      data: [3, 9, 2, 8, 3, 4, 8],
      smooth: true,
      symbol: 'circle',
      symbolSize: 10,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#4182FF' },
            { offset: 1, color: 'rgba(0,255,255,0)' },
          ],
        },
      },
      itemStyle: { borderColor: '#00FFFF', borderWidth: 4, color: '#142745' },
      lineStyle: { color: '#00FFFF', width: 3 },
    },
    {
      name: '出园',
      type: 'line',
      data: [2, 8, 3, 7, 1, 9, 6],
      smooth: true,
      symbol: 'circle',
      symbolSize: 10,
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: '#4182FF' },
            { offset: 1, color: 'rgba(0,255,255,0)' },
          ],
        },
      },
      itemStyle: { borderColor: '#4182FF', borderWidth: 4, color: '#142745' },
      lineStyle: { color: '#4182FF', width: 3 },
    },
  ],
};

export const renderEcharts = (element: Ref<HTMLDivElement>) => {
  const myChart: any = echarts.init(element.value, null, {
    renderer: 'svg',
    devicePixelRatio: window.devicePixelRatio,
  });

  debounceChart(myChart);

  myChart.setOption(option.value);
};