<template>
    <div id="chart">
        <div ref="echartRef" class="chart" :style="{ height: `${height}px` }"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    name: "ZrBarChart",
    data() {
        return {
            chart: null, 
            options: {
                title: {
                    text: '',
                    subtext: '',
                    padding:[15,0,0,15]
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                toolbox: {},
                calculable: true,
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: [],
                    axisTick: {
                        alignWithLabel: true
                    }
                },
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: []
            },
            height: 300,
        };
    },
    props: {
        // 图表数据
        series: {
            type: Array,
            default: () => [],
            require: true
        },
        // 图表数据配置项
        chartOptions: {
            type: Object,
            default: () => {},
            require: true
        },
        // 暗黑模式
        dark: {
            type: Boolean,
            default: false,
        }
    },
    mounted() {
        if(this.chartOptions.dark) {
            this.chart = echarts.init(this.$refs.echartRef, 'dark');
        }else {
            this.chart = echarts.init(this.$refs.echartRef);
        }
        // 是否有图表工具配置项
        if(this.chartOptions.toolbox) {
            this.options.toolbox = this.chartOptions.toolbox
        }
        this.chart.setOption(this.options);
    },
    watch: {  
        chartOptions: {
            handler: function(newChartOptions) {
                if(newChartOptions.title.text) this.options.title.text = newChartOptions.title.text
                if(newChartOptions.title.subtext) this.options.title.text = newChartOptions.title.subtext
                if(newChartOptions.height) this.height = newChartOptions.height
                if(newChartOptions.xAxisData) this.options.xAxis.data = [...newChartOptions.xAxisData]
            },
            immediate: true,
            deep: true
        },
        "chartOptions.dark": {
            handler: function(newTheme) {
                this.chart.dispose(); //销毁
                if(newTheme){
                    this.chart = echarts.init(this.$refs.echartRef, 'dark')
                }else {
                    this.chart = echarts.init(this.$refs.echartRef)    
                }
            },
        },
        series: {
            handler: function (newSeries) {  
                if(this.chartOptions.props) {
                    let name = this.chartOptions.props.name
                    let data = this.chartOptions.props.data
                    this.options.series = newSeries.map((item,index) => {
                        const obj = {
                            type: 'bar',
                            name: '',
                            showBackground: false,
                            data: [],
                            markPoint: {},
                            markLine: {}
                        }
                        if(item[name]) {
                            obj.name = item[name]
                        }
                        if(this.chartOptions.showBackground) {
                            obj.showBackground = true
                        }
                        // 是否有图表计算配置
                        if(this.chartOptions.markPoint) {
                            obj.markPoint = this.chartOptions.markPoint
                        }
                        if(this.chartOptions.markLine) {
                            obj.markLine = this.chartOptions.markLine
                        }
                        obj.data = [...item[data]]
                        return obj
                    });

                }      
            },
            immediate: true,
            deep: true,
        },
        options: {
            handler: function (newOption) {
                this.chart.setOption(newOption);
            },
            deep: true,
        },
    },
    methods: {

    },
};
</script>

<style lang="less" scoped>
.chart {
    width: 100%;
}
</style>