import { _ as __rest } from '../_verture/tslib.es6-55ed4bd2.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { Circle } from 'rc-progress';
import CompleteIcon from '@iam-com/icons/CheckCircleF';
import CloseCircleFilled from '@iam-com/icons/CloseCircleF';
import Check from '@iam-com/icons/Check';
import CloseIcon from '@iam-com/icons/Close';
import { a as $rcPrefixCls, $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';

var Steps = function Steps(props) {
  var steps = props.steps,
    _props$percent = props.percent,
    percent = _props$percent === void 0 ? 0 : _props$percent,
    _props$strokeWidth = props.strokeWidth,
    strokeWidth = _props$strokeWidth === void 0 ? 8 : _props$strokeWidth,
    strokeColor = props.strokeColor,
    trailColor = props.trailColor,
    children = props.children;
  /** 计算出应该高亮多少步 **/
  var current = typeof percent === "number" ? Math.round(steps * (percent / 100)) : 1;
  var styledSteps = [];
  for (var i = 0; i < steps; i += 1) {
    styledSteps.push(jsx("div", {
      className: i <= current - 1 ? "steps-item steps-item-active" : "steps-item",
      style: {
        backgroundColor: i <= current - 1 ? strokeColor : trailColor,
        width: 14,
        height: strokeWidth
      }
    }, i));
  }
  return jsxs("div", Object.assign({
    className: "steps-outer"
  }, {
    children: [styledSteps, children]
  }));
};

/**
* 判断进度条传的百分比参数是否规范
* @param {number | undefined} progress 方法入参说明
* @return {numner} 百分比值
*/
function validProgress(progress) {
  if (!progress || progress < 0) {
    return 0;
  }
  if (progress > 100) {
    return 100;
  }
  return progress;
}

/**
* 转换 百分比 到 样式格式
 * {
 *     "0%": "#afc163",
 *     "75%": "#009900",
 *     "50%": "green", // ====> '#afc163 0%, #66FF00 25%, #00CC00 50%, #009900 75%, #ffffff 100%'
 *     "25%": "#66FF00",
 *     "100%": "#ffffff"
 *   }
* @param gradients 渐变的参数
* @return {string} 样式值
*/
var sortGradient = function sortGradient(gradients) {
  var tempArr = [];
  Object.keys(gradients).forEach(function (key) {
    // 拿到百分比的数字
    var formattedKey = parseFloat(key.replace(/%/g, ""));
    // 进行序列化
    if (!isNaN(formattedKey)) {
      tempArr.push({
        key: formattedKey,
        value: gradients[key]
      });
    }
  });
  // 排序 从小到大
  tempArr = tempArr.sort(function (a, b) {
    return a.key - b.key;
  });
  return tempArr.map(function (_ref) {
    var key = _ref.key,
      value = _ref.value;
    return "".concat(value, " ").concat(key, "%");
  }).join(", ");
};
/**
* 转换传进来 渐变的参数 为css样式
 * {
 *     "0%": "#afc163",
 *     "25%": "#66FF00",
 *     "50%": "#00CC00", // ====>  linear-gradient(to right, #afc163 0%, #66FF00 25%,
 *     "75%": "#009900", //        #00CC00 50%, #009900 75%, #ffffff 100%)
 *     "100%": "#ffffff"
 *   }
 *
 *   {
 *     "from": "#afc163",
 *     "to": "#66FF00",// ====>  linear-gradient(to right, #afc163, #66FF00)
 *   }
 *
* @param {string} strokeColor 颜色值
* @return   返回 backgroundImage 的样式值
*/
var handleGradient = function handleGradient(strokeColor, directionConfig) {
  var _strokeColor$from = strokeColor.from,
    from = _strokeColor$from === void 0 ? "#3D66F8" : _strokeColor$from,
    _strokeColor$to = strokeColor.to,
    to = _strokeColor$to === void 0 ? "#4F93F0" : _strokeColor$to,
    _strokeColor$directio = strokeColor.direction,
    direction = _strokeColor$directio === void 0 ? directionConfig === "rtl" ? "to left" : "to right" : _strokeColor$directio,
    rest = __rest(strokeColor, ["from", "to", "direction"]);
  // 剩余参数有值说明除了from to direction 还传了 另外的参数
  if (Object.keys(rest).length !== 0) {
    var sortedGradients = sortGradient(rest);
    return {
      backgroundImage: "linear-gradient(".concat(direction, ", ").concat(sortedGradients, ")")
    };
  }
  return {
    backgroundImage: "linear-gradient(".concat(direction, ", ").concat(from, ", ").concat(to, ")")
  };
};
var Line = function Line(props) {
  var directionConfig = props.direction,
    percent = props.percent,
    strokeWidth = props.strokeWidth,
    strokeColor = props.strokeColor,
    strokeLinecap = props.strokeLinecap,
    trailColor = props.trailColor;
  /** 进度条高亮部分的颜色样式  **/
  var backgroundProps = strokeColor && typeof strokeColor !== "string" ? handleGradient(strokeColor, directionConfig) : {
    background: strokeColor
  };
  /** 进度条轨道部分的颜色样式 **/
  var trailStyle = trailColor ? {
    backgroundColor: trailColor
  } : undefined;
  /** 进度条百分比的样式 **/
  var percentStyle = Object.assign({
    width: "".concat(validProgress(percent), "%"),
    height: strokeWidth || 8,
    borderRadius: strokeLinecap === "square" ? 0 : ""
  }, backgroundProps);
  return jsx("div", Object.assign({
    className: "trail-bar",
    style: trailStyle
  }, {
    children: jsx("div", {
      className: "active-bar",
      style: percentStyle
    })
  }));
};

var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer {\n  display: flex;\n  margin-right: 8px;\n  margin-bottom: 8px;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-inner {\n  width: 100%;\n  /*.component-progress-line {\n    height: 10px;\n    width: 100%;\n  }*/\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-inner .steps-outer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-inner .steps-outer .steps-item {\n  flex-shrink: 0;\n  min-width: 2px;\n  margin-right: 2px;\n  background: #f3f3f3;\n  transition: all 0.3s;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-inner .steps-outer .steps-item-active {\n  background-color: rgb(54, 102, 214);\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-inner .trail-bar {\n  position: relative;\n  display: inline-block;\n  width: 100%;\n  overflow: hidden;\n  vertical-align: middle;\n  background-color: rgba(171, 176, 185, 0.2);\n  border-radius: 100px;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-inner .trail-bar .active-bar {\n  position: relative;\n  background-color: rgb(54, 102, 214);\n  border-radius: 100px;\n  transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-text {\n  min-width: 40px;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: left;\n  color: rgb(54, 102, 214);\n  margin-left: 12px;\n  white-space: nowrap;\n  vertical-align: middle;\n  word-break: normal;\n  display: flex;\n  align-items: center;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-text svg {\n  width: 14px;\n  height: 14px;\n  position: relative;\n  top: 2px;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-text svg.success {\n  color: rgb(83, 195, 27) !important;\n}\n.paraui-v3-progress.paraui-v3-progress-line .progress-outer .progress-text svg.error {\n  color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-progress.paraui-v3-progress-circle, .paraui-v3-progress.paraui-v3-progress-dashboard {\n  display: inline-block;\n  position: relative;\n  margin: 0 5px;\n}\n.paraui-v3-progress.paraui-v3-progress-circle .progress-outer .progress-text, .paraui-v3-progress.paraui-v3-progress-dashboard .progress-outer .progress-text {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 100%;\n  margin: 0;\n  padding: 0;\n  color: rgb(54, 102, 214);\n  font-size: 1em;\n  line-height: 1;\n  white-space: normal;\n  text-align: center;\n  transform: translate(-50%, -50%);\n}\n.paraui-v3-progress.paraui-v3-progress-circle .progress-outer .progress-text svg, .paraui-v3-progress.paraui-v3-progress-dashboard .progress-outer .progress-text svg {\n  width: 2em;\n  height: 2em;\n}\n.paraui-v3-progress.paraui-v3-progress-circle .progress-outer .progress-text svg.success, .paraui-v3-progress.paraui-v3-progress-dashboard .progress-outer .progress-text svg.success {\n  color: rgb(83, 195, 27) !important;\n}\n.paraui-v3-progress.paraui-v3-progress-circle .progress-outer .progress-text svg.error, .paraui-v3-progress.paraui-v3-progress-dashboard .progress-outer .progress-text svg.error {\n  color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-progress.paraui-v3-progress-success-status .progress-text {\n  color: rgb(83, 195, 27) !important;\n}\n.paraui-v3-progress.paraui-v3-progress-exception-status .progress-text {\n  color: rgb(235, 96, 84) !important;\n}\n.paraui-v3-progress.paraui-v3-progress-active-status .active-bar:before {\n  position: absolute;\n  inset: 0;\n  background: #fff;\n  border-radius: 10px;\n  opacity: 0;\n  -webkit-animation: progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;\n  animation: progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite;\n  content: \"\";\n}\n\n@keyframes progress-active {\n  0% {\n    transform: translateX(-100%) scaleX(0);\n    opacity: 0.1;\n  }\n  20% {\n    transform: translateX(-100%) scaleX(0);\n    opacity: 0.5;\n  }\n  100% {\n    transform: translateX(0) scaleX(1);\n    opacity: 0;\n  }\n}";
styleInject(css_248z);

/** 进度条类型 **/
var ProgressTypes;
(function (ProgressTypes) {
  ProgressTypes[ProgressTypes["line"] = 0] = "line";
  ProgressTypes[ProgressTypes["circle"] = 1] = "circle";
  ProgressTypes[ProgressTypes["dashboard"] = 2] = "dashboard";
})(ProgressTypes || (ProgressTypes = {}));
/** 进度条状态 **/
var ProgressStatuses;
(function (ProgressStatuses) {
  ProgressStatuses[ProgressStatuses["normal"] = 0] = "normal";
  ProgressStatuses[ProgressStatuses["exception"] = 1] = "exception";
  ProgressStatuses[ProgressStatuses["active"] = 2] = "active";
  ProgressStatuses[ProgressStatuses["success"] = 3] = "success";
})(ProgressStatuses || (ProgressStatuses = {}));
/** 每个类型对应的进度条默认颜色 **/
var strokeColorMap = {
  success: "rgba(83, 195, 27, 1)",
  exception: "rgba(235, 96, 84, 1)",
  normal: "rgba(54, 102, 214, 1)",
  active: "rgba(54, 102, 214, 1)"
};
var Progress = function Progress(props) {
  var _props$type = props.type,
    type = _props$type === void 0 ? "line" : _props$type,
    className = props.className,
    style = props.style;
    props.children;
    var status = props.status,
    _props$width = props.width,
    width = _props$width === void 0 ? 132 : _props$width,
    _props$showInfo = props.showInfo,
    showInfo = _props$showInfo === void 0 ? true : _props$showInfo,
    format = props.format,
    success = props.success,
    _props$percent = props.percent,
    percent = _props$percent === void 0 ? 0 : _props$percent,
    steps = props.steps,
    direction = props.direction,
    strokeColor = props.strokeColor,
    _props$gapDegree = props.gapDegree,
    gapDegree = _props$gapDegree === void 0 ? 75 : _props$gapDegree,
    otherProps = __rest(props, ["type", "className", "style", "children", "status", "width", "showInfo", "format", "success", "percent", "steps", "direction", "strokeColor", "gapDegree"]);
  /**
   * 处理class
   * @return {string}
   */
  var classString = function classString() {
    var str = "".concat($prefixCls, "-progress ").concat($prefixCls, "-progress-").concat(type || "default");
    // 添加成功状态的class
    if (isSuccessStatus) str += " ".concat($prefixCls, "-progress-success-status");
    // 添加错误状态下的class
    if (status === "exception") str += " ".concat($prefixCls, "-progress-exception-status");
    // 添加active状态下的class
    if (status === "active") str += " ".concat($prefixCls, "-progress-active-status");
    if (className) str += " " + className;
    return str;
  };
  /**
   * 处理进度条颜色
   * @return {string}
   */
  var strokeColorVal = function strokeColorVal() {
    // 如果传了成功进度条的配置
    if (strokeColor) return strokeColor;
    if (success && success.percent < percent) {
      return [success.strokeColor || strokeColorMap["success"], strokeColorMap["normal"]];
    }
    return isSuccessStatus ? strokeColorMap["success"] : strokeColorMap[status || "normal"];
  };
  /**
   * 处理进度条的值
   * @return {string}
   */
  var renderPercent = function renderPercent() {
    if (success && success.percent < percent && typeof percent === "number") {
      return [success.percent, percent - success.percent];
    }
    return percent;
  };
  /** 标记是不是成功状态 **/
  var isSuccessStatus = percent && percent === 100 && !status || status === "success";
  /** style值 **/
  var renderStyle = type === "circle" || type === "dashboard" ? {
    width: width,
    height: width
  } : {};
  /**
   * 处理描述信息
   * @return {string | ReactNode}
   */
  var renderLabel = function renderLabel() {
    if (format) return format(percent);
    if (isSuccessStatus) return type === "circle" ? jsx(Check, {
      className: "success"
    }) : jsx(CompleteIcon, {
      className: "success"
    });
    if (status === "exception") return type === "circle" ? jsx(CloseIcon, {
      className: "error"
    }) : jsx(CloseCircleFilled, {
      className: "error"
    });
    return validProgress(percent) + "%";
  };
  /** 默认进度条  **/
  var renderLineProgress = steps ? jsx(Steps, Object.assign({
    steps: steps,
    strokeColor: strokeColorVal(),
    percent: renderPercent()
  }, otherProps, {
    children: showInfo && jsx("div", Object.assign({
      className: "progress-text"
    }, {
      children: renderLabel()
    }))
  })) : jsx(Line, Object.assign({
    strokeColor: strokeColorVal(),
    percent: renderPercent(),
    direction: direction
  }, otherProps, {
    children: " "
  }));
  /** 圆形进度条 **/
  var renderCircleProgress = jsx(Circle, Object.assign({
    strokeWidth: 6,
    trailWidth: 6,
    strokeColor: strokeColorVal(),
    percent: renderPercent(),
    prefixCls: "".concat($rcPrefixCls, "-progress")
  }, otherProps));
  /** 仪表盘 **/
  var renderDashboardProgress = jsx(Circle, Object.assign({
    strokeWidth: 6,
    trailWidth: 6,
    gapPosition: "bottom",
    gapDegree: gapDegree,
    strokeColor: strokeColorVal(),
    percent: renderPercent()
  }, otherProps));
  return jsx("div", Object.assign({
    className: classString(),
    style: style
  }, {
    children: jsxs("div", Object.assign({
      className: "progress-outer"
    }, {
      children: [jsx("div", Object.assign({
        className: "progress-inner",
        style: renderStyle
      }, {
        children: type === "dashboard" ? renderDashboardProgress : type === "circle" ? renderCircleProgress : renderLineProgress
      })), showInfo && !steps && jsx("div", Object.assign({
        className: "progress-text"
      }, {
        children: renderLabel()
      }))]
    }))
  }));
};

export { Progress, Progress as default };
