import "choerodon-ui/lib/spin/style";
import _Spin from "@hzero-front-ui/c7n-ui/lib/Spin";
import React, { Component } from 'react';
import { injectIntl } from 'react-intl';
import { observer } from 'mobx-react-lite';
import { withRouter } from 'react-router-dom';
import ReactEcharts from 'echarts-for-react';
import _ from 'lodash';
import "../../code-manager/contents/ciPipelineManage/index.less";
import { getAxis } from "../util";
var BuildTable = withRouter(injectIntl(observer(function (props) {
  var formatMessage = props.intl.formatMessage,
      top = props.top,
      bottom = props.bottom,
      languageType = props.languageType,
      ReportsStore = props.ReportsStore,
      echartsLoading = props.echartsLoading,
      height = props.height;

  function getOption() {
    var _ReportsStore$getBuil = ReportsStore.getBuildNumber,
        createDates = _ReportsStore$getBuil.createDates,
        pipelineFrequencys = _ReportsStore$getBuil.pipelineFrequencys,
        pipelineSuccessFrequency = _ReportsStore$getBuil.pipelineSuccessFrequency,
        pipelineFailFrequency = _ReportsStore$getBuil.pipelineFailFrequency;
    var val = [{
      name: "".concat(formatMessage({
        id: "".concat(languageType, ".build-number.fail")
      }))
    }, {
      name: "".concat(formatMessage({
        id: "".concat(languageType, ".build-number.success")
      }))
    }, {
      name: "".concat(formatMessage({
        id: "".concat(languageType, ".build-number.total")
      }))
    }];
    val[0].value = _.reduce(pipelineFailFrequency, function (sum, n) {
      return sum + n;
    }, 0);
    val[1].value = _.reduce(pipelineSuccessFrequency, function (sum, n) {
      return sum + n;
    }, 0);
    val[2].value = _.reduce(pipelineFrequencys, function (sum, n) {
      return sum + n;
    }, 0);
    var startTime = ReportsStore.getStartTime;
    var endTime = ReportsStore.getEndTime;

    var _getAxis = getAxis(startTime, endTime, createDates, {
      pipelineFailFrequency: pipelineFailFrequency,
      pipelineSuccessFrequency: pipelineSuccessFrequency,
      pipelineFrequencys: pipelineFrequencys
    }),
        xAxis = _getAxis.xAxis,
        yAxis = _getAxis.yAxis;

    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'none'
        },
        backgroundColor: 'rgba(0,0,0,0.75)',
        textStyle: {
          color: '#fff'
        },
        extraCssText: '0px 2px 8px 0px rgba(0,0,0,0.12);padding:15px 17px',
        formatter: function formatter(params) {
          if (params[0].value || params[1].value) {
            var total = params[0].value + params[1].value;
            return "<div>\n              <div>".concat(formatMessage({
              id: "".concat(languageType === 'report' ? 'branch' : 'dashboard', ".issue.date")
            }), "\uFF1A").concat(params[1].name, "</div>\n              <div><span class=\"c7n-echarts-tooltip\" style=\"background-color:").concat(params[1].color, ";\"></span>").concat(formatMessage({
              id: "".concat(languageType, ".build-number.build")
            })).concat(params[1].seriesName, "\uFF1A").concat(params[1].value, "</div>\n              <div><span class=\"c7n-echarts-tooltip\" style=\"background-color:").concat(params[0].color, ";\"></span>").concat(formatMessage({
              id: "".concat(languageType, ".build-number.build")
            })).concat(params[0].seriesName, "\uFF1A").concat(params[0].value, "</div>\n              <div>").concat(formatMessage({
              id: "".concat(languageType, ".build-number.build")
            })).concat(formatMessage({
              id: "".concat(languageType, ".build-number.total")
            }), "\uFF1A").concat(total, "</div>\n              <div>").concat(formatMessage({
              id: "".concat(languageType, ".build-number.build")
            })).concat(formatMessage({
              id: "".concat(languageType, ".build-number.success.rate")
            }), "\uFF1A").concat((params[0].value / total * 100).toFixed(2), "%</div>\n            <div>");
          }
        }
      },
      legend: {
        left: 'right',
        itemWidth: 14,
        itemGap: 20,
        padding: [0, 5, 5, 5],
        formatter: function formatter(name) {
          var count = 0;

          _.map(val, function (data) {
            if (data.name === name) {
              count = data.value;
            }
          });

          return "".concat(name, "\uFF1A").concat(count);
        },
        selectedMode: false
      },
      grid: {
        left: '2%',
        right: '3%',
        bottom: bottom || '3%',
        top: "".concat(top),
        containLabel: true
      },
      xAxis: {
        type: 'category',
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#eee',
            type: 'solid',
            width: 2
          }
        },
        axisLabel: {
          margin: 13,
          textStyle: {
            color: 'rgba(0, 0, 0, 0.65)',
            fontSize: 12
          },
          formatter: function formatter(value) {
            return "".concat(value.substr(5).replace('-', '/'));
          }
        },
        splitLine: {
          lineStyle: {
            color: ['#eee'],
            width: 1,
            type: 'solid'
          }
        },
        data: xAxis
      },
      yAxis: {
        name: "".concat(formatMessage({
          id: "".concat(languageType, ".build-number.yAxis")
        })),
        type: 'value',
        nameTextStyle: {
          fontSize: 13,
          color: '#000',
          padding: [0, 5, 2, 5]
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: '#eee',
            type: 'solid',
            width: 2
          }
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(0, 0, 0, 0.65)',
            fontSize: 12
          }
        },
        splitLine: {
          lineStyle: {
            color: '#eee',
            type: 'solid',
            width: 1
          }
        },
        min: yAxis.pipelineFrequencys && yAxis.pipelineFrequencys.length ? null : 0,
        max: yAxis.pipelineFrequencys && yAxis.pipelineFrequencys.length ? null : 4
      },
      series: [{
        name: "".concat(formatMessage({
          id: "".concat(languageType, ".build-number.success")
        })),
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: '#00BFA5',
          emphasis: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.20)'
          }
        },
        stack: 'total',
        data: yAxis.pipelineSuccessFrequency
      }, {
        name: "".concat(formatMessage({
          id: "".concat(languageType, ".build-number.fail")
        })),
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: '#F44336',
          emphasis: {
            shadowBlur: 10,
            shadowColor: 'rgba(0,0,0,0.20)'
          }
        },
        stack: 'total',
        data: yAxis.pipelineFailFrequency
      }, {
        name: "".concat(formatMessage({
          id: "".concat(languageType, ".build-number.total")
        })),
        type: 'bar',
        color: '#FFF',
        stack: 'total'
      }]
    };
  }

  return /*#__PURE__*/React.createElement(_Spin, {
    spinning: echartsLoading
  }, /*#__PURE__*/React.createElement(ReactEcharts, {
    style: {
      height: height
    },
    option: getOption()
  }));
})));
export default BuildTable;