<template>
    <div class="svg-map">
        <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">
                    <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">
                    <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="399"
                id="map-main"
                xlink:href="data:image/png;base64,[encoded data, 497944 characters]"
                transform="matrix(1 0 0 1 -166.6753 9.6679)"
            ></image>

            <image
                style="overflow: visible"
                width="409"
                height="200"
                id="map-mask-float-down"
                xlink:href="data:image/png;base64,[encoded data, 25720 characters]"
                transform="matrix(1 0 0 1 185.3685 166.1679)"
            ></image>
            <image
                style="overflow: visible"
                width="740"
                height="337"
                id="map-mask-float-up"
                xlink:href="data:image/png;base64,[encoded data, 35980 characters]"
                transform="matrix(1 0 0 1 3 11.6679)"
            ></image>

            <image
                style="overflow: visible"
                width="912"
                height="368"
                id="map-img-float-up"
                xlink:href="data:image/png;base64,[encoded data, 322912 characters]"
                transform="matrix(1 0 0 1 -166.6753 0)"
            ></image>
            <image
                style="overflow: visible"
                width="410"
                height="230"
                id="map-img-float-down"
                xlink:href="data:image/png;base64,[encoded data, 165220 characters]"
                transform="matrix(1 0 0 1 184.0929 153.7653)"
            ></image>

            <g>
                <use xlink:href="#nx-map-line" x="220" y="25" />
                <use xlink:href="#nx-map-circle" x="220" y="25" />
                <rect
                    x="245"
                    y="20"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <text x="250" y="37" fill="#919697" font-size="14">
                    3#集电线
                </text>
                <text x="315" y="37" fill="#05bb4c" font-size="14">11台</text>
            </g>
            <g>
                <use xlink:href="#nx-map-line" x="480" y="82" />
                <use xlink:href="#nx-map-circle" x="480" y="82" />
                <rect
                    x="505"
                    y="78"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <text x="510" y="95" fill="#919697" font-size="14">
                    4#集电线
                </text>
                <text x="575" y="95" fill="#05bb4c" font-size="14">11台</text>
            </g>
            <g>
                <use xlink:href="#nx-map-line" x="260" y="132" />
                <use xlink:href="#nx-map-circle" x="260" y="132" />
                <rect
                    x="285"
                    y="127"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <text x="290" y="144" fill="#919697" font-size="14">
                    2#集电线
                </text>
                <text x="355" y="144" fill="#05bb4c" font-size="14">11台</text>
            </g>
            <g>
                <use xlink:href="#nx-map-line" x="340" y="202" />
                <use xlink:href="#nx-map-circle" x="340" y="202" />
                <rect
                    x="365"
                    y="197"
                    width="110"
                    height="23"
                    stroke="#46C55A35"
                    fill="#000000"
                    opacity="0.8"
                />
                <text x="370" y="214" fill="#919697" font-size="14">
                    1#集电线
                </text>
                <text x="435" y="214" fill="#05bb4c" font-size="14">11台</text>
            </g>

            <line
                x1="140"
                y1="320"
                x2="330"
                y2="320"
                stroke="#05bb4c"
                stroke-dasharray="8 4"
                stroke-width="1"
            />
            <text x="140" y="340" fill="#ffffff" font-size="14">一期</text>

            <line
                x1="580"
                y1="130"
                x2="680"
                y2="130"
                stroke="#05bb4c"
                stroke-dasharray="8 4"
                stroke-width="1"
            />
            <text x="650" y="120" fill="#ffffff" font-size="14">二期</text>
        </svg>
    </div>
</template>

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

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

    svg {
        position: absolute;
        left: 0;
    }

    #map-img-float-down,
    #map-img-float-up {
        opacity: 0;

        &:hover {
            opacity: 1;
        }
    }

    #map-mask-float-up {
        display: none;
    }

    #nx-map-circle {
        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>
