class BarChartComponent {

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

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

        const timer = setInterval(() => {
            this.rootCanvas = this.container.firstChild.getElementsByTagName("canvas")[0];
            if (this.rootCanvas) {
                clearInterval(timer);
                if (this.borderRadius) {
                    this.rootCanvas.style.borderRadius = this.borderRadius + "px";
                }
            }
        }, 50);

        this.basicOption = {
            color: [
                '#1C81FF',
                '#4FB957',
                '#FE6A00',
                '#3DFEDB',
                '#FBE947',
                '#1DCFFF',
                '#725CFA'
            ],
            title: {
                text: '',
                textStyle: {
                    color: 'rgba(255,255,255,1)',
                    fontSize: 18,
                    fontWeight: 'normal'
                },
                left: 0,
                top: 0
            },
            backgroundColor: 'rgba(255,255,255,1)',
            grid: {
                left: 50,
                right: 0,
                top: 50,
                bottom: 24
            },
            tooltip: {},
            legend: {
                data: ['项目1', '项目2'],
                textStyle: {
                    color: 'rgba(255,255,255,1)'
                },
                right: 0,
                top: 0
            },
            xAxis: {
                data: ["时间1", "时间2", "时间3"],
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,1)"
                    }
                },
            },
            yAxis: {
                axisLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,1)"
                    }
                },
                splitLine: {
                    lineStyle: {
                        color: "rgba(255,255,255,1)"
                    }
                }
            },
            series: [
                {
                    name: "项目1",
                    type: "bar",
                    data: [100, 200, 150]
                },
                {
                    name: "项目2",
                    type: "bar",
                    data: [205, 320, 170]
                }
            ]
        };
        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) {
        if (config.k === "title.titleText") {
            this.basicOption.title.text = config.v;
        }
        else if (config.k === 'title.fontColor') {
            this.basicOption.title.textStyle.color = config.v;
        }
        else if (config.k === "title.fontSize") {
            this.basicOption.title.textStyle.fontSize = config.v;
        }
        else if (config.k === 'back.backColor') {
            this.basicOption.backgroundColor = config.v;
        }
        else if (config.k === "back.borderRadius") {
            this.borderRadius = config.v;
            if (this.rootCanvas) {
                this.rootCanvas.style.borderRadius = this.borderRadius + "px";
            }
        }
        else if (config.k === "back.padding") {
            const [left, top, right, bottom] = config.v.split(",").map(p => Number(p));

            this.basicOption.title.left = left;
            this.basicOption.grid.left = left + 50;

            this.basicOption.title.top = top;
            this.basicOption.legend.top = top;
            this.basicOption.grid.top = top + 50;

            this.basicOption.legend.right = right;
            this.basicOption.grid.right = right;

            this.basicOption.grid.bottom = bottom + 24;
        }
        else if (config.k === "foreground") {
            this.basicOption.legend.textStyle.color = config.v;
            this.basicOption.xAxis.axisLine.lineStyle.color = config.v;
            this.basicOption.yAxis.axisLine.lineStyle.color = config.v;
            this.basicOption.yAxis.splitLine.lineStyle.color = config.v;
        }
        else if (config.k === 'colorSeries') {
            this.basicOption.color = config.v.split(",");
        }
        else if (config.k === "displayDevice") {
            this.displayDevice = config.v;
        }
    }

    updateChartData(data) {
        let yNames = data.yNames;
        if (this.displayDevice === "0") {
            yNames = data.yNames.map(p => {
                const pos = p.indexOf('.');
                return p.substring(pos + 1);
            });
        }

        const series = [];
        for (let i = 0; i < data.yNames.length; i++) {
            series.push({
                name: yNames[i],
                type: "bar",
                data: data.yData[i]
            });
        }

        this.basicOption.legend.data = yNames;
        this.basicOption.xAxis.data = data.xData;
        this.basicOption.series = series;

        this.chart.setOption(this.basicOption, true);
    }
}