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

export const includes = []
const otherOption = {
  sceneCode: '',
  titleText: '燃气系统',
  unit: dataJson.unit,
}

const option = {
  ...otherOption,
  dataset: dataJson,
  // 添加标题配置
  title: {
    text: '单位：' + otherOption.unit,
    left: '2%',
    top: '2%',
    textStyle: {
      fontSize: 12,
      color: 'rgba(255, 255, 255, 0.7)',
      fontWeight: 'normal'
    }
  },
  // 提示框配置
  tooltip: {
    trigger: 'axis',
    // formatter: function (params) {
    //   let param = params[0];
    //   return `${param.name}: ${param.value.value}`;
    // },
    axisPointer: {
      type: 'line',
      lineStyle: {
        color: 'rgba(58, 160, 255, 1)',
        type: 'solid'
      }
    }
  },
  // 网格配置
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    top: '15%',
    containLabel: true
  },

  // X轴配置
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLine: {
      lineStyle: {
        color: 'rgba(255, 255, 255, 0.1)',
      }
    },
    axisTick: {
      show: false
    },
    // 
    axisLabel: {
      color: '#eee',
      interval: 0,
      fontSize: 9,
      margin: 20
    }

  },

  // Y轴配置
  yAxis: {
    type: 'value',
    min: 0,
    // interval: 25,
    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'
      }
    }
  },

  // 数据系列配置
  series: [
    {
      name: '值',
      type: 'line',
      smooth: true,
      symbol: 'none', // 默认不显示点
      symbolSize: 8,
      lineStyle: {
        width: 2,
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            { offset: 0, color: 'rgba(58, 160, 255, 1)' },
            { offset: 1, color: 'rgba(127, 216, 255, 1)' }
          ]
        }
      },
      emphasis: {
        focus: 'series',
        symbol: 'circle', // 鼠标悬停时显示圆点
        symbolSize: 8,
        itemStyle: {
          color: 'rgba(58, 160, 255, 1)',
          borderColor: 'rgba(255, 255, 255, 0.8)',
          borderWidth: 2
        }
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(53, 192, 227,1)' },
            { offset: 0.4, color: 'rgba(49, 175, 255, 0.8)' },
            { offset: 1, color: 'rgba(58, 160, 255, 0.05)' }
          ]
        }
      }
    }
  ],

};

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