/** @format */

import React, { useEffect, useState } from 'react';
import Echarts from '../Echarts';
import zrender from 'zrender';
import _ from 'lodash';

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

const BasicBarChart = (props: BasicBarChartProps) => {
  const {
    size = { height: 215, width: 372 },
    option = {},
    data,
    data: {
      xData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      yData = [[10, 52, 200, 334, 390, 330, 220]],
    } = {},
  } = props;

  const optionBase = {
    legend: {
      show: false,
      padding: 2,
      itemGap: 5,
      left: 'right',
      itemWidth: 8,
      icon: 'rect',
      itemHeight: 4,
      orient: 'horizontal',
      textStyle: {
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        fontSize: 12,
        color: '#999',
      },
    },
    tooltip: {
      show: true,
      trigger: 'axis',
      triggerOn: 'mousemove',
      axisPointer: {
        type: 'shadow',
        label: {
          backgroundColor: '#6a7985',
        },
      },
      hideDelay: 100,
      textStyle: {
        fontFamily: 'Microsoft Yahei',
        fontWeight: 'normal',
        fontSize: 14,
        color: '#fff',
      },
    },
    grid: {
      //柱状图位置
      top: '2%',
      left: '5%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      show: true,
      boundaryGap: true, //坐标轴两边留白
      position: 'top',
      name: '',
      data: xData,
      axisTick: {
        alignWithLabel: true,
        show: false,
      },
      axisLabel: {
        show: true,
        color: '#999',
        fontWeight: 'normal',
        fontFamily: 'Microsoft YaHei',
        fontSize: 12,
        interval: 0,
        rotate: 0,
      },

      axisLine: {
        show: false,
        lineStyle: { color: '#333', opacity: 0.2 },
      },
      splitLine: {
        show: false,

        lineStyle: { color: 'rgba(255,255,255,0.1)', type: 'dashed' },
      },
    },

    yAxis: {
      type: 'value',
      min: null,
      max: null,
      inverse: true,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: false,
        color: '#999',
        fontWeight: 'normal',
        fontFamily: 'Microsoft YaHei',
        fontSize: 12,
        interval: 'auto',
        formatter: '{value}',
      },
      axisLine: {
        show: false,
        lineStyle: { color: '#333' },
      },
      splitLine: {
        show: true,
        lineStyle: { color: '#aaa', type: 'dashed' },
      },
      name: '',
    },
    series: {
      //柱的信息
      type: 'bar',
      data: [40, 90],
      barWidth: 32, //柱子宽度
      itemStyle: {
        //柱样式
        normal: {
          color: '#53E0A6',
          opacity: 0.5,
          borderColor: '#53E0A6',
          borderWidth: 2,
          borderType: 'solid',
        },
      },
      markPoint: {
        data: [
          // {
          //   type: 'max',
          // },
        ],
        symbolSize: 1,
        symbol: 'rect',
        symbolRotate: 6,
        symbolKeepAspect: false,
        symbolOffset: [0, 6],
        itemStyle: {
          borderColor: 'rgba(255, 0, 0, 0)',
          color: 'rgba(135, 137, 91, 1)',
          borderWidth: 5.5,
          shadowBlur: 0.5,
        },
      },
    },

    animation: true,
    animationEasing: 'cubicOut',
    animationEasingUpdate: 'cubicOut',
    animationDuration: 500,
    animationDurationUpdate: 300,
  };

  const [latestOption, setLatestOption] = useState(optionBase);

  function customizer(objValue: any, srcValue: any) {
    if (_.isArray(objValue)) {
      return srcValue;
    }
  }

  function formatSeries(data: Record<string, any>[], index: number) {
    const serie = (option.series && option.series[index]) || optionBase.series;
    const r = {
      name: serie.name || `系列${index + 1}`,
      type: 'bar',
      data: data,
      itemStyle: serie.itemStyle,
      barCategoryGap: serie.barCategoryGap || null,
      label: serie.label,
      markPoint: serie.markPoint,
      barWidth: serie.barWidth,
    };
    // 处理柱图是渐变色的情况
    if (
      serie.itemStyle &&
      serie.itemStyle.colorLinear &&
      serie.itemStyle.color2 &&
      serie.itemStyle.color1
    ) {
      r.itemStyle.color = new zrender.LinearGradient(0, 0, 0, 1, [
        {
          offset: 1,
          color: serie.itemStyle.color2,
        },
        {
          offset: 0,
          color: serie.itemStyle.color1,
        },
      ]);
    }

    return r;
  }

  function setData() {
    const dataConfig = {
      series: [],
    };
    dataConfig.series = yData.map(
      (item: Record<string, any>[], index: number) => formatSeries(item, index),
    );

    const latestOption = _.mergeWith(
      optionBase,
      option,
      dataConfig,
      customizer,
    );

    setLatestOption(latestOption);
  }

  useEffect(() => {
    setData();
  }, [option, data]);

  return <Echarts size={size} option={latestOption} />;
};

export default BasicBarChart;