import { Button, Result } from "antd";
import React from "react";
import ChartContainer from "./ChartContainer";
// 模拟一个会出错的图表组件
var ErrorChart = function() {
    throw new Error('模拟图表渲染错误');
    return /*#__PURE__*/ React.createElement("div", null, "这个组件永远不会渲染");
};
// 正常的图表组件
var NormalChart = function() {
    return /*#__PURE__*/ React.createElement("div", {
        style: {
            height: '200px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
        }
    }, /*#__PURE__*/ React.createElement("div", null, "正常的图表内容"));
};
/**
 * 错误边界使用示例 - 使用 antd Result 组件的简洁版本
 */ export var ChartErrorBoundaryExample = function() {
    return /*#__PURE__*/ React.createElement("div", {
        style: {
            padding: '12px'
        }
    }, /*#__PURE__*/ React.createElement("h2", null, "图表错误边界示例（antd Result 简洁版）"), /*#__PURE__*/ React.createElement("div", {
        style: {
            marginBottom: '32px'
        }
    }, /*#__PURE__*/ React.createElement("h3", null, "1. 基础错误边界（antd Result 组件）"), /*#__PURE__*/ React.createElement(ChartContainer, {
        baseClassName: "error-demo-chart"
    }, /*#__PURE__*/ React.createElement(ErrorChart, null))), /*#__PURE__*/ React.createElement("div", {
        style: {
            marginBottom: '32px'
        }
    }, /*#__PURE__*/ React.createElement("h3", null, "2. 自定义错误UI"), /*#__PURE__*/ React.createElement(ChartContainer, {
        baseClassName: "custom-error-chart",
        errorBoundary: {
            enabled: true,
            fallback: /*#__PURE__*/ React.createElement(Result, {
                status: "warning",
                title: "自定义错误提示",
                subTitle: "这是一个自定义的错误界面",
                extra: /*#__PURE__*/ React.createElement(Button, {
                    type: "primary"
                }, "返回")
            }),
            onError: function(error, errorInfo) {
                console.error('自定义错误处理:', error, errorInfo);
            }
        }
    }, /*#__PURE__*/ React.createElement(ErrorChart, null))), /*#__PURE__*/ React.createElement("div", {
        style: {
            marginBottom: '32px'
        }
    }, /*#__PURE__*/ React.createElement("h3", null, "3. 显示错误详情（开发模式）"), /*#__PURE__*/ React.createElement(ChartContainer, {
        baseClassName: "debug-error-chart",
        errorBoundary: {
            enabled: true,
            onError: function(error, errorInfo) {
                console.error('调试模式错误:', error, errorInfo);
            }
        }
    }, /*#__PURE__*/ React.createElement(ErrorChart, null))), /*#__PURE__*/ React.createElement("div", {
        style: {
            marginBottom: '32px'
        }
    }, /*#__PURE__*/ React.createElement("h3", null, "4. 正常工作的图表"), /*#__PURE__*/ React.createElement(ChartContainer, {
        baseClassName: "normal-chart"
    }, /*#__PURE__*/ React.createElement(NormalChart, null))), /*#__PURE__*/ React.createElement("div", {
        style: {
            marginBottom: '32px'
        }
    }, /*#__PURE__*/ React.createElement("h3", null, "5. 禁用错误边界"), /*#__PURE__*/ React.createElement("p", {
        style: {
            color: '#ff4d4f',
            fontSize: '14px',
            marginBottom: '16px'
        }
    }, "注意：禁用错误边界可能导致整个应用崩溃，一般不推荐"), /*#__PURE__*/ React.createElement(ChartContainer, {
        baseClassName: "no-boundary-chart",
        errorBoundary: {
            enabled: false
        }
    }, /*#__PURE__*/ React.createElement(NormalChart, null))));
};
export default ChartErrorBoundaryExample;
