/** @format */

import 'echarts/lib/chart/gauge';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/grid';

import echarts from 'echarts/lib/echarts';
import _ from 'lodash';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import zrender from 'zrender';

interface GaugeChartProps {
  size?: Record<string, any>;
  [key: string]: any;
}

const GaugeChart = (props: GaugeChartProps) => {
  const {
    size = { height: 300 },
    option = {},
    name = '业务指标',
    value = 50,
    valueName = '使用率',
    min = 0,
    max = 100,
    splitNumber = 10,
    startAngle = 180,
    endAngle = 0,
    isShowPointer = false, // 是否展示指针
    BarColor1,
    BarColor2,
    BarColor3,
    radius = 150,
    axisLineWidth = 8,
    titleText = 12,
    detailText = 24,
    axisLabelText = 12,
    offsetCenter = 15,
    theme,
  } = props;

  const wrapperRef = useRef(null);
  const [echartsInc, setEchartsInc] = useState<Record<string, any> | null>(
    null,
  );

  const optionBase = {
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%',
    },
    series: [
      {
        data: [{ value, name: valueName }],
        name,
        type: 'gauge',
        radius: radius + '%', //半径百分比
        startAngle, //表盘开始角度
        endAngle, // 表盘结束角度
        min, // 最小的数据值,默认 0 。映射到 minAngle。
        max, // 最大的数据值,默认 100 。映射到 maxAngle。
        splitNumber, // 仪表盘刻度的分割段数,默认 10。
        center: ['50%', '90%'],
        axisLine: {
          // 仪表盘轴线(轮廓线)相关配置。
          show: true, // 是否显示仪表盘轴线(轮廓线),默认 true。
          lineStyle: {
            // 仪表盘轴线样式。
            color: [
              [0.2, BarColor1 || '#00CE97'],
              [0.8, BarColor2 || '#FF9900'],
              [1, BarColor3 || '#D33733'],
            ], // 仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
            opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            width: axisLineWidth, // 轴线宽度,默认 30。
            // shadowBlur: 20, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
            // shadowColor: '#fff', // 阴影颜色。支持的格式同color。
          },
        },
        splitLine: {
          // 分隔线样式。
          show: true, // 是否显示分隔线,默认 true。
          length: 12, // 分隔线线长。支持相对半径的百分比,默认 30。
          lineStyle: {
            // 分隔线样式。
            color: '#fff', // 线的颜色,默认 #eee。
            opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            width: 1, // 线度,默认 2。
            type: 'solid', // 线的类型,默认 solid。 此外还有 dashed,dotted
            // shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
            shadowColor: '#fff', // 阴影颜色。支持的格式同color。
          },
        },

        axisTick: {
          // 刻度(线)样式。
          show: true, // 是否显示刻度(线),默认 true。
          splitNumber: 3, // 分隔线之间分割的刻度数,默认 5。
          length: 12, // 刻度线长。支持相对半径的百分比,默认 8。
          lineStyle: {
            // 刻度线样式。
            color: '#fff', // 线的颜色,默认 #eee。
            opacity: 0.8, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
            width: 0.5, // 线度,默认 1。
            type: 'solid', // 线的类型,默认 solid。 此外还有 dashed,dotted
            // shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
            shadowColor: '#fff', // 阴影颜色。支持的格式同color。
          },
        },

        axisLabel: {
          // 刻度标签。
          show: true, // 是否显示标签,默认 true。
          distance: 6, // 标签与刻度线的距离,默认 5。
          color: axisLabelText.color || '#fff', // 文字的颜色,默认 #fff。
          fontSize: axisLabelText.fontSize || 12, // 文字的字体大小,默认 5。
          fontWeight: axisLabelText.fontWeight || 'normal',
          fontFamily: axisLabelText.fontFamily || 'sans-serif',
          formatter: '{value}', // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
        },

        pointer: {
          // 仪表盘指针。
          show: isShowPointer, // 是否显示指针,默认 true。
          length: '60%', // 指针长度，可以是绝对数值，也可以是相对于半径的百分比,默认 80%。
          width: 2, // 指针宽度,默认 8。
        },

        itemStyle: {
          // 仪表盘指针样式。
          color: 'auto', // 指针颜色，默认(auto)取数值所在的区间的颜色
          opacity: 1, // 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
          borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
          borderType: 'dotted', // 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。
          borderColor: '#000', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color，不支持回调函数。
          // shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
          // shadowColor: '#fff', // 阴影颜色。支持的格式同color。
        },

        emphasis: {
          // 高亮的 仪表盘指针样式
          itemStyle: {
            // 高亮 和正常  两者具有同样的配置项,只是在不同状态下配置项的值不同。
          },
        },

        title: {
          // 仪表盘标题。
          show: true, // 是否显示标题,默认 true。
          offsetCenter: [0, `-${offsetCenter}%`], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
          color: titleText.color || '#fff', // 文字的颜色,默认 #333。
          fontSize: titleText.fontSize || 12, // 文字的字体大小,默认 15。
          fontWeight: titleText.fontWeight || 'normal',
          fontFamily: titleText.fontFamily || 'sans-serif',
        },

        detail: {
          // 仪表盘详情，用于显示数据。
          show: true, // 是否显示详情,默认 true。
          offsetCenter: [0, '0%'], // 相对于仪表盘中心的偏移位置，数组第一项是水平方向的偏移，第二项是垂直方向的偏移。可以是绝对的数值，也可以是相对于仪表盘半径的百分比。
          color: detailText.color || '#fff', // 文字的颜色,默认 auto。
          fontSize: detailText.fontSize || 24, // 文字的字体大小,默认 15。
          formatter: '{value}%', // 格式化函数或者字符串
          fontFamily: detailText.fontFamily || 'DINAlternate-Bold',
          fontWeight: detailText.fontWeight || 'normal',
        },
      },
    ],
    animation: true,
    animationEasing: 'cubicOut',
    animationEasingUpdate: 'cubicOut',
    animationDuration: 500,
    animationDurationUpdate: 1300,
  };

  useLayoutEffect(() => {
    if (wrapperRef && wrapperRef.current) {
      const myChart = echarts.init(wrapperRef.current, null, {
        devicePixelRatio: 2,
      });
      setEchartsInc(myChart);

      const latestOption = _.mergeWith({}, optionBase, option);
      myChart.setOption(latestOption);
    }
  }, []);

  useEffect(() => {
    if (!echartsInc) {
      return;
    }
    const latestOption = _.mergeWith(optionBase, option);
    echartsInc.setOption(latestOption, { notMerge: true });
  }, [option]);

  useEffect(() => {
    if (!echartsInc) {
      return;
    }
    echartsInc.resize();
  }, [size]);

  return <div className="datav-wrapper" style={size} ref={wrapperRef}></div>;
};
GaugeChart.themeUpdate = function(params: any) {
  return {
    BarColor1: params.primaryColor,
    BarColor2: params.secondColor,
    BarColor3: params.thirdColor,
  };
};

export default GaugeChart;