import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
import { CarbonEmissionConfig } 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'
import { fontStyle } from 'html2canvas/dist/types/css/property-descriptors/font-style'
import {chartInitConfig} from "@/settings/designSetting";

export const includes = ['xAxis', 'yAxis']
const otherOption = {
  sceneCode: '',
  titleText: '碳排放',
  unit: dataJson.unit,
}

const option = {
  ...otherOption,
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },
  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)'
      }, textStyle: {
        color: '#eee'
      },
    }, {
      name: '燃气',
      textStyle: {
        color: '#eee'
      },
      // 强制设置图形为圆。
      icon: 'rect',
      itemStyle: {
        color: 'rgba(48, 189, 104,1)'
      },
    }],
  },
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      type: 'line'
    }
  },
  xAxis: {
    type: 'category',
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      }
    },
    axisTick: {
      show: false
    },
    //
    axisLabel: {
      color: '#eee',
      interval: 0,
      fontSize: 9,
      margin: 20
    }

  },
  // name: '单位：万/kwh',
  yAxis: {
    type: 'value',
    min: 0,
    interval: 25,
    name: '单位：万/kwh',
    nameTextStyle:{
      color: 'rgba(255, 255, 255, 0.8)',
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      color: 'rgba(255, 255, 255, 0.8)',
      formatter: '{value}'
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
        type: 'solid'
      }
    }
  },
  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 = CarbonEmissionConfig.key
  public chartConfig = cloneDeep(CarbonEmissionConfig)
  // 图表配置项
  public option = echartOptionProfixHandle(option, includes)
  public attr = { ...chartInitConfig, x: 0, y: 0, w: 450, h: 320, zIndex: 1 }
}