// "apexcharts": "4.5.0"
import { __decorate, __metadata } from "tslib";
import { LitElement, html } from 'lit';
import { customElement, property, query } from 'lit/decorators.js';
import ApexCharts from 'apexcharts';
import { keyed } from 'lit/directives/keyed.js';
import { roundNumber } from '../shared/utils/func/common';
let EaasChartDonut = class EaasChartDonut extends LitElement {
    constructor() {
        super(...arguments);
        this.data = [];
        this.colors = ['#59AFF8', '#FFB84D', '#FF6B7D']; // 경부하, 중부하, 최대부하 색상
        this.suffix = 'kW';
        this.showLabels = true;
        this.showLegend = true;
        this.legendPosition = 'right';
        this.chartKey = Date.now();
    }
    createRenderRoot() {
        return this;
    }
    render() {
        if (this.data.length === 0)
            return '';
        return html `${keyed(this.chartKey, html `<div id="donut-chart"></div>`)}`;
    }
    firstUpdated(_changedProperties) {
        this._createChart();
    }
    updated(changedProperties) {
        if (changedProperties.has('data')) {
            if (this._chart) {
                this._chart.destroy();
            }
            this.chartKey = Date.now();
            this.updateComplete.then(() => {
                this._createChart();
            });
        }
    }
    _createChart() {
        const container = this.chartContainer;
        if (!this.data.length || !container)
            return;
        // 데이터 준비
        const series = this.data.map(item => item.value);
        const labels = this.data.map(item => item.label);
        const total = series.reduce((acc, curr) => acc + curr, 0);
        const options = {
            chart: {
                type: 'donut',
                height: '100%',
                width: '100%',
                animations: {
                    enabled: false
                }
            },
            series: series,
            labels: labels,
            colors: this.colors,
            dataLabels: {
                enabled: this.showLabels,
                style: {
                    fontSize: '11px',
                    colors: ['#ffffff']
                },
                formatter: (val, opts) => {
                    const value = opts.w.config.series[opts.seriesIndex];
                    return roundNumber(Number(value), 0).toLocaleString() + this.suffix;
                },
                dropShadow: {
                    enabled: false
                }
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '60%',
                        labels: {
                            show: true,
                            total: {
                                show: true,
                                label: '총 사용량',
                                fontSize: '12px',
                                color: '#aebff0',
                                formatter: () => {
                                    return roundNumber(total, 1).toLocaleString() + this.suffix;
                                }
                            },
                            value: {
                                show: true,
                                fontSize: '14px',
                                color: '#ffffff',
                                formatter: val => {
                                    return roundNumber(Number(val), 1).toLocaleString() + this.suffix;
                                }
                            }
                        }
                    }
                }
            },
            stroke: {
                show: false,
                width: 0
            },
            legend: {
                show: this.showLegend,
                position: this.legendPosition,
                fontSize: '11px',
                labels: {
                    colors: '#ffffff'
                },
                markers: {
                    size: 8
                },
                itemMargin: {
                    horizontal: 5,
                    vertical: 2
                },
                formatter: function (seriesName, opts) {
                    const value = opts.w.config.series[opts.seriesIndex];
                    const percentage = roundNumber((value / total) * 100, 0);
                    return seriesName + ': ' + percentage + '%';
                }
            },
            tooltip: {
                enabled: true,
                theme: 'dark',
                style: {
                    fontSize: '12px'
                },
                custom: ({ series, seriesIndex, dataPointIndex, w }) => {
                    const value = series[seriesIndex];
                    const percentage = roundNumber((value / total) * 100, 1);
                    const label = w.globals.labels[seriesIndex];
                    return `
            <div style="
              background: rgba(20, 25, 35, 0.96);
              border: 1px solid rgba(138, 161, 255, 0.4);
              border-radius: 8px;
              padding: 10px 14px;
              box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
              min-width: 140px;
            ">
              <div style="
                color: #a8c5ff;
                font-size: 11px;
                font-weight: 600;
                margin-top: 3px;
              ">${label}</div>
              <div style="
                color: #ffffff;
                font-size: 13px;
                font-weight: 700;
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
              ">${roundNumber(value, 1).toLocaleString()} ${this.suffix}</div>
              <div style="
                color: #b8d4ff;
                font-size: 11px;
                font-weight: 500;
                margin-top: 3px;
              ">${percentage}%</div>
            </div>
          `;
                }
            },
            responsive: [
                {
                    breakpoint: 768,
                    options: {
                        legend: {
                            position: 'bottom'
                        }
                    }
                }
            ]
        };
        this._chart = new ApexCharts(container, options);
        this._chart?.render();
    }
};
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChartDonut.prototype, "data", void 0);
__decorate([
    property({ type: Array }),
    __metadata("design:type", Array)
], EaasChartDonut.prototype, "colors", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChartDonut.prototype, "suffix", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], EaasChartDonut.prototype, "showLabels", void 0);
__decorate([
    property({ type: Boolean }),
    __metadata("design:type", Boolean)
], EaasChartDonut.prototype, "showLegend", void 0);
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], EaasChartDonut.prototype, "legendPosition", void 0);
__decorate([
    property({ type: Number }),
    __metadata("design:type", Number)
], EaasChartDonut.prototype, "chartKey", void 0);
__decorate([
    query('#donut-chart'),
    __metadata("design:type", HTMLElement)
], EaasChartDonut.prototype, "chartContainer", void 0);
EaasChartDonut = __decorate([
    customElement('eaas-chart-donut')
], EaasChartDonut);
export { EaasChartDonut };
//# sourceMappingURL=eaas-chart-donut.js.map