import { Tag } from 'antd';
import PisellMetricCard from "./PisellMetricCard";
var meta = {
  title: 'Data Display/PisellMetricCard',
  component: PisellMetricCard,
  tags: ['autodocs'],
  argTypes: {
    title: {
      description: '标题文本',
      control: 'text'
    },
    value: {
      description: '主数值',
      control: 'number'
    }
  }
};
export default meta;
// 基础示例
export var Basic = {
  args: {
    title: 'Total Sales',
    value: 1580
  }
};

// 带货币符号（新写法）
export var WithCurrency = {
  args: {
    title: 'Revenue',
    value: 1580,
    format: {
      showCurrencySymbol: true,
      currencySymbol: '$'
    }
  }
};

// 正向趋势（新写法）
export var PositiveTrend = {
  args: {
    title: 'Total Orders',
    value: 50,
    comparison: {
      value: 12
    }
  }
};

// 负向趋势（新写法）
export var NegativeTrend = {
  args: {
    title: 'Total Items',
    value: 3249,
    comparison: {
      value: -230
    }
  }
};

// 千分位格式（新写法）
export var WithGrouping = {
  args: {
    title: 'Total Revenue',
    value: 1234567,
    format: {
      useGrouping: true,
      showCurrencySymbol: true,
      currencySymbol: '$'
    }
  }
};

// 小数精度
export var WithPrecision = {
  args: {
    title: 'Conversion Rate',
    value: 18.567,
    format: {
      precision: 2
    }
  }
};

// 完整配置（新写法，更清晰）
export var Complete = {
  args: {
    title: 'Monthly Revenue',
    subtitle: 'Last 30 days',
    value: 125000,
    tooltip: 'Total revenue from all sales channels',
    showSubtitle: true,
    showTooltip: true,
    format: {
      showCurrencySymbol: true,
      currencySymbol: '$',
      useGrouping: true,
      precision: 2
    },
    comparison: {
      value: 15000,
      text: 'v.s. pre'
    }
  }
};

// 带标签
export var WithTag = {
  args: {
    title: 'Active Users',
    value: 1128,
    tag: /*#__PURE__*/React.createElement(Tag, {
      color: "green"
    }, "+15%"),
    showTag: true
  }
};

// 自定义样式（新写法）
export var CustomStyle = {
  args: {
    title: 'Custom Style Card',
    value: 1580,
    comparison: {
      value: 120
    },
    styleConfig: {
      card: {
        borderRadius: 8,
        padding: 24,
        background: '#f5f5f5',
        width: 300
      },
      title: {
        size: 16,
        weight: 600,
        color: '#1890ff'
      },
      value: {
        size: 36,
        weight: 700,
        color: '#52c41a'
      }
    }
  }
};

// 加载状态
export var Loading = {
  args: {
    title: 'Loading Data',
    value: 1580,
    loading: true
  }
};

// 空值
export var EmptyValue = {
  args: {
    title: 'No Data',
    value: null
  }
};

// 多卡片布局
export var MultipleCards = {
  render: function render() {
    return /*#__PURE__*/React.createElement("div", {
      style: {
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
        gap: 16
      }
    }, /*#__PURE__*/React.createElement(PisellMetricCard, {
      title: "Total Orders",
      value: 50,
      comparison: {
        value: 12
      }
    }), /*#__PURE__*/React.createElement(PisellMetricCard, {
      title: "Total Sales",
      value: 1580,
      format: {
        showCurrencySymbol: true,
        currencySymbol: '$'
      },
      comparison: {
        value: 120
      }
    }), /*#__PURE__*/React.createElement(PisellMetricCard, {
      title: "Total Discount",
      value: 230,
      format: {
        showCurrencySymbol: true,
        currencySymbol: '$'
      },
      comparison: {
        value: 80
      }
    }), /*#__PURE__*/React.createElement(PisellMetricCard, {
      title: "Total Items",
      value: 3249,
      comparison: {
        value: -230
      }
    }));
  }
};