import React, { Component, PureComponent } from 'react';
import Icon from 'icon';
import cx from 'classnames';
import PropTypes from 'prop-types';

export default class Progress extends (PureComponent || Component) {
  static propTypes = {
    className: PropTypes.string,
    prefix: PropTypes.string,
    type: PropTypes.string,
    percent: PropTypes.number,
    showInfo: PropTypes.bool,
    status: PropTypes.string,
    format: PropTypes.func,
    strokeWidth: PropTypes.number,
    width: PropTypes.number,
    style: PropTypes.object
  };

  static defaultProps = {
    type: 'line',
    percent: 0,
    showInfo: true,
    className: '',
    prefix: 'zent',
    strokeWidth: 10
  };

  render() {
    const {
      type,
      percent,
      showInfo,
      status,
      className,
      prefix,
      format,
      strokeWidth,
      width,
      style
    } = this.props;

    const progressWidth = width || (type === 'circle' ? 132 : 580);

    const containerCls = cx(
      `${prefix}-progress`,
      `${prefix}-progress-${type}`,
      {
        [className]: !!className
      }
    );

    const statusCls = cx({
      [`${prefix}-progress-inprogress`]:
        percent < 100 && status !== 'exception',
      [`${prefix}-progress-exception`]: percent < 100 && status === 'exception',
      [`${prefix}-progress-success`]: percent >= 100
    });

    const renderInfoCont = () => {
      let infoCont;
      if (format) {
        infoCont = format(percent);
      } else {
        infoCont = `${percent}%`;
        if (percent >= 100) {
          infoCont = (
            <Icon type={type === 'circle' ? 'check' : 'check-circle'} />
          );
        } else if (status === 'exception') {
          infoCont = (
            <Icon type={type === 'circle' ? 'close' : 'close-circle'} />
          );
        }
      }
      return infoCont;
    };

    const renderProgressCont = () => {
      let progressCont;
      switch (type) {
        case 'circle':
          progressCont = (
            <div
              className={statusCls}
              style={{
                width: progressWidth,
                height: progressWidth
              }}
            >
              <div
                className={`${prefix}-progress-wrapper`}
                style={{
                  borderRadius: progressWidth,
                  borderWidth: strokeWidth
                }}
              />
              <svg className={`${prefix}-progress-inner`}>
                <circle
                  className={`${prefix}-progress-inner-path`}
                  cx={progressWidth / 2}
                  cy={progressWidth / 2}
                  r={(progressWidth - strokeWidth) / 2}
                  style={{
                    strokeWidth,
                    strokeDasharray: Math.PI * (progressWidth - strokeWidth),
                    strokeDashoffset:
                      Math.PI *
                      (progressWidth - strokeWidth) *
                      (100 - percent) /
                      100
                  }}
                />
              </svg>
              {showInfo ? (
                <div
                  className={`${prefix}-progress-info`}
                  style={{ lineHeight: `${progressWidth}px` }}
                >
                  {renderInfoCont()}
                </div>
              ) : null}
            </div>
          );
          break;
        case 'line':
        default:
          progressCont = (
            <div className={statusCls}>
              <div
                className={`${prefix}-progress-wrapper`}
                style={{
                  width: progressWidth,
                  height: strokeWidth,
                  borderRadius: strokeWidth
                }}
              >
                <div
                  className={`${prefix}-progress-inner`}
                  style={{
                    width: `${percent}%`,
                    height: strokeWidth,
                    borderRadius: strokeWidth
                  }}
                />
              </div>
              {showInfo ? (
                <div className={`${prefix}-progress-info`}>
                  {renderInfoCont()}
                </div>
              ) : null}
            </div>
          );
          break;
      }
      return progressCont;
    };

    return (
      <div className={containerCls} style={style}>
        {renderProgressCont()}
      </div>
    );
  }
}

@@ -534,16 +534,156 @@
 s.object
+,%0A    normalColor: PropTypes.string,%0A    exceptionColor: PropTypes.string,%0A    successColor: PropTypes.string,%0A    bgColor: PropTypes.string
 %0A  %7D;%0A%0A 
@@ -996,16 +996,92 @@
    style
+,%0A      normalColor,%0A      exceptionColor,%0A      successColor,%0A      bgColor
 %0A    %7D =
@@ -1795,32 +1795,46 @@
            %3CIcon
+%0A             
  type=%7Btype === 
@@ -1861,32 +1861,120 @@
  'check-circle'%7D
+%0A              style=%7B%7B%0A                color: successColor%0A              %7D%7D%0A           
  /%3E%0A          );
@@ -2059,16 +2059,30 @@
    %3CIcon
+%0A             
  type=%7Bt
@@ -2129,64 +2129,381 @@
 le'%7D
- /%3E%0A          );%0A        %7D%0A      %7D%0A      return infoCont
+%0A              style=%7B%7B%0A                color: exceptionColor%0A              %7D%7D%0A            /%3E%0A          );%0A        %7D%0A      %7D%0A      return infoCont;%0A    %7D;%0A%0A    const getCurrentColor = () =%3E %7B%0A      if (percent %3C 100 && status === 'exception') %7B%0A        return exceptionColor;%0A      %7D%0A      if (percent %3E= 100) %7B%0A        return successColor;%0A      %7D%0A      return normalColor
 ;%0A  
@@ -3008,32 +3008,72 @@
 dth: strokeWidth
+,%0A                  borderColor: bgColor
 %0A               
@@ -3395,32 +3395,79 @@
        style=%7B%7B%0A
+                    stroke: getCurrentColor(),%0A
                 
@@ -4329,32 +4329,71 @@
        style=%7B%7B%0A
+                  background: bgColor,%0A
                 
@@ -4631,32 +4631,83 @@
        style=%7B%7B%0A
+                    background: getCurrentColor(),%0A
                 

add successColor, normalColor, bgColor in progress