import { PublicConfigClass, echartOptionProfixHandle } from '@/packages/public'
import { CreateComponentType } from '@/packages/index.d'
import { AlarmTrendConfig } from './index'
import dataJson from './data.json'
import { cloneDeep } from 'lodash'

export const option = {
  // 全局组件
  grid: {
    top: '20%',
    left: '10%',
    right: '10%',
    bottom: '15%',
    containLabel: true
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  },
  xAxis: {
    show: true,
    type: 'category',
    data: dataJson.xAxis,
    axisLine: {
      show: true,
      lineStyle: {
        color: '#4A90E2'
      }
    },
    axisLabel: {
      color: '#B0E0E6'
    }
  },
  yAxis: {
    show: true,
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'rgba(74, 144, 226, 0.3)'
      }
    },
    axisLabel: {
      color: '#B0E0E6'
    }
  },
  series: [
    {
      type: 'line',
      smooth: true,
      data: dataJson.series,
      symbol: 'circle',
      symbolSize: 8,
      lineStyle: {
        color: '#00E5FF',
        width: 2
      },
      itemStyle: {
        color: '#00E5FF',
        borderColor: '#fff',
        borderWidth: 2
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(0, 229, 255, 0.5)' },
            { offset: 1, color: 'rgba(0, 229, 255, 0)' }
          ]
        }
      }
    }
  ],
  // 自定义组件
  title: '报警趋势',
  titleColor: '#ffffff',
  titleSize: 20,
  dropdownOptions: ['当日', '当月', '当年'],
  dropdownDefault: '当日'
};

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key = AlarmTrendConfig.key
  public chartConfig = cloneDeep(AlarmTrendConfig)
  public option = echartOptionProfixHandle(option, ['grid', 'xAxis', 'yAxis', 'series'])
}
