import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { LineGradientsConfig } from './index'
import { CreateComponentType } from '@/packages/index.d'
import { graphic } from 'echarts/core'
import { defaultTheme, chartColorsSearch } from '@/settings/chartThemes/index'
import cloneDeep from 'lodash/cloneDeep'
import dataJson from './data.json'

export const includes = [ 'xAxis', 'yAxis', 'grid']

const option = {
  legend: {
    show: true,
    top:'20',
    right:'50',
    itemStyle:{
      borderType: 'dotted'
    },
    lineStyle: {
      type:'dashed',
      cap:'round',
      opacity:0.9,
    },
    // icon: 'rect',
    data:[{
      name: '电',
      // 强制设置图形为圆。
      icon: 'rect',
      itemStyle:{
        color: 'rgba(12, 109, 196,1)'
      },
    },{
      name: '燃气',
      // 强制设置图形为圆。
      icon: 'rect',
      itemStyle:{
        color: 'rgba(48, 189, 104,1)'
      },
    }],
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  },
  xAxis: {
    show: true,
    type: 'category'
  },
  yAxis: {
    show: true,
    type: 'value',
    name: '单位：万/kwh',
    nameGap:30,
    axisLine:{
      show: false
    },
    splitLine:{
      show: true,
      lineStyle:{
        type: 'dashed',
        opacity:0.5
      }
    }
  },
  dataset: { ...dataJson },
  series: [
    {
      type: 'line',
      smooth: true,
      symbolSize: 0, //设定实心点的大小
      label: {
        show: false,
        position: 'top',
        color: '#fff',
        fontSize: 12
      },
      lineStyle: {
        width: 3,
        type: 'solid',

        color: 'rgba(12, 109, 196,1)'
      },
      areaStyle: {
        opacity: 0.8,
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: chartColorsSearch[defaultTheme][3]
          },
          {
            offset: 1,
            color: 'rgba(12, 57, 68,0.5)'
          }
        ])
      }
    },
    {
      type: 'line',
      smooth: true,
      symbolSize: 0, //设定实心点的大小
      label: {
        show: false,
        position: 'top',
        color: '#fff',
        fontSize: 12
      },
      lineStyle: {
        width: 3,
        type: 'solid',
        join: 'round',
        color: 'rgba(48, 189, 104,1)'
      },
      areaStyle: {
        opacity: 0.8,
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: chartColorsSearch[defaultTheme][4]
          },
          {
            offset: 1,
            color: 'rgba(8, 48, 85,0.5)'
          }
        ])
      }
    }
  ]
}

export default class Config extends PublicConfigClass implements CreateComponentType {
  public key: string = LineGradientsConfig.key
  public chartConfig = cloneDeep(LineGradientsConfig)
  // 图表配置项
  public option = echartOptionProfixHandle(option, includes)
}