<template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>

<script>
    import mixins from '@/mixins';
    import {legend, grid, yAxis, xAxis} from '@/defaultSetting';

    export default {
        mixins: [mixins],
        data() {
            return {};
        },
        methods: {
            updateChart() {
                const { legendColor, axisColor } = this.themeColor;
                let legends = [];
                let series = [];
                this.data.values.forEach(item => {
                    legends.push(item.name);
                    series.push({
                        name: item.name,
                        type: 'line',
                        smooth: true,
                        itemStyle: {
                            normal: {
                                areaStyle: {type: 'default'},
                                opacity: 0.2,
                            },
                        },
                        data: item.data,
                    });
                });
                const options = {
                    textStyle: {
                        color: '#fff'
                    },
                    color: this.setting.color,
                    title: {
                        text: this.data.title,
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    toolbox: this.setting.toolbox,
                    grid: {
                        ...grid,
                        left: this.setting.gridLeft
                    },
                    legend: {
                        ...legend,
                        data: legends,
                        textStyle: {
                            color: legendColor || '#666'
                        }
                    },
                    xAxis: [{
                        ...xAxis,
                        type: 'category',
                        data: this.data.keys.map(item => {
                            return item.replace(' ', '\n');
                        }),
                        axisLabel: {
                            color: axisColor || '#333'
                        }
                    }],
                    yAxis: [{
                        ...yAxis,
                        name: this.unit,
                        axisLabel: {
                            color: axisColor || '#333'
                        },
                        nameTextStyle: {
                            color: axisColor || '#333'
                        }
                    }],
                    series: series,
                };
                this.chart.setOption(options, true);
            },
        },
    };
</script>
