<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"
        >
            <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"
                    />
                    <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"
                    />
                </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>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">126台</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">66MW</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">66MW</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">126台</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">66MW</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">66MW</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">126台</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">126台</text>
            </g>
            <g>
                <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"
                    class="item-label"
                    @click="clickLabel"
                />
                <!-- +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">126台</text>
            </g>
        </svg>
    </div>
</template>

<script>
export default {
    // 名称
    name: "SvgMapNX",
    // 使用组件
    components: {},
    // 传入参数
    props: {},
    // 自定义事件
    emits: {
        clickLabel: null,
    },
    // 数据
    data() {
        return {
            c1: false,
            c2: false,
        };
    },
    // 函数
    methods: {
        clickLabel: function () {
           this.$emit("clickLabel");
        },
        mouseover() {},
    },
    // 生命周期钩子
    beforeCreate() {
        // 创建前
    },
    created() {
        // 创建后
        setTimeout(() => {
            this.c1 = true;
            setTimeout(() => {
                this.c2 = true;
            }, 500);
        }, 2000);
    },
    beforeMount() {
        // 渲染前
    },
    mounted() {
        // 渲染后
    },
    beforeUpdate() {
        // 数据更新前
    },
    updated() {
        // 数据更新后
    },
};
</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 infinite;
    }
    @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 infinite;
    }
    @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>
