<template>
    <div class="svg-map-nx">
        <svg
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 745.3 399"
            style="enable-background: new 0 0 745.3 399"
            xml:space="preserve"
            :width = "svgWidth"
            :height = "svgHeight"
        >
            <defs>
                <g id="nx-map-line-1">
                    <line
                        class="nx-map-line"
                        x1="25"
                        y1="25"
                        x2="25"
                        y2="80"
                        stroke="#edbf03"
                        stroke-width="1"
                    />
                    <circle
                        class="nx-map-up-circle"
                        cx="25"
                        cy="25"
                        r="2"
                        fill="#edbf03"
                    />
                </g>
                <g id="nx-map-circle-1">
                    <circle
                        class="nx-map-down-circle-1"
                        cx="25"
                        cy="80"
                        r="3"
                        fill="#edbf03"
                    />
                    <circle
                        class="nx-map-down-circle-2"
                        :class="{'nx-map-down-circle-loop' : c1}"
                        cx="25"
                        cy="80"
                        r="9"
                        stroke="#edbf03"
                        stroke-width="1"
                        fill="none"
                    >
                        <!-- <animate attributeType="XML" attributeName="r" from="3" to="20" dur="3s" repeatCount="indefinite"/>
                        <animate attributeType="XML" attributeName="opacity" values="1;1;1;1;1;0" dur="3s" repeatCount="indefinite"/> -->
                    </circle>
                    <circle
                        class="nx-map-down-circle-3"
                        :class="{'nx-map-down-circle-loop' : c2}"
                        cx="25"
                        cy="80"
                        r="16"
                        opacity="0.6"
                        stroke="#edbf03"
                        stroke-width="1"
                        fill="none"
                    >
                        <!-- <animate attributeType="XML" attributeName="r" from="3" to="20" dur="2s" repeatCount="indefinite"/>
                        <animate attributeType="XML" attributeName="opacity" values="1;1;1;1;1;0" dur="2s" repeatCount="indefinite"/> -->
                    </circle>
                </g>
                <g id="popup-box-svg">
                    <rect x="0" y="0" width="110" height="130" stroke="#46C55A35" fill="#000000" opacity="0.8" />
                    <circle cx="4" cy="4" r="2" fill="#ffffff">
                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="106" cy="4" r="2" fill="#ffffff">
                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="4" cy="126" r="2" fill="#ffffff">
                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
                    </circle>
                    <circle cx="106" cy="126" r="2" fill="#ffffff">
                        <animate attributeType="XML" attributeName="fill" values="#ffffff;transparent;#ffffff" dur="2s" repeatCount="indefinite"/>
                    </circle>
                </g>
            </defs>

            <image
                style="overflow: visible"
                width="912"
                height="340"
                id="map-main"
                xlink:href="data:image/png;base64,[encoded data, 561100 characters]"
                transform="matrix(1 0 0 1 -113 60.6679)"
            ></image>

            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click.stop="clickLabel('XS_FDC')" @mouseover="mouseover(0)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="150" y="195" />
                <use xlink:href="#nx-map-circle-1" x="150" y="195" />
                <!-- +25 -5 -->
                <rect
                    x="175"
                    y="190"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="180" y="207" fill="#919697" font-size="14">香山</text>
                <!-- +70 0 -->
                <text x="245" y="207" fill="#05bb4c" font-size="14">{{sourceMap.XS_FDC_zjts}}台</text>
            </g>
            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click.stop="clickLabel" @mouseover="mouseover(1)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="280" y="40" />
                <use xlink:href="#nx-map-circle-1" x="280" y="40" />
                <!-- +25 -5 -->
                <rect
                    x="305"
                    y="35"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="310" y="52" fill="#919697" font-size="14">马场湖</text>
                <!-- +70 0 -->
                <text x="375" y="52" fill="#05bb4c" font-size="14">{{sourceMap.MCH_GDC_zjts}}台</text>
            </g>
            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click.stop="clickLabel('XH_GDC')" @mouseover="mouseover(2)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="290" y="80" />
                <use xlink:href="#nx-map-circle-1" x="290" y="80" />
                <!-- +25 -5 -->
                <rect
                    x="315"
                    y="75"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="320" y="92" fill="#919697" font-size="14">宣和</text>
                <!-- +70 0 -->
                <text x="385" y="92" fill="#05bb4c" font-size="14">{{sourceMap.XH_GDC_zjts}}台</text>
            </g>
            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click.stop="clickLabel('NSS_FDC')" @mouseover="mouseover(3)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="410" y="65" />
                <use xlink:href="#nx-map-circle-1" x="410" y="65" />
                <!-- +25 -5 -->
                <rect
                    x="435"
                    y="60"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="440" y="77" fill="#919697" font-size="14">牛首山</text>
                <!-- +70 0 -->
                <text x="505" y="77" fill="#05bb4c" font-size="14">{{sourceMap.NSS_FDC_zjts}}</text>
            </g>
            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click="clickLabel('DWK_GDC')" @mouseover="mouseover(4)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="570" y="5" />
                <use xlink:href="#nx-map-circle-1" x="570" y="5" />
                <!-- +25 -5 -->
                <rect
                    x="595"
                    y="0"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="600" y="17" fill="#919697" font-size="14">大武口</text>
                <!-- +70 0 -->
                <text x="665" y="17" fill="#05bb4c" font-size="14">{{sourceMap.DWK_GDC_zjts}}台</text>
            </g>
            <g v-if="showType === 'all' || showType === 'gf'" class="item-label" @click="clickLabel('PL_GDC')" @mouseover="mouseover(5)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="590" y="30" />
                <use xlink:href="#nx-map-circle-1" x="590" y="30" />
                <!-- +25 -5 -->
                <rect
                    x="615"
                    y="25"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="620" y="42" fill="#919697" font-size="14">平罗</text>
                <!-- +70 0 -->
                <text x="685" y="42" fill="#05bb4c" font-size="14">{{sourceMap.PL_GDC_zjts}}台</text>
            </g>
            <g v-if="showType === 'all' || showType === 'fc'" class="item-label"  @click="clickLabel('SBQ_FDC')" @mouseover="mouseover(6)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="380" y="125" />
                <use xlink:href="#nx-map-circle-1" x="380" y="125" />
                <!-- +25 -5 -->
                <rect
                    x="405"
                    y="120"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="410" y="137" fill="#919697" font-size="14">石板泉</text>
                <!-- +70 0 -->
                <text x="475" y="137" fill="#05bb4c" font-size="14">{{sourceMap.SBQ_FDC_zjts}}台</text>
            </g>
            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click="clickLabel('MHS_FDC')" @mouseover="mouseover(7)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="390" y="155" />
                <use xlink:href="#nx-map-circle-1" x="390" y="155" />
                <!-- +25 -5 -->
                <rect
                    x="415"
                    y="150"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <!-- +5 +12| -->
                <text x="420" y="167" fill="#919697" font-size="14">麻黄山</text>
                <!-- +70 0 -->
                <text x="485" y="167" fill="#05bb4c" font-size="14">{{sourceMap.MHS_FDC_zjts}}台</text>
            </g>
            <g v-if="showType === 'all' || showType === 'fc'" class="item-label" @click="clickLabel('QS_FDC')" @mouseover="mouseover(8)" @mouseout="mouseout">
                <use xlink:href="#nx-map-line-1" x="430" y="180" />
                <use xlink:href="#nx-map-circle-1" x="430" y="180" />
                <!-- +25 -5 -->
                <rect x="455"
                      y="175"
                      width="110"
                      height="23"
                      stroke="#46C55A35"
                      fill="#000000"
                      opacity="0.8" />
                <!-- +5 +12| -->
                <text x="460" y="192" fill="#919697" font-size="14">青山</text>
                <!-- +70 0 -->
                <text x="525" y="192" fill="#05bb4c" font-size="14">{{sourceMap.QS_FDC_zjts}}台</text>
            </g>
            <g class="popup-layer-svg">
                <g v-show="popup[0]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="290" y="190" />
                    <text x="300" y="210" fill="#919697" font-size="14">经度</text>
                    <text x="350" y="210" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="300" y="235" fill="#919697" font-size="14">纬度</text>
                    <text x="350" y="235" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="300" y="260" fill="#919697" font-size="14">海拔</text>
                    <text x="350" y="260" fill="#05bb4c" font-size="14">1810</text>
                    <text x="300" y="285" fill="#919697" font-size="14">功率</text>
                    <text x="350" y="285" fill="#05bb4c" font-size="14">55</text>
                    <text x="300" y="310" fill="#919697" font-size="14">风速</text>
                    <text x="350" y="310" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[1]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="420" y="35" />
                    <text x="430" y="55" fill="#919697" font-size="14">经度</text>
                    <text x="480" y="55" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="430" y="80" fill="#919697" font-size="14">纬度</text>
                    <text x="480" y="80" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="430" y="105" fill="#919697" font-size="14">海拔</text>
                    <text x="480" y="105" fill="#05bb4c" font-size="14">1810</text>
                    <text x="430" y="130" fill="#919697" font-size="14">功率</text>
                    <text x="480" y="130" fill="#05bb4c" font-size="14">55</text>
                    <text x="430" y="155" fill="#919697" font-size="14">风速</text>
                    <text x="480" y="155" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[2]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="430" y="75" />
                    <text x="440" y="95" fill="#919697" font-size="14">经度</text>
                    <text x="490" y="95" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="440" y="120" fill="#919697" font-size="14">纬度</text>
                    <text x="490" y="120" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="440" y="145" fill="#919697" font-size="14">海拔</text>
                    <text x="490" y="145" fill="#05bb4c" font-size="14">1810</text>
                    <text x="440" y="170" fill="#919697" font-size="14">功率</text>
                    <text x="490" y="170" fill="#05bb4c" font-size="14">55</text>
                    <text x="440" y="195" fill="#919697" font-size="14">风速</text>
                    <text x="490" y="195" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[3]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="550" y="60" />
                    <text x="560" y="80" fill="#919697" font-size="14">经度</text>
                    <text x="610" y="80" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="560" y="105" fill="#919697" font-size="14">纬度</text>
                    <text x="610" y="105" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="560" y="130" fill="#919697" font-size="14">海拔</text>
                    <text x="610" y="130" fill="#05bb4c" font-size="14">1810</text>
                    <text x="560" y="155" fill="#919697" font-size="14">功率</text>
                    <text x="610" y="155" fill="#05bb4c" font-size="14">55</text>
                    <text x="560" y="180" fill="#919697" font-size="14">风速</text>
                    <text x="610" y="180" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[4]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="480" y="0" />
                    <text x="490" y="20" fill="#919697" font-size="14">经度</text>
                    <text x="540" y="20" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="490" y="45" fill="#919697" font-size="14">纬度</text>
                    <text x="540" y="45" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="490" y="70" fill="#919697" font-size="14">海拔</text>
                    <text x="540" y="70" fill="#05bb4c" font-size="14">1810</text>
                    <text x="490" y="95" fill="#919697" font-size="14">功率</text>
                    <text x="540" y="95" fill="#05bb4c" font-size="14">55</text>
                    <text x="490" y="120" fill="#919697" font-size="14">风速</text>
                    <text x="540" y="120" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[5]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="500" y="25" />
                    <text x="510" y="45" fill="#919697" font-size="14">经度</text>
                    <text x="560" y="45" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="510" y="70" fill="#919697" font-size="14">纬度</text>
                    <text x="560" y="70" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="510" y="95" fill="#919697" font-size="14">海拔</text>
                    <text x="560" y="95" fill="#05bb4c" font-size="14">1810</text>
                    <text x="510" y="120" fill="#919697" font-size="14">功率</text>
                    <text x="560" y="120" fill="#05bb4c" font-size="14">55</text>
                    <text x="510" y="145" fill="#919697" font-size="14">风速</text>
                    <text x="560" y="145" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[6]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="520" y="120" />
                    <text x="530" y="140" fill="#919697" font-size="14">经度</text>
                    <text x="580" y="140" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="530" y="165" fill="#919697" font-size="14">纬度</text>
                    <text x="580" y="165" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="530" y="190" fill="#919697" font-size="14">海拔</text>
                    <text x="580" y="190" fill="#05bb4c" font-size="14">1810</text>
                    <text x="530" y="215" fill="#919697" font-size="14">功率</text>
                    <text x="580" y="215" fill="#05bb4c" font-size="14">55</text>
                    <text x="530" y="240" fill="#919697" font-size="14">风速</text>
                    <text x="580" y="240" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[7]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="530" y="150" />
                    <text x="540" y="170" fill="#919697" font-size="14">经度</text>
                    <text x="590" y="170" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="540" y="195" fill="#919697" font-size="14">纬度</text>
                    <text x="590" y="195" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="540" y="220" fill="#919697" font-size="14">海拔</text>
                    <text x="590" y="220" fill="#05bb4c" font-size="14">1810</text>
                    <text x="540" y="245" fill="#919697" font-size="14">功率</text>
                    <text x="590" y="245" fill="#05bb4c" font-size="14">55</text>
                    <text x="540" y="270" fill="#919697" font-size="14">风速</text>
                    <text x="590" y="270" fill="#05bb4c" font-size="14">2</text>
                </g>
                <g v-show="popup[8]">
                    <!-- +5 (+10+50, +20)+25 -->
                    <use xlink:href="#popup-box-svg" x="570" y="175" />
                    <text x="580" y="195" fill="#919697" font-size="14">经度</text>
                    <text x="630" y="195" fill="#05bb4c" font-size="14">37.43</text>
                    <text x="580" y="220" fill="#919697" font-size="14">纬度</text>
                    <text x="630" y="220" fill="#05bb4c" font-size="14">105.59</text>
                    <text x="580" y="245" fill="#919697" font-size="14">海拔</text>
                    <text x="630" y="245" fill="#05bb4c" font-size="14">1810</text>
                    <text x="580" y="270" fill="#919697" font-size="14">功率</text>
                    <text x="630" y="270" fill="#05bb4c" font-size="14">55</text>
                    <text x="580" y="295" fill="#919697" font-size="14">风速</text>
                    <text x="630" y="295" fill="#05bb4c" font-size="14">2</text>
                </g>
            </g>
        </svg>
    </div>
</template>

<script>
export default {
    // 名称
    name: "SvgMapNX",
    // 使用组件
    components: {},
    // 传入参数
    props: {
      show:{
        type:String,
        default:"all"
      },
      data:{
        type:Object,
        default:() => {}
      }
    },
    // 自定义事件
    emits: {
        clickLabel: null,
    },
    // 数据
    data() {
        return {
            popup: [false, false, false, false, false, false, false, false, false],
            showType:"",
            sourceMap:{},
            c1: false,
            c2: false,
            svgWidth: "791px",
            svgHeight: "423px"
        };
    },
    // 函数
    methods: {
        clickLabel(wpId) {
           this.$emit("clickLabel", wpId);
        },
        popupHide: function () {
            for (let i = 0; i < this.popup.length; i++) {
                this.popup[i] = false;
            }
        },
        mouseover: function (index) {
            this.popupHide();
            this.popup[index] = true;
        },
        mouseout: function () {
            this.popupHide();
        },
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
        setTimeout(() => {
            this.c1 = true;
            setTimeout(() => {
                this.c2 = true;
            }, 500);
        }, 2000);
    },
    
    mounted() {
        // 渲染后
        this.svgWidth = this.$el.scrollWidth.toFixed(0) + "px";
        this.svgHeight = this.$el.scrollHeight.toFixed(0) + "px";
        this.showType = this.show;
        this.sourceMap = this.data;
    },
    
    watch:{
      show(res){
        this.showType = res;
      },
      data(res){
        this.sourceMap = res;
      }
    }
};
</script>

<style lang="less" scoped>
.svg-map-nx {
    position: relative;

    svg {
        position: absolute;
        left: 0;
    }

    .item-label {
        cursor: pointer;
    }

    #nx-map-circle-1 {
        transform-origin: 50% 20%;
        transform: rotateX(38deg);
    }

    .nx-map-up-circle {
        animation: nxMapUpCircle 4s linear;
    }
    @keyframes nxMapUpCircle {
        0% {
            r: 0;
        }

        10% {
            r: 2;
        }

        99% {
            r: 2;
        }

        100% {
            r: 0;
        }
    }

    .nx-map-line {
        stroke-dasharray: 60, 100;
        animation: nxMapLine 4s linear;
    }
    @keyframes nxMapLine {
        0% {
            stroke-dashoffset: 60;
        }

        10% {
            stroke-dashoffset: 60;
        }

        20% {
            stroke-dashoffset: 0;
        }

        99% {
            stroke-dashoffset: 0;
        }

        100% {
            stroke-dashoffset: 60;
        }
    }

    .nx-map-down-circle-1 {
        animation: nxMapDownCircle1 4s linear;
    }
    @keyframes nxMapDownCircle1 {
        0% {
            r: 0;
        }

        20% {
            r: 0;
        }

        30% {
            r: 3;
        }

        50% {
            r: 3;
        }

        99% {
            r: 3;
        }

        100% {
            r: 3;
        }
    }

    .nx-map-down-circle-2 {
        animation: nxMapDownCircle2 4s linear;
    }
    @keyframes nxMapDownCircle2 {
        0% {
            r: 0;
        }

        20% {
            r: 0;
        }

        40% {
            r: 9;
        }

        50% {
            r: 9;
        }

        99% {
            r: 9;
        }

        100% {
            r: 0;
        }
    }

    .nx-map-down-circle-3 {
        animation: nxMapDownCircle3 4s linear;
    }
    @keyframes nxMapDownCircle3 {
        0% {
            r: 0;
        }

        20% {
            r: 0;
        }

        50% {
            r: 16;
        }

        99% {
            r: 16;
        }

        100% {
            r: 0;
        }
    }

    .nx-map-down-circle-loop {
        animation: nxMapDownCircleLoop 2s linear infinite;
    }
    @keyframes nxMapDownCircleLoop {
        0% {
            r: 0;
            opacity: 1;
        }

        80% {
            r: 16;
            opacity: 0.8;
        }

        100% {
            r: 20;
            opacity: 0;
        }
    }
}
</style>
