import * as React from 'react';
import { useRef, useEffect } from 'react';
import ReactEcharts from 'echarts-for-react';
// import logo from "../../assets/img/kongzhuangtai.png"

var BarChart = function BarChart(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',
      barWidth: 20,
      tooltip: {
        // valueFormatter: function (value: any) {
        //     return value + ' ml';
        // }
      },
      data: [],
      lineStyle: {
        color: '#000',
        width: 1
      },
      itemStyle: {
        color: '#0079f2',
        borderColor: "none",
        // 折线点边框颜色
        borderWidth: 0,
        // 折线点边框大小
        normal: null
      },
      symbol: 'circle',
      // 折线点形状
      symbolSize: 6,
      // 折线点大小
      label: {
        show: true,
        position: 'top',
        distance: 5,
        // Position of labels
        color: '#000',
        fontSize: 12,
        fontWeight: 400,
        fontFamily: ''
      }
    };
  });
  console.log(propData === null || propData === void 0 ? void 0 : propData.xloptions, '系列数组');
  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;
  }, {}));
  console.log('mergedArray', mergedArray);
  if (propData !== null && propData !== void 0 && propData.xloptions) {
    propData === null || propData === void 0 ? void 0 : propData.xloptions.forEach(function (item, index) {
      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$barType3;
            newArrData[index].smooth = item.smooth;
            newArrData[index].showSymbol = item.showSymbol;
            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;
                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% 处的颜色
                    }]
                  }
                };
              }
            } else {
              newArrData[index].itemStyle.normal = null;
            }

            // if(item.labeltype == "line"){
            //     const end = item.linegraph.endArrow ? 'arrow' : 'none' 
            //     const start = item.linegraph.startCircle ? 'circle' : 'none'
            //     // 是否显示标线
            //      let  markLine = {
            //         symbol: [ start ,end], // 箭头
            //         data: [
            //             {
            //                 name: '最小阈值',
            //                 yAxis: item.marking.markLineoneyAxis,
            //                 label: {
            //                     position: item.marking.markLineonelabelType, // 表现内容展示的位置
            //                     formatter:item.marking.markLineoneTitle + '(' + item.marking.markLineoneyAxis + ')',  // 标线展示的内容
            //                     color: item.marking.markLineonecolor  // 展示内容颜色
            //                 },
            //                 lineStyle: {
            //                     color: item.marking.markLineonelineStylecolor,
            //                     width: item.marking.markLineonelineStylewidth,
            //                     type: item.marking.markLineonelineStyletype //虚线
            //                 },
            //             },
            //             {
            //                 name: '最大阈值',
            //                 yAxis: item.marking.markLinetwoyAxis,
            //                 label: {
            //                     position: item.marking.markLinetwolabelType, // 表现内容展示的位置
            //                     formatter: item.marking.markLinetwoTitle + '(' + item.marking.markLinetwoyAxis + ')',  // 标线展示的内容
            //                     color: item.marking.markLinetwocolor  // 展示内容颜色
            //                 },
            //                 lineStyle: {
            //                     color: item.marking.markLinetwolineStylecolor,
            //                     width: item.marking.markLinetwolineStylewidth,
            //                     type: item.marking.markLinetwolineStyletype //虚线
            //                 },
            //             },
            //         ],
            //     }

            //     newArrData[index].markLine = markLine

            // }else{
            //     newArrData[index].markLine = null
            // }

            // newArrData[index].tooltip.valueFormatter = function () {
            //     console.log('propData',propData);
            //     return itemchild.value + ' ml';
            // }
            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].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$barType3 = item.barType) === null || _item$barType3 === void 0 ? void 0 : _item$barType3.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: 'shadow', // 默认为line，line直线，cross十字准星，shadow阴影
      //   crossStyle: {
      //     color: '#fff'
      //   }
      // },
      // 自定义提示框内容
      formatter: !propData.isShowTooltip ? null : function (data) {
        // console.log('data',data);
        // console.log('newArrData',newArrData);
        console.log('propData', propData);
        var obj = propData.data.find(function (item) {
          return item[propData.xAxis] == data[0].axisValue;
        });
        var str = '';
        if (obj[propData.tooltipTitle]) {
          str = "<div style=\"color:" + propData.tooltipTitleColor + ";font-size: " + propData.tooltipTitleSize + "px;font-weight: bold;margin-bottom: 5px;\">" + obj[propData.tooltipTitle] + "</br></div>";
        } else {
          str = '';
        }
        var toolTipStyle = {
          display: propData.tooltipFb ? 'block' : 'none',
          fontSize: propData.tooltipFbSize + "px",
          color: "" + propData.tooltipFbColor
        };
        var divStyle = "display: " + toolTipStyle.display + "; font-size: " + toolTipStyle.fontSize + "; color: " + toolTipStyle.color;
        mergedArray[data[0].dataIndex].forEach(function (item, index) {
          var _newArrData$index$ite, _newArrData$index$ite2;
          str = str + ("\n                    <div style=\"font-size: 14px;padding: 4px 0\"><div style=\"display:" + (propData.tooltipImg ? 'inline-block' : 'none') + ";\n                        margin-right:4px;width:10px;height:10px;\n                        background:" + (newArrData[index].itemStyle.normal ? "linear-gradient(" + ((_newArrData$index$ite = newArrData[index].itemStyle.normal.color.colorStops[0]) === null || _newArrData$index$ite === void 0 ? void 0 : _newArrData$index$ite.color) + ", " + ((_newArrData$index$ite2 = newArrData[index].itemStyle.normal.color.colorStops[1]) === null || _newArrData$index$ite2 === void 0 ? void 0 : _newArrData$index$ite2.color) + ")" : "" + newArrData[index].lineStyle.color) + "\"></div>\n                       <div style=\"display:inline-block\">" + item[propData.tooltipName] + " \n                       <span>" + (item[propData.tooltipValue] ? item[propData.tooltipValue] : '') + "</span> \n                       <span>" + (item[propData.tooltipUnit] ? item[propData.tooltipUnit] : '') + "</span>\n                       </div>\n                      \n                       <div style=\"" + divStyle + "\">\n                       <span style=\"padding-left:" + propData.tooltipFbLeftSize + "px\">" + item[propData.tooltipFbLeft] + "</span> \n                       <span style=\"margin-left:" + propData.tooltipFbSpace + "px\">" + item[propData.tooltipFbRight] + "</span>\n                    </div>\n                    ");
        });
        return str;
      },
      textStyle: {
        fontSize: 14
      }
    },
    legend: {
      data: xdata
    },
    grid: {
      left: '6%',
      right: '5%',
      bottom: '4%',
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      data: xdata,
      axisPointer: {
        type: 'shadow'
      },
      name: 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,
        fontFamily: propData === null || propData === void 0 ? void 0 : propData.xLabelfontFamily,
        rotate: propData === null || propData === void 0 ? void 0 : propData.xLabelrotate,
        margin: propData === null || propData === void 0 ? void 0 : propData.xLabelmargin
        // formatter: function (value, index) {
        //     return value + ' ' + propData.xAxisaxisLabel
        // }
      },

      //轴线
      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
      },
      // axisTick轴刻度
      axisTick: {
        show: propData === null || propData === void 0 ? void 0 : propData.XaxisaxisTick
      },
      // 网格线
      splitLine: {
        show: propData === null || propData === void 0 ? void 0 : propData.XsplitLine,
        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: 0,
      // max: 100,
      interval: 5,
      type: 'value',
      scale: true,
      name: 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 (value, index) {
        //     return value + ' ' + propData.xAxisaxisLabel
        // }
      },

      //轴线
      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
      },
      // 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: 0,
      max: 25,
      interval: 5,
      name: 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 (value, index) {
        //     return value + ' ' + propData.xAxisaxisLabel
        // }
      },

      //轴线
      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
      },
      // 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
      }
    })
  );
};
export default BarChart;