import { h } from "@stencil/core";
import * as echarts from "echarts";
export class EchartsRenderer {
    el;
    /**
     * ECharts配置对象
     */
    content = {};
    /**
     * 图表宽度
     */
    width = '100%';
    /**
     * 图表高度
     */
    height = '300px';
    /**
     * 是否响应式
     */
    responsive = true;
    /**
     * 是否显示加载动画
     */
    showLoading = true;
    /**
     * 主题名称
     */
    theme = 'default';
    chartInstance = null;
    isLoading = false;
    resizeObserver = null;
    componentDidLoad() {
        this.initChart();
        this.setupResizeObserver();
    }
    disconnectedCallback() {
        this.destroyChart();
        this.cleanupResizeObserver();
    }
    contentChanged() {
        this.updateChart();
    }
    sizeChanged() {
        this.resizeChart();
    }
    initChart() {
        if (!this.content || Object.keys(this.content).length === 0) {
            return;
        }
        const container = this.el.shadowRoot?.querySelector('.echarts-container');
        if (!container)
            return;
        try {
            this.chartInstance = echarts.init(container, this.theme);
            if (this.showLoading) {
                this.isLoading = true;
                this.chartInstance.showLoading({
                    text: '加载中...',
                    color: '#007AFF',
                    textColor: '#000',
                    maskColor: 'rgba(255, 255, 255, 0.8)',
                    zlevel: 0
                });
            }
            // 设置配置
            this.chartInstance.setOption(this.content, true);
            if (this.showLoading) {
                setTimeout(() => {
                    this.chartInstance?.hideLoading();
                    this.isLoading = false;
                }, 500);
            }
            // 添加点击事件
            this.chartInstance.on('click', (params) => {
                this.handleChartClick(params);
            });
        }
        catch (error) {
            console.error('ECharts initialization error:', error);
        }
    }
    updateChart() {
        if (!this.chartInstance || !this.content)
            return;
        try {
            this.chartInstance.setOption(this.content, true);
        }
        catch (error) {
            console.error('ECharts update error:', error);
        }
    }
    resizeChart() {
        if (!this.chartInstance)
            return;
        try {
            this.chartInstance.resize();
        }
        catch (error) {
            console.error('ECharts resize error:', error);
        }
    }
    destroyChart() {
        if (this.chartInstance) {
            this.chartInstance.dispose();
            this.chartInstance = null;
        }
    }
    setupResizeObserver() {
        if (!this.responsive || !window.ResizeObserver)
            return;
        const container = this.el.shadowRoot?.querySelector('.echarts-container');
        if (!container)
            return;
        this.resizeObserver = new ResizeObserver(() => {
            this.resizeChart();
        });
        this.resizeObserver.observe(container);
    }
    cleanupResizeObserver() {
        if (this.resizeObserver) {
            this.resizeObserver.disconnect();
            this.resizeObserver = null;
        }
    }
    handleChartClick(params) {
        // 触发自定义事件
        const event = new CustomEvent('chartClick', {
            detail: params,
            bubbles: true,
            composed: true
        });
        this.el.dispatchEvent(event);
    }
    render() {
        const containerStyle = {
            width: this.width,
            height: this.height,
            minHeight: '200px'
        };
        return (h("div", { key: '792623772692afbf07ad646d2bdb3568e57b056f', class: "echarts-renderer" }, h("div", { key: 'f14e4e50ade04851798f7a77f77fa74b4b1ef3f1', class: "echarts-container", style: containerStyle }), this.isLoading && (h("div", { key: '7b6d4767f4bbf69b9280cc811e00bf9d7ddedf4e', class: "loading-overlay" }, h("div", { key: 'ee8ef25591a77254c223fbad6d308fd6b498dbdb', class: "loading-spinner" }), h("div", { key: 'ea5ebfd68a13e59755e9b2627c53f93ff64c6f39', class: "loading-text" }, "\u52A0\u8F7D\u4E2D...")))));
    }
    static get is() { return "echarts-renderer"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["echarts-renderer.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["echarts-renderer.css"]
        };
    }
    static get properties() {
        return {
            "content": {
                "type": "any",
                "attribute": "content",
                "mutable": false,
                "complexType": {
                    "original": "any",
                    "resolved": "any",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "ECharts\u914D\u7F6E\u5BF9\u8C61"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "{}"
            },
            "width": {
                "type": "string",
                "attribute": "width",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u56FE\u8868\u5BBD\u5EA6"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'100%'"
            },
            "height": {
                "type": "string",
                "attribute": "height",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u56FE\u8868\u9AD8\u5EA6"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'300px'"
            },
            "responsive": {
                "type": "boolean",
                "attribute": "responsive",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u54CD\u5E94\u5F0F"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "showLoading": {
                "type": "boolean",
                "attribute": "show-loading",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u662F\u5426\u663E\u793A\u52A0\u8F7D\u52A8\u753B"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "true"
            },
            "theme": {
                "type": "string",
                "attribute": "theme",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "\u4E3B\u9898\u540D\u79F0"
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "defaultValue": "'default'"
            }
        };
    }
    static get states() {
        return {
            "chartInstance": {},
            "isLoading": {}
        };
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "content",
                "methodName": "contentChanged"
            }, {
                "propName": "width",
                "methodName": "sizeChanged"
            }, {
                "propName": "height",
                "methodName": "sizeChanged"
            }];
    }
}
//# sourceMappingURL=echarts-renderer.js.map
