import * as React from 'react';
import { useRef, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
// import logo from "../../assets/img/kongzhuangtai.png"
import "./index.less";
var BarChart2 = function BarChart2(props) {
  var _propData$title;
  var chartRef = useRef();
  var propData = props || {};
  var jsonData = props.data;
  var newArrData1 = jsonData.filter(function (v, i, a) {
    return a.findIndex(function (t) {
      return t.s === v.s;
    }) === i;
  });
  var newArrData = newArrData1.map(function (item, index) {
    // 初始化配置
    return {
      name: item.s,
      type: 'bar',
      stack: 'one',
      barWidth: 20,
      yAxisIndex: 0,
      tooltip: {
        // valueFormatter: function (value: any) {
        //     return value + ' ml';
        // }
      },
      data: [],
      lineStyle: {
        color: '#000',
        width: 1
      },
      itemStyle: {
        color: '#0079f2',
        borderColor: "none",
        // 折线点边框颜色
        borderWidth: 0,
        // 折线点边框大小
        normal: null
      },
      symbol: 'triangle',
      // 折线点形状
      symbolSize: 6,
      // 折线点大小
      label: {
        show: true,
        position: 'top',
        distance: 5,
        // Position of labels
        color: '#000',
        fontSize: 12,
        fontWeight: 400,
        fontFamily: ''
      }
    };
  });
  var mergedArray = Object.values(propData === null || propData === void 0 ? void 0 : propData.data.reduce(function (result, item) {
    var year = item.year;
    if (!result[year]) {
      result[year] = [item];
    } else {
      result[year].push(item);
    }
    return result;
  }, {}));
  var legenddata = [];
  if (propData !== null && propData !== void 0 && propData.xloptions) {
    propData === null || propData === void 0 ? void 0 : propData.xloptions.forEach(function (item, index, arr) {
      if (item) {
        if (item.zdylegend) {
          legenddata.push({
            name: item.labelname,
            icon: "image://" + item.legendurl
          });
        } else {
          legenddata.push({
            name: item.labelname,
            icon: item.legendselec,
            itemStyle: {
              color: item.legendBack,
              borderColor: item.legendborderColor,
              borderWidth: item.legendborderWidth,
              borderType: item.legendborderType
            }
          });
        }
        if (propData !== null && propData !== void 0 && propData.xloptions[index]) {
          props.data.forEach(function (itemchild, indexchild) {
            if (item.labelname == itemchild.s && item.labelname == newArrData[index].name) {
              var _item$symbolD, _item$symbolD2, _item$symbolD5, _item$barType7;
              newArrData[index].smooth = item.smooth;
              newArrData[index].showSymbol = item.showSymbol;
              // 线条类型 
              newArrData[index].lineStyle.type = item.type;
              // 线条阴影
              if (item.isshadow) {
                newArrData[index].lineStyle.shadowColor = item.shadowColor;
                newArrData[index].lineStyle.shadowBlur = item.shadowBlur;
                newArrData[index].lineStyle.shadowOffsetX = item.shadowOffsetX;
                newArrData[index].lineStyle.shadowOffsetY = item.shadowOffsetY;
              } else {
                newArrData[index].lineStyle.shadowColor = null;
                newArrData[index].lineStyle.shadowBlur = null;
                newArrData[index].lineStyle.shadowOffsetX = null;
                newArrData[index].lineStyle.shadowOffsetY = null;
              }
              if (item.labeltype) {
                // 面积图
                if (item.labeltype == "arealine") {
                  newArrData[index].type = 'line';
                  if (item.areaStyle) {
                    var areaStyle = {
                      // 透明度 具体颜色
                      normal: {
                        color: {
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [{
                            offset: 0.1,
                            color: item.areaStyle.colorx // 0% 处的颜色
                            //  props.colorx
                          }, {
                            offset: 0.5,
                            color: item.areaStyle.colory // 0% 处的颜色
                            //  props.colory 
                          }, {
                            offset: 0.7,
                            color: item.areaStyle.colorx2 // 0% 处的颜色
                            //  props.colorx2
                          }, {
                            offset: 0.9,
                            color: item.areaStyle.colory2 // 100% 处的颜色
                            //  props.colory2
                          }],

                          globalCoord: false // 缺省为 false
                        }
                      }
                    };

                    newArrData[index].areaStyle = areaStyle;
                  }
                } else {
                  newArrData[index].type = item.labeltype ? item.labeltype : 'bar';
                  newArrData[index].areaStyle = null;
                }
                // 面积图
                if (item.labeltype == 'bar') {
                  var _item$barType, _item$barType2, _item$barType3, _item$barType4, _item$barType5, _item$barType6;
                  newArrData[index].itemStyle.normal = {
                    color: {
                      type: 'linear',
                      x: 0,
                      //右
                      y: 0,
                      //下
                      x2: 0,
                      //左
                      y2: 1,
                      //上
                      colorStops: [{
                        offset: 0,
                        color: (_item$barType = item.barType) === null || _item$barType === void 0 ? void 0 : _item$barType.inicolor // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: (_item$barType2 = item.barType) === null || _item$barType2 === void 0 ? void 0 : _item$barType2.endcolor // 100% 处的颜色
                      }]
                    },

                    borderWidth: (_item$barType3 = item.barType) === null || _item$barType3 === void 0 ? void 0 : _item$barType3.xborderWidth,
                    borderType: (_item$barType4 = item.barType) === null || _item$barType4 === void 0 ? void 0 : _item$barType4.xborderType,
                    borderColor: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0,
                        color: (_item$barType5 = item.barType) === null || _item$barType5 === void 0 ? void 0 : _item$barType5.xinicolor // 0% 处的颜色
                      }, {
                        offset: 1,
                        color: (_item$barType6 = item.barType) === null || _item$barType6 === void 0 ? void 0 : _item$barType6.xendcolor // 100% 处的颜色
                      }],

                      global: false // 缺省为 false
                    }
                  };
                }
              } else {
                // 折线图
                newArrData[index].itemStyle.normal = null;
              }
              newArrData[index].lineStyle.color = item.labelcolor;
              newArrData[index].lineStyle.width = item.labelwidth;
              newArrData[index].label.show = item.labelnumber;
              newArrData[index].label.distance = item.labeldistance;
              newArrData[index].label.color = item.labeldistancecolor;
              newArrData[index].label.fontSize = item.labeldistancefontSize;
              newArrData[index].label.fontWeight = item.labeldistancefontWeight;
              newArrData[index].label.fontFamily = item.labeldistancefontFamily;
              newArrData[index].yAxisIndex = item.datafx ? 1 : 0;
              newArrData[index].stack = item.stack;
              newArrData[index].symbol = (_item$symbolD = item.symbolD) === null || _item$symbolD === void 0 ? void 0 : _item$symbolD.symbolType; //折线点形状
              newArrData[index].symbolSize = (_item$symbolD2 = item.symbolD) === null || _item$symbolD2 === void 0 ? void 0 : _item$symbolD2.symbolSize; //折线点大小
              if (item.labeltype == 'line' || item.labeltype == 'arealine') {
                var _item$symbolD3, _item$symbolD4;
                newArrData[index].itemStyle.color = (_item$symbolD3 = item.symbolD) === null || _item$symbolD3 === void 0 ? void 0 : _item$symbolD3.lineCircleColor; // 折线点圆点颜色
                newArrData[index].itemStyle.borderColor = (_item$symbolD4 = item.symbolD) === null || _item$symbolD4 === void 0 ? void 0 : _item$symbolD4.borderColor; //折线点边框颜色
              }

              if (item.labeltype == 'bar') {
                newArrData[index].itemStyle.color = item.labelcolor;
              }
              newArrData[index].itemStyle.borderWidth = (_item$symbolD5 = item.symbolD) === null || _item$symbolD5 === void 0 ? void 0 : _item$symbolD5.borderWidth; //折线点边框大小

              newArrData[index].barWidth = (_item$barType7 = item.barType) === null || _item$barType7 === void 0 ? void 0 : _item$barType7.barWidth; //柱状图大小

              newArrData[index].data.push(itemchild.value);
            }
          });
        }
      }
    });
  }
  var xdata = [];
  var ydata = [];
  jsonData === null || jsonData === void 0 ? void 0 : jsonData.map(function (item) {
    if (!xdata.includes(item[props.xAxis])) {
      xdata.push(item[props.xAxis]);
    }
    ydata.push(item[props.yAxis]);
  });
  var echartsOption = {
    title: {
      text: propData === null || propData === void 0 ? void 0 : (_propData$title = propData.title) === null || _propData$title === void 0 ? void 0 : _propData$title.label
    },
    tooltip: {
      trigger: 'axis',
      // show:false,
      // backgroundColor: 'gray',
      // axisPointer: { // 坐标轴指示器，坐标轴触发有效，
      //   type: 'cross', // 默认为line，line直线，cross十字准星，shadow阴影
      //   crossStyle: {
      //     color: '#fff'
      //   }
      // },
      // 自定义提示框内容
      className: 'custom-tooltip-box',
      formatter: !propData.isShowTooltip ? null : propData.formatterrender,
      textStyle: {
        fontSize: 14
      }
    },
    // 图例
    legend: {
      data: legenddata,
      show: propData.legendshow,
      align: propData.legendType,
      itemGap: propData.legenditemGap,
      itemWidth: propData.legenditemWidth,
      itemHeight: propData.legenditemHeight,
      x: propData.legendx,
      // 图例水平居中
      textStyle: {
        color: propData.legendtextcolor,
        fontSize: propData.legendtextfontSize,
        padding: [0, propData.legendtextrightmarg, 0, propData.legendtextleftmarg]
      }
    },
    grid: {
      left: '6%',
      right: '5%',
      bottom: '4%',
      containLabel: true
    },
    toolbox: {
      // feature: {
      //     saveAsImage: {}
      // }
    },
    xAxis: {
      type: 'category',
      data: xdata,
      // splitNumber: propData?.xsplitNumber,
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: propData === null || propData === void 0 ? void 0 : propData.axisPointercolor
        }
      },
      name: propData !== null && propData !== void 0 && propData.isAxisaxisLabel ? '' : propData.xAxisaxisLabel,
      // 轴单位
      nameTextStyle: {
        color: propData === null || propData === void 0 ? void 0 : propData.xnamecolor,
        fontSize: propData === null || propData === void 0 ? void 0 : propData.xnamefontSize,
        fontWeight: propData === null || propData === void 0 ? void 0 : propData.xnamefontWeight,
        fontFamily: propData === null || propData === void 0 ? void 0 : propData.xnamefontFamily,
        padding: [0, 0, 0, propData === null || propData === void 0 ? void 0 : propData.xnamepaddingleft]
      },
      // 轴标签
      axisLabel: {
        show: propData.XaxisLabel,
        // 不显示坐标轴上的文字
        color: propData === null || propData === void 0 ? void 0 : propData.xLabelcolor,
        fontSize: propData === null || propData === void 0 ? void 0 : propData.xLabelfontSize,
        fontWeight: propData === null || propData === void 0 ? void 0 : propData.xLabelfontWeight,
        interval: 'auto',
        // 自动调整标签间隔  
        verticalAlign: 'middle',
        // 垂直居中
        fontFamily: propData === null || propData === void 0 ? void 0 : propData.xLabelfontFamily,
        rotate: propData === null || propData === void 0 ? void 0 : propData.xLabelrotate,
        align: propData === null || propData === void 0 ? void 0 : propData.xLabelalign,
        // 对齐方式为居中对齐  

        // interval:'auto',
        margin: propData === null || propData === void 0 ? void 0 : propData.xLabelmargin,
        formatter: function formatter(value, index) {
          if (propData !== null && propData !== void 0 && propData.isAxisaxisLabel) {
            return value + ' ' + propData.xAxisaxisLabel;
          } else {
            return value;
          }
        }
      },
      // axisTick: {
      //     alignWithLabel: true
      //   },
      // axisLabel: {  
      //                 interval: 'auto', // 自动调整标签间隔  
      //         rotate: 0, // 标签不旋转  
      //         align: 'center', // 对齐方式为居中对齐  
      //         margin:30,
      //         verticalAlign: 'middle', // 垂直居中
      //     },  
      //轴线
      axisLine: {
        show: propData === null || propData === void 0 ? void 0 : propData.XaxisLine,
        symbol: (propData === null || propData === void 0 ? void 0 : propData.XaxisLinesymbol) == 'arrow' ? ['none', 'arrow'] : propData === null || propData === void 0 ? void 0 : propData.XaxisLinesymbol,
        lineStyle: {
          color: propData === null || propData === void 0 ? void 0 : propData.XaxisLinecolor
        }
      },
      // axisTick轴刻度
      axisTick: {
        show: propData === null || propData === void 0 ? void 0 : propData.XaxisaxisTick,
        alignWithLabel: propData === null || propData === void 0 ? void 0 : propData.XaxisaxisalignWithLabel
      },
      // 网格线
      splitLine: {
        show: propData === null || propData === void 0 ? void 0 : propData.XsplitLine,
        alignWithLabel: propData === null || propData === void 0 ? void 0 : propData.XaxisaxisalignWitsplitLine,
        lineStyle: {
          //y轴分隔线样式设置
          color: propData === null || propData === void 0 ? void 0 : propData.xsplitLinecolor,
          //颜色
          type: propData === null || propData === void 0 ? void 0 : propData.XsplitLinetype //虚线
        }
      }
    },

    yAxis: [
    // y
    {
      min: propData === null || propData === void 0 ? void 0 : propData.ymin,
      max: propData === null || propData === void 0 ? void 0 : propData.ymax,
      // interval: "auto",
      splitNumber: propData === null || propData === void 0 ? void 0 : propData.ysplitNumber,
      type: 'value',
      scale: true,
      name: propData !== null && propData !== void 0 && propData.isAxisaxisLabel ? '' : propData.yAxisaxisLabel,
      // 轴单位
      nameTextStyle: {
        color: propData === null || propData === void 0 ? void 0 : propData.ynamecolor,
        fontSize: propData === null || propData === void 0 ? void 0 : propData.ynamefontSize,
        fontWeight: propData === null || propData === void 0 ? void 0 : propData.ynamefontWeight,
        fontFamily: propData === null || propData === void 0 ? void 0 : propData.ynamefontFamily,
        padding: [propData === null || propData === void 0 ? void 0 : propData.ynamepaddingTop, propData === null || propData === void 0 ? void 0 : propData.ynamepaddingRight, propData === null || propData === void 0 ? void 0 : propData.ynamepaddingButtom, propData === null || propData === void 0 ? void 0 : propData.ynamepaddingleft]
      },
      // 轴标签
      axisLabel: {
        show: propData.yaxisLabel,
        // 不显示坐标轴上的文字
        color: propData === null || propData === void 0 ? void 0 : propData.yLabelcolor,
        fontSize: propData === null || propData === void 0 ? void 0 : propData.yLabelfontSize,
        fontWeight: propData === null || propData === void 0 ? void 0 : propData.yLabelfontWeight,
        fontFamily: propData === null || propData === void 0 ? void 0 : propData.yLabelfontFamily,
        rotate: propData === null || propData === void 0 ? void 0 : propData.yLabelrotate,
        margin: propData === null || propData === void 0 ? void 0 : propData.yLabelmargin,
        formatter: function formatter(value, index) {
          if (propData !== null && propData !== void 0 && propData.isAxisaxisLabel) {
            return value + ' ' + propData.yAxisaxisLabel;
          } else {
            return value;
          }
        }
      },
      //轴线
      axisLine: {
        show: propData === null || propData === void 0 ? void 0 : propData.yaxisLine,
        symbol: (propData === null || propData === void 0 ? void 0 : propData.yaxisLinesymbol) == 'arrow' ? ['none', 'arrow'] : propData === null || propData === void 0 ? void 0 : propData.yaxisLinesymbol,
        lineStyle: {
          color: propData === null || propData === void 0 ? void 0 : propData.YaxisLinecolor
        }
      },
      // axisTick轴刻度
      axisTick: {
        show: propData === null || propData === void 0 ? void 0 : propData.yaxisaxisTick
      },
      // 网格线
      splitLine: {
        show: propData === null || propData === void 0 ? void 0 : propData.ysplitLine,
        lineStyle: {
          //y轴分隔线样式设置
          color: propData === null || propData === void 0 ? void 0 : propData.ysplitLinecolor,
          //颜色
          type: propData === null || propData === void 0 ? void 0 : propData.ysplitLinetype //虚线
        }
      }
    },
    // z
    {
      type: 'value',
      scale: true,
      min: propData === null || propData === void 0 ? void 0 : propData.zmin,
      max: propData === null || propData === void 0 ? void 0 : propData.zmax,
      // interval: "auto",
      // splitNumber: propData?.zsplitNumber,
      // interval: 5,
      name: propData !== null && propData !== void 0 && propData.isAzisaxisLabel ? '' : propData.zAxisaxisLabel,
      // 轴单位
      nameTextStyle: {
        color: propData === null || propData === void 0 ? void 0 : propData.znamecolor,
        fontSize: propData === null || propData === void 0 ? void 0 : propData.znamefontSize,
        fontWeight: propData === null || propData === void 0 ? void 0 : propData.znamefontWeight,
        fontFamily: propData === null || propData === void 0 ? void 0 : propData.znamefontFamily,
        padding: [propData === null || propData === void 0 ? void 0 : propData.znamepaddingTop, propData === null || propData === void 0 ? void 0 : propData.znamepaddingRight, propData === null || propData === void 0 ? void 0 : propData.znamepaddingButtom, propData === null || propData === void 0 ? void 0 : propData.znamepaddingleft]
      },
      // 轴标签
      axisLabel: {
        show: propData.zaxisLabel,
        // 不显示坐标轴上的文字
        color: propData === null || propData === void 0 ? void 0 : propData.zLabelcolor,
        fontSize: propData === null || propData === void 0 ? void 0 : propData.zLabelfontSize,
        fontWeight: propData === null || propData === void 0 ? void 0 : propData.zLabelfontWeight,
        fontFamily: propData === null || propData === void 0 ? void 0 : propData.zLabelfontFamily,
        rotate: propData === null || propData === void 0 ? void 0 : propData.zLabelrotate,
        margin: propData === null || propData === void 0 ? void 0 : propData.zLabelmargin,
        formatter: function formatter(value, index) {
          if (propData !== null && propData !== void 0 && propData.isAzisaxisLabel) {
            return value + ' ' + propData.zAxisaxisLabel;
          } else {
            return value;
          }
        }
      },
      //轴线
      axisLine: {
        show: propData === null || propData === void 0 ? void 0 : propData.zaxisLine,
        symbol: (propData === null || propData === void 0 ? void 0 : propData.zaxisLinesymbol) == 'arrow' ? ['none', 'arrow'] : propData === null || propData === void 0 ? void 0 : propData.zaxisLinesymbol,
        lineStyle: {
          color: propData === null || propData === void 0 ? void 0 : propData.ZaxisLinecolor
        }
      },
      // axisTick轴刻度
      axisTick: {
        show: propData === null || propData === void 0 ? void 0 : propData.zaxisaxisTick
      },
      // 网格线
      splitLine: {
        show: propData === null || propData === void 0 ? void 0 : propData.zsplitLine,
        lineStyle: {
          //y轴分隔线样式设置
          color: propData === null || propData === void 0 ? void 0 : propData.zsplitLinecolor,
          //颜色
          type: propData === null || propData === void 0 ? void 0 : propData.zsplitLinetype //虚线
        }
      }
    }],

    series: [].concat(newArrData)
  };
  useEffect(function () {
    var _chartRef$current;
    (_chartRef$current = chartRef.current) === null || _chartRef$current === void 0 ? void 0 : _chartRef$current.getEchartsInstance().setOption(echartsOption);
  }, [echartsOption]);
  useEffect(function () {
    var _chartRef$current2;
    // chartRef.current?.getEchartsInstance().clear();
    (_chartRef$current2 = chartRef.current) === null || _chartRef$current2 === void 0 ? void 0 : _chartRef$current2.getEchartsInstance().setOption(echartsOption);
  }, []);
  return (
    /*#__PURE__*/
    // jsonData?.length !== 0 ?
    React.createElement(ReactEcharts, {
      ref: chartRef,
      option: {
        echartsOption: echartsOption
      },
      theme: "clear",
      style: {
        height: props.height,
        width: props.width,
        display: props.none ? 'none' : 'inline-block'
      }
    })
  );
};
export default BarChart2;