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

<script>
import mixinChart from 'runner/common/mixins/mixinChart'
export default {
    name: 'lineBar',

    mixins: [mixinChart],

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

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

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

    mounted () {
        this.initComponents()
    },

    methods: {
        initComponents () {
            const { width = '', height = '' } = this.layout
            const option = this.getChartOption() || {}
            this.barChartConf = {
                width,
                height,
                option,
                id: 'line-bar-chart-id' + this.utils.randomStr()
            }
        },

        /**
         * @method getSeriesData 图表数据
         */
        getSeriesData (data) {
            const defSeriesOpts = {
                name: 'back',
                type: 'bar',
                barWidth: '4px',
                itemStyle: {
                    borderRadius: [0, 0, 0, 0],
                    normal: {
                        color: '#233549'
                    }
                },
                barGap: '-100%',
                data: []
            }
            let result = [defSeriesOpts]
            const { seriesData = [] } = this.option
            console.log(this.option)
            if (seriesData.length) {
                const temp = []
                seriesData.forEach(item => {
                    temp.push(this.deepMerge({}, defSeriesOpts, item))
                })
                result = temp
            }
            return result
        },

        /**
         * @method getChartOption 图表配置
         */
        getChartOption (customOption = {}) {
            const defaultOption = {
                title: {
                    show: false
                },
                grid: {
                    left: 0,
                    right: 5,
                    bottom: 0,
                    top: 0,
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    splitLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    }
                },
                yAxis: [
                    {
                        type: 'category', // y 轴左侧的数据
                        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', // y 轴右侧的数据
                        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: []
                    }
                ]
            }
            const result = this.deepMerge({}, defaultOption, this.option.base)
            result.series = this.getSeriesData()

            return result
        }
    }
}
</script>
