<template>
    <div
        :class="type"
        style="display:inline-block;overflow: hidden;position: relative;"
        :style="{width}"
    >
        <div class="echarts-box"></div>
        <chart :options="opt" ref="map" autoresize class="echart" />
    </div>
</template>
<script>
import ECharts from "../../src/components/ECharts";
import chinaMap from "./mapJson/china.json";
import hpMap from "./mapJson/hp.json";
import wuHanMap from "./mapJson/wuhan.json";

import "echarts/lib/component/legend";
import "echarts/lib/component/tooltip";
import "echarts/lib/chart/effectScatter";
import "echarts/map/js/world";
import "echarts/lib/chart/map";

ECharts.registerMap("china", chinaMap);
ECharts.registerMap("hp", hpMap);
ECharts.registerMap("wuhan", wuHanMap);

import getMap from "../../src/_unit/map";
export default {
    name: "DoMap",
    components: {
        chart: ECharts
    },
    data() {
        return {
            interval: null
        };
    },
    props: {
        width: {
            type: String,
            default: () => {
                return "600px";
            }
        },
        formatter: {
            type: Function,
            default: params => {
                return `<span class="mapTooltipStyle"></span>${params.name}`;
            }
        },
        type: {
            type: String,
            validator: function(value) {
                return ["china", "hp", "wuhan"].indexOf(value) !== -1;
            },
            default: () => {
                return "china";
            }
        },
        labelText: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        mapData: {
            type: Array,
            default: () => {
                return [
                    { name: "大庆", value: [125.03, 46.58] },
                    { name: "武汉", value: [114.31, 30.52] },
                    { name: "合肥", value: [117.27, 31.86] },
                    { name: "菏泽", value: [115.480656, 35.23375] },
                    { name: "廊坊", value: [116.7, 39.53] },
                    { name: "衢州", value: [118.88, 28.97] }
                ];
            }
        },
        animation: {
            type: Boolean,
            default: () => {
                return false;
            }
        },
        animationTime: {
            type: Number,
            default: () => {
                return 1000;
            }
        },
        changeOpt:{
            type: Object
        }, 
        mapOpt:{
            type: Object
        }
    },
    watch: {
        animation: {
            immediate: true,
            handler(val) {
                if (val) {
                    this.animationFunction();
                } else {
                    this.stopAnimation();
                }
            }
        }
    },
    computed: {
        opt() {
            return getMap(
                this.mapData,
                this.type,
                this.labelText,
                this.formatter
            );
        }
    },
    methods: {
        animationFunction() {
            let dataIndex = -1;
            let map = this.$refs.map;
            let dataLen = map.options.series[0].data.length;
            this.interval = setInterval(() => {
                map.dispatchAction({
                    type: "downplay",
                    seriesIndex: 0,
                    dataIndex
                });
                dataIndex = (dataIndex + 1) % dataLen;
                map.dispatchAction({
                    type: "highlight",
                    seriesIndex: 0,
                    dataIndex
                });
                map.dispatchAction({
                    type: "showTip",
                    seriesIndex: 0,
                    dataIndex
                });
            }, this.animationTime);
        },
        stopAnimation() {
            clearInterval(this.interval);
        }
    },
    mounted() {
        if (this.animation) {
            this.animationFunction();
        }
    }
};
</script>
<style>
.mapTooltipStyle {
    display: inline-block;
    margin-right: 5px;
    border-radius: 10px;
    width: 10px;
    height: 10px;
    background-color: #f9f11b;
}
</style>
<style lang="stylus">
.echarts-box
    padding-bottom: 66.66%
    width: 100%
    height: 0
.china
    background: url('../../src/assets/mapBg.png') no-repeat
    background-size: 70%
    background-position: center
.hp
    background: url('../../src/assets/hpBg.png') no-repeat
    background-size: 26.35%
    background-position: center
.wuhan
    background: url('../../src/assets/wuHanBg.png') no-repeat
    background-size: 39.6%
    background-position: center
.echart
    width: 100%
    height: 100%
    position: absolute
    top: 0
    left: 0
</style>