<template>
    <div class="managePlatform-center">
        <div class="survey-content">
            <div class="item" v-for="(g, l) in survey" :key="l">
                <count-to :endVal="g.value" />
                <p>{{g.key}}</p>
            </div>
        </div>
        <div class="china-map-warp">
            <ChinaMap :option="chinaMapConfig" />
        </div>
        <div class="footer">
            <div class="item course">
                <title-line :con="'发展历程'"></title-line>
                <div class="courseModal">
                    2021年1月6日成立<br />
                    全省民营企业家学习弘扬张謇
                    精神高级研修班同日开班
                </div>
            </div>
            <div class="item framework">
                <title-line :con="'组织架构'"></title-line>
            </div>
        </div>
    </div>
</template>

<script>
import TitleLine from '@/components/TitleLine'
import ChinaMap from '@/components/echarts/ChinaMap'
import mapConfig from '@/components/echarts/ChinaMap/mapConfig'
export default {
    name: 'Center',
    components: {
        TitleLine,
        ChinaMap
    },
    props: {
        centerData: {
            default: {},
            type: Object
        }
    },
    data () {
        return {
            survey: [],
            chinaMapConfig: {
                base: {},
                seriesData: []
            },
            chinaGeoCoordMap: mapConfig.getChinaGeoCoordMap() || {},
            chinaDatas: mapConfig.getChinaDatas() || []
        }
    },

    mounted () {
        this.getInitChinaMap()
        this.initSurvey()
    },

    methods: {
        initSurvey () {
            if (this.centerData && this.centerData.survey && this.centerData.survey.list) {
                this.survey = this.centerData.survey.list || []
            }
        },
        getInitChinaMap () {
            let series = []
            let maps = [['南通', this.chinaDatas]]
            maps.forEach((item, i) => {
                series.push({
                    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: this.getConvertData(item[1])
                }, {
                    type: 'effectScatter',
                    coordinateSystem: 'geo',
                    showEffectOn: 'emphasis',
                    zlevel: 2,
                    label: {
                        show: false,
                        emphasis: {
                            show: false
                        }
                    },
                    symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAPCAYAAADQ4S5JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDgxMEZCNzdFRTcyMTFFQkIwQjdGOTUwNDY1OEIzNEUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDgxMEZCNzhFRTcyMTFFQkIwQjdGOTUwNDY1OEIzNEUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoyQUFDNDM5MkVFNzIxMUVCQjBCN0Y5NTA0NjU4QjM0RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0ODEwRkI3NkVFNzIxMUVCQjBCN0Y5NTA0NjU4QjM0RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pv2br9AAAAEvSURBVHjadNLNK4RRFMfx+4ypwSgrpZRSikljIUyzYEkpKztm60/wV1jaqikbEnnJythNNN5WytssJpqXLCZMRDTG9+r31PXErc/mnnvOued2PVNpGGe1YxhxRFDAEYr+gbBzuA0zmEe3YlXsYRm3boKHaSygH2U8IYYufGAJD36CrZjS4UOk8YwJ7c/hEqthVR/CAO6wiB0VOleHKYxhI6RAh2a4Qc6ZyxY4VbdORENO0HZqgrv3pb2I5m34wXs8YlDtm1VgBOM6bF/p1R/6AseY1bO2ooZJJHGFfXz+tEHJDoQ+JDCKd7So8zqyJnDfDLZ00NO1bLFtFXsLJrwouOs8wgnWkFfyrwS7rlXNPmMdm/pL9b/+klHgTFfrwYE6m/8SjD7cCnpRCQa/BRgAV1pIx3xXm3UAAAAASUVORK5CYII=',
                    symbolSize: 12,
                    symbolOffset: [-2, -4],
                    itemStyle: {
                        normal: {
                            show: false,
                            color: '#fff'
                        }
                    },
                    data: item[1].map((dataItem) => {
                        return {
                            name: dataItem[0].name,
                            value: this.chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                        }
                    })
                },
                    // 被攻击点
                {
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    zlevel: 2,
                    rippleEffect: {
                        period: 4,
                        brushType: 'stroke',
                        scale: 4
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            color: '#0f0',
                            formatter: '{b}',
                            textStyle: {
                                color: '#E6EFF9',
                                fontSize: 20,
                                fontFamily: 'YaHei'
                            }
                        },
                        emphasis: {
                            show: true,
                            color: '#E6EFF9'
                        }
                    },
                    symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDgxMEZCN0ZFRTcyMTFFQkIwQjdGOTUwNDY1OEIzNEUiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDgxMEZCODBFRTcyMTFFQkIwQjdGOTUwNDY1OEIzNEUiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0ODEwRkI3REVFNzIxMUVCQjBCN0Y5NTA0NjU4QjM0RSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0ODEwRkI3RUVFNzIxMUVCQjBCN0Y5NTA0NjU4QjM0RSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvmPbNUAAANOSURBVHjarJZNSFRRFIDfjGP+5GQaUVlEFBiWZFG2itRcBP0tEwpBiKg2LYpoU4uWBSW0cVH0S3/WqtIIUnLRImiRYaJCEmE/KioNMdOM00znwHfhcnvOPKEDn/M8795z3j3n3HNvyMtmvACySCgXSnn+jH6N8FNICDGec0okz/ulwnJhIWP164qEMO/LhEL+/yP8En4Ik/N1WCysFSoxNAsexrM8qy7Jc4gPWM+Hjgq/gzjU0FWzkoQXXPQjUjxXEpURN8whJ4ean1omJ/lqI5uEZkL8Qtgp1AvjwkehR/hgOS9i/gD5/cehDqgTChxnq4WTQiP/jwkdQoOwg0Iy8lq4KnyxnGpK+k3ow9ZgzdkCx5mu6JHlLJ80Mr4ZG0lsrvOsAjAxX0LOjLMm4SJVOB8pZF4jthLYrrRDWkv+TMVVCU99jGnlPRbuUnDbyO0+IuTKAeEbodU8DugKo5CyBp7zmXxPaBGes8++C8PCHfT3feac5zdl/KjDCgrF7K0aYbsz8YHQTj6OCG8pnofCMfRXGGdLPfay+KhQhyV0ECN7nUlq+DLNQKuzjZamuVopHEVfzLgxZ76xpz5KTNHEWXbKpyI70beSLz9R/WHGdTrvmtCrj5AmfsrqOLr0N8TbyBNhQtidpzr3CBcYX2vpY8zXxaUjVGfECmu3lU+PD4oSvlxSxbgpcmtLlBzORsihdos0L687La2V1qUtbFUOhxMY3ijcsPQZto/6iodxZI4YZcgxtAX9yzwr7GbcZkc/gl59pMN0ArvF9TsTDvJ702rOrqj+Ns8tzrv3VldL6J8ZGqwJY5czQcN4mrPthHCLE1/Pwq/CNfT6/pRP2LuwrT5m5mptHWxat9O0k/MRdNXWmanODjlz3gnH7dZmHGpj3WBNXiE8C9BLt7IH9+fppaUU3rR9HtbQ1eOEYJdwycdIrvPQljNCL++nhUH3PBylIxSxD3XwWesuE1RmmdeLLbX5yT0PPfI3xOqM0x6qri+gsz7Gv8KGh83kXHeaXJeoOk7yZVReA6fKOOHqsbZUCSsbzneJynVNzFrG/Ko0xOYuIGeBr4keAweti3AZhjIYDVnXicz/uAgbmYRy9qmubjGrzeIgRmUHuur/FWAAGbXtkJp9rz0AAAAASUVORK5CYII=',
                    symbolSize: 24,
                    data: [{
                        name: item[0],
                        value: this.chinaGeoCoordMap[item[0]].concat([10])
                    }]
                }
                )
            })

            this.chinaMapConfig = {
                base: {
                    tooltip: {
                        backgroundColor: 'rgba(50, 50, 50, 0)',
                        borderColor: 'rgba(50, 50, 50, 0)',
                        position: [180, 50],
                        formatter: function (params, ticket, callback) {
                            // 根据业务自己拓展要显示的内容
                            let name = params.name
                            if (name === '南通') {
                                return `<div style="width: 508px;height: 400px;background: url(${require('../../../static/images/index/mapFloatBG.png')}) no-repeat;"></div>`
                            } else {
                                return ''
                            }
                        },
                        textStyle: {
                            color: 'rgba(50, 50, 50, 0)'
                        }
                    }
                },
                seriesData: series
            }
        },
        getConvertData (data) {
            var res = []
            for (var i = 0; i < data.length; i++) {
                var dataItem = data[i]
                var fromCoord = this.chinaGeoCoordMap[dataItem[0].name]
                var toCoord = [120.864608, 32.016212] // 攻击的省市 经纬度
                if (fromCoord && toCoord) {
                    res.push([{
                        coord: fromCoord,
                        value: dataItem[0].value
                    }, {
                        coord: toCoord
                    }])
                }
            }
            return res
        }
    }
}
</script>

<style lang="less" scoped>
    .managePlatform-center {
        width: 100%;
        position: relative;
        .survey-content {
            width: 100%;
            display: flex;
            justify-content: center;
            margin-top: 20px;
            .item {
                width: 220px;
                height: 72px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                span {
                    font-size: 42px;
                    color: #FFFFFF;
                    font-weight: 400;
                } 
                p {
                    font-size: 18px;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
            .item:nth-child(2) {
                border-left: 1px solid rgba(89, 183, 249, 0.8);
                border-right: 1px solid rgba(89, 183, 249, 0.8);
            }
        }
        .china-map-warp {
            width: 100%;
            height: 750px;
            margin-top: -40px;
        }
        .footer {
            width: calc(100% - 30px);
            height: 270px;
            position: absolute;
            left: 15px;
            top: 740px;
            background: rgba(0, 7, 17, 0.18);
            padding: 10px 15px;
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            .item {
                width: 50%;
                height: 100%;
                box-sizing: border-box;
            }
            .course {
                background: url('../../../static/images/index/courseBG.png') left top 113px no-repeat;
            }
            .courseModal {
                width: 214px;
                height: 75px;
                background: rgba(0, 190, 255, 0.1);
                border: 1px solid;
                border-image: linear-gradient(176deg, rgba(61, 162, 242, 0), #3DA2F2, rgba(10, 79, 135, 0)) 1 1;
                box-sizing: border-box;
                padding: 8px 12px;
                font-size: 14px;
                font-weight: 300;
                color: #FFFFFF;
                line-height: 20px;
                margin-top: 10px;
            }
            .framework{
                padding-left: 42px;
                background: url('../../../static/images/index/frameworkBG.png') right top 43px no-repeat;
            }
        }
    }
</style>