class GaugeComponent {
    render(container, component, width, height, configs) {
        this.container = container;
        this.component = component;

        this.chart = window.echarts.init(this.container);

        this.basicOption = {
            series: [
                {
                    name: "dd",
                    type: "gauge",
                    min: 0,
                    max: 100,
                    itemStyle: {
                        color: "#5470C6"
                    },
                    progress: {
                        show: true
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#999999'
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: [
                                [1, "#E6EBF8"]
                            ]
                        }
                    },
                    axisTick: {
                        lineStyle: {
                            color: '#999999'
                        }
                    },
                    axisLabel: {
                        color: '#999999'
                    },
                    title: {
                        color: "#464646"
                    },
                    detail: {
                        color: "#EFEF13"
                    },
                    data: [
                        {
                            value: 50,
                            name: ""
                        }
                    ]
                }
            ]
        };
        for (const config of configs) {
            this.updateConfigWithoutSet(config);
        }
        this.chart.setOption(this.basicOption);
    }

    resize(width, height) {
        this.chart.resize({ width, height });
    }

    updateConfig(config) {
        this.updateConfigWithoutSet(config);

        this.chart.setOption(this.basicOption);
    }
    updateConfigWithoutSet(config) {
        switch (config.k) {
            case "title":
                this.basicOption.series[0].data[0].name = config.v;
                break;
            case "titleColor":
                this.basicOption.series[0].title.color = config.v;
                break;
            case "minValue":
                this.basicOption.series[0].min = Number(config.v);
                break;
            case "maxValue":
                this.basicOption.series[0].max = Number(config.v);
                break;
            case "currentValue":
                this.basicOption.series[0].data[0].value = Number(config.v);
                break;
            case "valueColor":
                this.basicOption.series[0].detail.color = config.v;
                break;
            case "background":
                this.basicOption.series[0].axisLine.lineStyle.color[0][1] = config.v;
                break;
            case "foreground":
                this.basicOption.series[0].itemStyle.color = config.v;
                break;
            case "tickColor":
                this.basicOption.series[0].axisLabel.color = config.v;
                this.basicOption.series[0].axisTick.lineStyle.color = config.v;
                this.basicOption.series[0].splitLine.lineStyle.color = config.v;
                break;
        }
    }
}