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

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

export default {
    name: 'ChinaMap',

    mixins: [mixinChart],

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

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

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

    mounted () {
        this.initComponents()
    },

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

        /**
         * @method getSeriesData 图表数据
         */
        getSeriesData () {
            const defSeriesOpts = {
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 4, // 箭头指向速度，值越小速度越快
                    trailLength: 0.02, // 特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', // 箭头图标
                    color: '#31E4FF',
                    symbolSize: 5 // 图标大小
                },
                lineStyle: {
                    show: true,
                    normal: {
                        width: 0.5, // 尾迹线条宽度
                        opacity: 1, // 尾迹线条透明度
                        color: '#fff',
                        curveness: 0.3 // 尾迹线条曲直度
                    }
                },
                data: []
            }

            // ================= 以下无需改动 ==================
            let result = [defSeriesOpts]
            const { seriesData = [] } = this.option
            if (seriesData.length) {
                const temp = []
                seriesData.forEach(item => {
                    temp.push(this.deepMerge({}, defSeriesOpts, item))
                })
                result = temp
            }

            // ================== 如果有多个series且`type`与当前不同在下方直接push ===================
            // result.push({
            //      type: 'Gauge'
            //      ...
            // })

            return result
        },

        /**
         * @method getSeriesData 图表数据
         */
        getChartOption () {
            const defaultOption = {
                // ================== 除series外的其他所有option ==================
                tooltip: {
                    trigger: 'item',
                    borderColor: '#FFFFCC',
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: 'z-index:100',
                    formatter: function (params, ticket, callback) {
                        // 根据业务自己拓展要显示的内容
                        var name = params.name
                        return name
                    }
                },
                visualMap: { // 图例值控制
                    show: false,
                    color: ['#31EEFF']
                },
                geo: {
                    map: 'china',
                    zoom: 1.2,
                    label: {
                        show: true,
                        fontSize: 16,
                        color: '#E6EFF9'
                    },
                    roam: false, // 是否允许缩放
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 16,
                            color: '#E6EFF9'
                        }
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#00192E',
                            borderWidth: 1, // 设置外层边框
                            borderColor: '#126490'
                        },
                        emphasis: {
                            areaColor: '#00192E',
                            shadowColor: '#11638E',
                            shadowBlur: 20,
                            label: {
                                color: '#fff',
                                fontSize: 20
                            }
                        }
                    }
                }
            }

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

            return result
        }
    }
}
</script>
