function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React, { useMemo } from 'react';
import PisellCard from "../pisellCard";
import { MetricTitle, MetricValue, MetricComparison } from "./components";
import { formatMetricValue } from "./utils";
import "./PisellMetricCard.less";

/**
 * PisellMetricCard 指标卡片组件
 * 
 * 用于展示单一核心指标的专业卡片组件
 * 支持标题、数值、环比、趋势箭头、标签等信息展示
 * 
 * @example 基础用法
 * ```tsx
 * <PisellMetricCard
 *   title="Total Sales"
 *   value={1580}
 * />
 * ```
 * 
 * @example 使用对象配置
 * ```tsx
 * <PisellMetricCard
 *   title="Revenue"
 *   value={1580}
 *   format={{ 
 *     showCurrencySymbol: true, 
 *     currencySymbol: '$',
 *     useGrouping: true 
 *   }}
 *   comparison={{ 
 *     value: 120 
 *   }}
 * />
 * ```
 */
var PisellMetricCard = function PisellMetricCard(props) {
  var title = props.title,
    subtitle = props.subtitle,
    value = props.value,
    tag = props.tag,
    tooltip = props.tooltip,
    format = props.format,
    comparison = props.comparison,
    styleConfig = props.styleConfig,
    _props$showSubtitle = props.showSubtitle,
    showSubtitle = _props$showSubtitle === void 0 ? false : _props$showSubtitle,
    _props$showTag = props.showTag,
    showTag = _props$showTag === void 0 ? false : _props$showTag,
    _props$showTooltip = props.showTooltip,
    showTooltip = _props$showTooltip === void 0 ? false : _props$showTooltip,
    _props$loading = props.loading,
    loading = _props$loading === void 0 ? false : _props$loading,
    _props$hoverable = props.hoverable,
    hoverable = _props$hoverable === void 0 ? true : _props$hoverable,
    className = props.className,
    style = props.style,
    onClick = props.onClick;

  // 提取格式化配置（带默认值）
  var formatConfig = useMemo(function () {
    var _format$precision, _format$useGrouping, _format$showCurrencyS, _format$currencySymbo, _format$hideDecimalFo;
    return {
      precision: (_format$precision = format === null || format === void 0 ? void 0 : format.precision) !== null && _format$precision !== void 0 ? _format$precision : 0,
      useGrouping: (_format$useGrouping = format === null || format === void 0 ? void 0 : format.useGrouping) !== null && _format$useGrouping !== void 0 ? _format$useGrouping : false,
      showCurrencySymbol: (_format$showCurrencyS = format === null || format === void 0 ? void 0 : format.showCurrencySymbol) !== null && _format$showCurrencyS !== void 0 ? _format$showCurrencyS : false,
      currencySymbol: (_format$currencySymbo = format === null || format === void 0 ? void 0 : format.currencySymbol) !== null && _format$currencySymbo !== void 0 ? _format$currencySymbo : '',
      formatter: format === null || format === void 0 ? void 0 : format.formatter,
      hideDecimalForWholeNumbers: (_format$hideDecimalFo = format === null || format === void 0 ? void 0 : format.hideDecimalForWholeNumbers) !== null && _format$hideDecimalFo !== void 0 ? _format$hideDecimalFo : true
    };
  }, [format]);

  // 提取卡片样式配置（带默认值）
  var cardStyle = useMemo(function () {
    var _styleConfig$card$bor, _styleConfig$card, _styleConfig$card$bor2, _styleConfig$card2, _styleConfig$card$pad, _styleConfig$card3, _styleConfig$card$sha, _styleConfig$card4, _styleConfig$card$bac, _styleConfig$card5, _styleConfig$card$wid, _styleConfig$card6;
    return {
      bordered: (_styleConfig$card$bor = styleConfig === null || styleConfig === void 0 || (_styleConfig$card = styleConfig.card) === null || _styleConfig$card === void 0 ? void 0 : _styleConfig$card.bordered) !== null && _styleConfig$card$bor !== void 0 ? _styleConfig$card$bor : true,
      borderRadius: (_styleConfig$card$bor2 = styleConfig === null || styleConfig === void 0 || (_styleConfig$card2 = styleConfig.card) === null || _styleConfig$card2 === void 0 ? void 0 : _styleConfig$card2.borderRadius) !== null && _styleConfig$card$bor2 !== void 0 ? _styleConfig$card$bor2 : 12,
      padding: (_styleConfig$card$pad = styleConfig === null || styleConfig === void 0 || (_styleConfig$card3 = styleConfig.card) === null || _styleConfig$card3 === void 0 ? void 0 : _styleConfig$card3.padding) !== null && _styleConfig$card$pad !== void 0 ? _styleConfig$card$pad : 16,
      shadow: (_styleConfig$card$sha = styleConfig === null || styleConfig === void 0 || (_styleConfig$card4 = styleConfig.card) === null || _styleConfig$card4 === void 0 ? void 0 : _styleConfig$card4.shadow) !== null && _styleConfig$card$sha !== void 0 ? _styleConfig$card$sha : true,
      background: (_styleConfig$card$bac = styleConfig === null || styleConfig === void 0 || (_styleConfig$card5 = styleConfig.card) === null || _styleConfig$card5 === void 0 ? void 0 : _styleConfig$card5.background) !== null && _styleConfig$card$bac !== void 0 ? _styleConfig$card$bac : '#ffffff',
      width: (_styleConfig$card$wid = styleConfig === null || styleConfig === void 0 || (_styleConfig$card6 = styleConfig.card) === null || _styleConfig$card6 === void 0 ? void 0 : _styleConfig$card6.width) !== null && _styleConfig$card$wid !== void 0 ? _styleConfig$card$wid : 'auto'
    };
  }, [styleConfig]);

  // 提取标题样式配置（带默认值）
  var titleStyle = useMemo(function () {
    var _styleConfig$title$si, _styleConfig$title, _styleConfig$title$we, _styleConfig$title2, _styleConfig$title$co, _styleConfig$title3;
    return {
      size: (_styleConfig$title$si = styleConfig === null || styleConfig === void 0 || (_styleConfig$title = styleConfig.title) === null || _styleConfig$title === void 0 ? void 0 : _styleConfig$title.size) !== null && _styleConfig$title$si !== void 0 ? _styleConfig$title$si : 14,
      weight: (_styleConfig$title$we = styleConfig === null || styleConfig === void 0 || (_styleConfig$title2 = styleConfig.title) === null || _styleConfig$title2 === void 0 ? void 0 : _styleConfig$title2.weight) !== null && _styleConfig$title$we !== void 0 ? _styleConfig$title$we : 400,
      color: (_styleConfig$title$co = styleConfig === null || styleConfig === void 0 || (_styleConfig$title3 = styleConfig.title) === null || _styleConfig$title3 === void 0 ? void 0 : _styleConfig$title3.color) !== null && _styleConfig$title$co !== void 0 ? _styleConfig$title$co : 'rgba(0, 0, 0, 0.45)'
    };
  }, [styleConfig]);

  // 提取数值样式配置（带默认值）
  var valueStyle = useMemo(function () {
    var _styleConfig$value$si, _styleConfig$value, _styleConfig$value$we, _styleConfig$value2, _styleConfig$value$co, _styleConfig$value3;
    return {
      size: (_styleConfig$value$si = styleConfig === null || styleConfig === void 0 || (_styleConfig$value = styleConfig.value) === null || _styleConfig$value === void 0 ? void 0 : _styleConfig$value.size) !== null && _styleConfig$value$si !== void 0 ? _styleConfig$value$si : 30,
      weight: (_styleConfig$value$we = styleConfig === null || styleConfig === void 0 || (_styleConfig$value2 = styleConfig.value) === null || _styleConfig$value2 === void 0 ? void 0 : _styleConfig$value2.weight) !== null && _styleConfig$value$we !== void 0 ? _styleConfig$value$we : 600,
      color: (_styleConfig$value$co = styleConfig === null || styleConfig === void 0 || (_styleConfig$value3 = styleConfig.value) === null || _styleConfig$value3 === void 0 ? void 0 : _styleConfig$value3.color) !== null && _styleConfig$value$co !== void 0 ? _styleConfig$value$co : 'rgba(0, 0, 0, 0.85)'
    };
  }, [styleConfig]);

  // 格式化主数值
  var formattedValue = useMemo(function () {
    return formatMetricValue(value, formatConfig);
  }, [value, formatConfig]);

  // 提取环比配置（带默认值）
  var comparisonConfig = useMemo(function () {
    var _comparison$text, _comparison$showTrend, _comparison$positiveC, _comparison$negativeC, _comparison$size;
    if (!(comparison !== null && comparison !== void 0 && comparison.value)) return null;
    return {
      value: comparison.value,
      text: (_comparison$text = comparison.text) !== null && _comparison$text !== void 0 ? _comparison$text : 'v.s. pre',
      showTrendIcon: (_comparison$showTrend = comparison.showTrendIcon) !== null && _comparison$showTrend !== void 0 ? _comparison$showTrend : true,
      positiveColor: (_comparison$positiveC = comparison.positiveColor) !== null && _comparison$positiveC !== void 0 ? _comparison$positiveC : '#52c41a',
      negativeColor: (_comparison$negativeC = comparison.negativeColor) !== null && _comparison$negativeC !== void 0 ? _comparison$negativeC : '#ff4d4f',
      size: (_comparison$size = comparison.size) !== null && _comparison$size !== void 0 ? _comparison$size : 14
    };
  }, [comparison]);
  return /*#__PURE__*/React.createElement(PisellCard, {
    bordered: cardStyle.bordered,
    borderRadius: cardStyle.borderRadius,
    padding: cardStyle.padding,
    loading: loading,
    isClickable: !!onClick,
    onClick: onClick,
    style: _objectSpread({
      width: typeof cardStyle.width === 'number' ? "".concat(cardStyle.width, "px") : cardStyle.width,
      background: cardStyle.background,
      boxShadow: typeof cardStyle.shadow === 'string' ? cardStyle.shadow : cardStyle.shadow ? '0px 1px 2px 0px rgba(16, 24, 40, 0.05)' : 'none'
    }, style),
    className: "pisell-metric-card ".concat(className || '')
  }, /*#__PURE__*/React.createElement(MetricTitle, {
    title: title,
    subtitle: showSubtitle ? subtitle : undefined,
    tooltip: showTooltip ? tooltip : undefined,
    titleSize: titleStyle.size,
    titleWeight: titleStyle.weight,
    titleColor: titleStyle.color
  }), /*#__PURE__*/React.createElement(MetricValue, {
    value: formattedValue,
    valueSize: valueStyle.size,
    valueWeight: valueStyle.weight,
    valueColor: valueStyle.color
  }), comparisonConfig && /*#__PURE__*/React.createElement(MetricComparison, {
    comparison: comparisonConfig.value,
    comparisonText: comparisonConfig.text,
    showTrendIcon: comparisonConfig.showTrendIcon,
    positiveColor: comparisonConfig.positiveColor,
    negativeColor: comparisonConfig.negativeColor,
    comparisonSize: comparisonConfig.size,
    precision: formatConfig.precision,
    showCurrencySymbol: formatConfig.showCurrencySymbol,
    currencySymbol: formatConfig.currencySymbol
  }), showTag && tag && /*#__PURE__*/React.createElement("div", {
    className: "pisell-metric-card-tag"
  }, tag));
};
export default PisellMetricCard;