<template>
    <div class="bar-chart">
        <chart-el :chartOpt="barChartConf" />
    </div>
</template>

<script>
import * as echarts from 'echarts'
import mixinChart from '@/public/mixins/mixinChart'

export default {
    name: 'lineBar',

    mixins: [mixinChart],

    data () {
        return {
            barChartConf: {}
        }
    },

    props: {
        // 图表布局配置, width, height
        layout: {
            type: Object,
            default () {
                return {}
            }
        },

        // 图表配置
        option: {
            type: Object,
            default () {
                return {
                    base: {},
                    seriesData: []
                }
            }
        }
    },

    mounted () {
        this.initComponents()
    },

    methods: {
        initComponents () {
            const { width = '', height = '', id = '', className = 'line-bar-chart-class' } = this.mergeChartConf() || {}
            // 基础配置, 不含series
            const option = this.getChartOption(this.option.base) || {}
            const seriesData = this.getSeriesData(this.option.seriesData || []) || []
            // if (!seriesData.length) {
            //     throw Error('该组件图表数据只能接受length为2的数组')
            // }
            option.series = seriesData
            this.barChartConf = {
                className,
                id,
                width,
                height,
                option
            }
        },

        /**
         * @method mergeChartConf 合并图表配置项
         */
        mergeChartConf () {
            const defaultChartConf = {
                width: '100%',
                height: '100%',
                // 不同的id（防止id重复，同一个页面，无法展示多个同组件图表）
                id: 'line-bar-chart-id' + this.utils.randomStr()
            }
            return this.deepMerge({}, defaultChartConf, this.layout)
        },

        /**
         * @method getChartOption 图表配置
         */
        getChartOption (customOption = {}) {
            const defaultOption = {
                title: {
                    show: false
                },
                grid: {
                    left: 0,
                    right: 10,
                    bottom: 0,
                    top: 0,
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'category',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            inside: false,
                            formatter: function (val) {
                                return `{color1|${val}}`
                            },
                            rich: {
                                color1: {
                                    fontSize: 14,
                                    color: '#FFFFFF'
                                }
                            }
                        },
                        data: []
                    }, {
                        type: 'category',
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            show: true,
                            inside: false,
                            formatter: function (val) {
                                return `{color|${val}}`
                            },
                            rich: {
                                color: {
                                    fontFamily: 'CenturyGothic',
                                    fontSize: 15,
                                    color: '#FFFFFF'
                                }
                            }
                        },
                        splitArea: {
                            show: false
                        },
                        splitLine: {
                            show: false
                        },
                        data: []
                    }
                ]
            }
            return this.deepMerge({}, defaultOption, customOption)
        },

        /**
         * @method getSeriesData 图表数据
         */
        getSeriesData () {
            if (this.option.seriesData.length !== 2) return []
            const defSeriesData = [
                {
                    name: 'back',
                    type: 'bar',
                    barWidth: '4px',
                    itemStyle: {
                        borderRadius: [0, 0, 0, 0],
                        normal: {
                            color: '#233549'
                        }
                    },
                    barGap: '-100%',
                    data: [1, 2, 3]
                },
                {
                    name: 'show',
                    type: 'bar',
                    barWidth: '4px',
                    itemStyle: {
                        borderRadius: [0, 0, 0, 0],
                        normal: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                                offset: 0,
                                color: 'rgba(59, 150, 235, 0.1)'
                            }, {
                                offset: 1,
                                color: '#3b96eb'
                            }], false)
                        }
                    },
                    markPoint: {
                        symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAYAAAA71pVKAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdEN0ZCRTVBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdEN0ZCRTZBMUJBMTFFQkE2NTJGMjkxNkVGRjdGMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0Q3RkJFM0ExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q3RkJFNEExQkExMUVCQTY1MkYyOTE2RUZGN0YyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvpJkncAAAI7SURBVHjafFNLaxNRFD73zjOZpE2ampa2agwtiCAuBBdxJQpq0bUrl+JjIYqb4i9w4aa7gksRXboTBC2KQl24kEILvghinybmMU1m7mTu3J6TTmAo1tnMvfd83znf+e657MILBQd8LLH+J0jfT7hV2iwZWjTHgF1G9hiythSoVz3JHy1Ux6vJRDxJvFPemLU09UmC/veXSF971zp0nP60p3OKJxWxWDa7UdosO7r6WAtTt790cmumBgXOwI4U+IGE+imnOTmqewudkFWeVMd/koKBbGZzeBiA8XzVz7XzNlTSOsxoHLIyArcbwjc8Xz6TCZ/ZPJxD/M0kmXMNLlYD565jwMkRG85hghNYfUhIcJs+TKFW9rvnfCibrfm43YjIbCIDGkos1nuWHLJghojFNEzjGtoCitQkJlmr+faPaas1Rvj1HZD9ylKRCaw2YoaTiptZqkjEYWtPVlNAVmOQLWAccX/28LHbGFChYm8P2/5Z6hENamNFaIl+ZcC9iwR3yvYqiFsk/OCeFUnY8M3Hpax4kzOCpw3fXIkr9nvGJCvDehBmuJitdszzhE8aFi3Wcl+vGo37R9LufIellrYDa0lIziwtUhOWGHWUd32rq98jHOGTE6bqHgSvt/MvT+d3vh91vAfHTHEJryqHbTS7vej9ase68rmRWSbcYMpYYrbJBK2QAjNtQArDFpI1JEuMiG4PvJgoB2R93/BLBPgEousIQmBkzrrbJ0QxRh30MAbBKDblv69qV4ABAOvFCo1MtxZ0AAAAAElFTkSuQmCC',
                        symbolSize: [10, 10],
                        data: []
                    },
                    data: [],
                    z: 3
                }
            ]
            const seriesData = [{}, {}]
            seriesData[0] = this.deepMerge({}, defSeriesData[0], this.option.seriesData[0])
            seriesData[1] = this.deepMerge({}, defSeriesData[1], this.option.seriesData[1])
            return seriesData
        }
    }
}
</script>
