<template>
    <chart-el :chartOpt="chartConf" />
</template>

<script>
import mixinChart from 'runner/common/mixins/mixinChart'

export default {
    name: 'GuagePart',

    mixins: [mixinChart],

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

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

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

    mounted () {
        this.initComponents()
    },

    methods: {
        initComponents () {
            const { width = '', height = '' } = this.layout
            const option = this.getChartOption() || {}
            this.chartConf = {
                width,
                height,
                option
            }
        },

        /**
         * @method getSeriesData 图表数据
         */
        getSeriesData () {
            const defSeriesOpts = [{
                // ================== series ==================
                seriesName: 'main',
                type: 'gauge',
                radius: '100%',
                clockwise: false,
                startAngle: 0,
                endAngle: -270,
                progress: {
                    show: true,
                    width: 7,
                    itemStyle: {
                        color: '#3EB8F7'
                    }
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 10,
                        color: [[1, '#13293C']]
                    }
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    show: false
                },
                anchor: {
                    show: false
                },
                title: {
                    show: true,
                    fontSize: 18,
                    fontFamily: 'CenturyGothic',
                    color: '#ffffff',
                    fontWeight: '400',
                    offsetCenter: [0, '30%']
                },
                detail: {
                    valueAnimation: true,
                    formatter: function (value) {
                        return value
                    },
                    fontSize: 30,
                    fontWeight: '400',
                    color: '#ffffff',
                    fontFamily: 'MicrosoftYaHei',
                    offsetCenter: [0, '-20%']
                },
                data: []
            }]

            // ================= 以下无需改动 ==================
            // 该模板适用于series内部的多个图表配置差异较大的情况，传入的series对象会与组件中seriesName相同的对象进行合并，如无相同seriesName则添加到末尾
            const result = defSeriesOpts
            const { seriesData = [] } = this.option
            if (seriesData.length) {
                const filterData = seriesData.filter(v => this.utils.isObject(v)) || []
                for (let i = 0, len = filterData.length; i < len; i++) {
                    const item = filterData[i] || {}
                    const matchIndex = defSeriesOpts.findIndex(g => g.seriesName === item.seriesName)
                    if (matchIndex > -1) {
                        const newTempSeriesObj = this.deepMerge({}, result[matchIndex], item)
                        result[matchIndex] = newTempSeriesObj
                    } else {
                        // 新增的series必须配置`type`属性
                        item.type && result.push(item)
                    }
                }
            }
            return result
        },

        /**
         * @method getSeriesData 图表数据
         */
        getChartOption () {
            const defaultOption = {
                // ================== 除series外的其他所有option ==================
            }

            // ================== 以下无需改动 ==================
            // 添加series
            const result = this.deepMerge({}, defaultOption, this.option.base || {})
            result.series = this.getSeriesData()
            return result
        }
    }
}
</script>
