<template>
    <svg class="stand-alone-img" viewBox="0 0 1570 1070" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
        <defs>
            <!-- 变桨 -->
            <path class="stand-alone-img-path" id="pitch" fill="#BA3237" opacity="0.6" stroke="#05BB4C" stroke-width="6"
                d="M27.62,60.304l160.03,48.361l3.518,29.016L3,84.044c0,0,2.227-9.026,8.605-15.174C17.522,63.166,27.62,60.304,27.62,60.304z" />
            <!-- 机舱 -->
            <path class="stand-alone-img-path" id="engine-room" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
                stroke-width="6"
                d="M295.172,87.062c-3.13-13.486-14.851-16.73-14.851-16.73L-468.878-79.698l-16.143-12.344l-63.62-24.688l-11.395,5.697l-126.291-47.478c0,0-35.843,9.664-58.729,35.366c-35.833,40.244-64.713,103.269-64.713,103.269l-0.949,24.688L79.016,185.228c0,0,12.043,3.038,24.665,4.067c10.436,0.853,21.862-0.27,21.862-0.27l167.122-65.519C292.665,123.507,298.214,100.157,295.172,87.062z" />
            <!-- 齿轮箱 -->
            <path class="stand-alone-img-path" id="gear-box" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
                stroke-width="6"
                d="M177.396,18.822L86.052,2.504L11.984,177.197l88.787,16.317l43.275-98.657l31.637,6.959l4.997-19.08l-27.789-6.13L177.396,18.822z" />
            <!-- 发电机 -->
            <path class="stand-alone-img-path" id="alternator" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
                stroke-width="6"
                d="M14.016,175.068L118.433,198.6l30.883-99.516l18.095-54.753l12.79-13.878L39.996,2.021L22.838,55.454L14.016,175.068z" />
            <!-- 偏航 -->
            <path class="stand-alone-img-path" id="yaw" fill="#BA3237" opacity="0.6" stroke="#05BB4C" stroke-width="6"
                d="M210.152,130.465l-68.025-12.017c0,0-75.83,0.199-135.799-12.484c-67.41-14.257-97.892-41.659-97.892-41.659s-11.844,12.318,2.256,25.502c20.491,19.159,98.496,43.978,176.047,51.625c97.358,9.599,181.853,1.301,181.853,1.301l1.241-10.201L210.152,130.465z" />
            <!-- 液压 -->
            <path class="stand-alone-img-path" id="hydraulic-pressure" fill="#BA3237" opacity="0.6" stroke="#05BB4C"
                stroke-width="6"
                d="M82.965,111.483l7.241-72.311l-56.954-8.682L3,181.489l44.656,0.79c0.946,1.133,82.424,16.771,82.424,16.771l7.024-83.744L82.965,111.483z" />
            <!-- 圆圈圈 -->
            <g id="stand-alone-circle-bj">
                <circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 3,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
                <circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 3,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
                <circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 3,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
                <circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 3,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
            </g>
            <g id="stand-alone-circle-jc">
                <circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 6,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
                <circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 6,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
                <circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 6,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
                <circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 6,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
            </g>
            <g id="stand-alone-circle-clx">
                <circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 2,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
                <circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 2,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
                <circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 2,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
                <circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 2,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
            </g>
            <g id="stand-alone-circle-fdj">
                <circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 1,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
                <circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 1,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
                <circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 1,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
                <circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 1,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
            </g>
            <g id="stand-alone-circle-ph">
                <circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 4,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
                <circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 4,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
                <circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 4,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
                <circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 4,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
            </g>
            <g id="stand-alone-circle-yy">
                <circle :class="{
                        'stand-alone-circle1': StandAloneCircle1 && hover == 5,
                    }" cx="0" cy="0" r="10" fill="#edbf03" />
                <circle :class="{
                        'stand-alone-circle2': StandAloneCircle2 && hover == 5,
                    }" cx="0" cy="0" r="20" fill="none" stroke="#edbf03" stroke-width="2" />
                <circle :class="{
                        'stand-alone-circle3': StandAloneCircle3 && hover == 5,
                    }" cx="0" cy="0" r="30" fill="none" stroke="#edbf03" stroke-width="1" />
                <circle :class="{
                        'stand-alone-circle4': StandAloneCircle4 && hover == 5,
                    }" cx="0" cy="0" r="45" fill="none" stroke="#edbf03" stroke-width="1" />
            </g>
        </defs>
        <!-- 背景图片 -->
        <image x="0" y="90" height="787" width="1570"
            xlink:href="data:image/png;base64,[encoded data, 568104 characters]" />
        <!-- 变桨 -->
        <g class="stand-alone-img-g" :class="{ active: activeIndex == 3 }" @mouseover="mouseover(3)"
            @mouseout="mouseout" @click="click(3)">
            <use class="stand-alone-img-item" xlink:href="#pitch" x="214" y="110"
                transform="translate(110, 190) scale(0.7)" />
            <use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-bj" x="320" y="330" />
            <line :class="{ 'stand-alone-line': line && hover == 3 }" x1="320" y1="330" x2="620" y2="130"
                stroke="#edbf03" stroke-width="10" />
            <circle :class="{ 'stand-alone-circle': circle && hover == 3 }" cx="620" cy="130" r="5" fill="#edbf03" />
            <text :class="{ 'stand-alone-text': text && hover == 3 }" x="630" y="130" fill="#05BB4C" font-size="100">
                变桨
            </text>
        </g>
        <!-- 机舱 -->
        <!-- <g class="stand-alone-img-g" :class="{ active: activeIndex == 6 }" @mouseover="mouseover(6)"
            @mouseout="mouseout" @click="click(6)">
            <use class="stand-alone-img-item" xlink:href="#engine-room" x="1270" y="395" />
            <use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-jc" x="750" y="380" />
            <line :class="{ 'stand-alone-line': line && hover == 6 }" x1="750" y1="380" x2="1050" y2="80"
                stroke="#edbf03" stroke-width="2" />
            <circle :class="{ 'stand-alone-circle': circle && hover == 6 }" cx="1050" cy="80" r="5" fill="#edbf03" />
            <text :class="{ 'stand-alone-text': text && hover == 6 }" x="1060" y="80" fill="#05BB4C" font-size="100">
                机舱
            </text>
        </g> -->
        <!-- 齿轮箱 -->
        <g class="stand-alone-img-g" :class="{ active: activeIndex == 2 }" @mouseover="mouseover(2)"
            @mouseout="mouseout" @click="click(2)">
            <use class="stand-alone-img-item" xlink:href="#gear-box" x="730" y="335"
                transform="translate(220, 280) scale(0.7)" />
            <use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-clx" x="800" y="550" />
            <line :class="{ 'stand-alone-line': line && hover == 2 }" x1="800" y1="550" x2="1100" y2="250"
                stroke="#edbf03" stroke-width="10" />
            <circle :class="{ 'stand-alone-circle': circle && hover == 2 }" cx="1100" cy="250" r="5" fill="#edbf03" />
            <text :class="{ 'stand-alone-text': text && hover == 2 }" x="1110" y="250" fill="#05BB4C" font-size="100">
                齿轮箱
            </text>
        </g>
        <!-- 发电机 -->
        <g class="stand-alone-img-g" :class="{ active: activeIndex == 1 }" @mouseover="mouseover(1)"
            @mouseout="mouseout" @click="click(1)">
            <use class="stand-alone-img-item" xlink:href="#alternator" x="900" y="385"
                transform="translate(300, 260) scale(0.7)" />
            <use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-fdj" x="990" y="580" />
            <line :class="{ 'stand-alone-line': line && hover == 1 }" x1="990" y1="580" x2="1290" y2="880"
                stroke="#edbf03" stroke-width="10" />
            <circle :class="{ 'stand-alone-circle': circle && hover == 1 }" cx="1290" cy="880" r="5" fill="#edbf03" />
            <text :class="{ 'stand-alone-text': text && hover == 1 }" x="1300" y="920" fill="#05BB4C" font-size="100">
                发电机
            </text>
        </g>
        <!-- 偏航 -->
        <g class="stand-alone-img-g" :class="{ active: activeIndex == 4 }" @mouseover="mouseover(4)"
            @mouseout="mouseout" @click="click(4)">
            <use class="stand-alone-img-item" xlink:href="#yaw" x="675" y="645" />
            <use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-ph" x="650" y="750" />
            <line :class="{ 'stand-alone-line': line && hover == 4 }" x1="650" y1="750" x2="360" y2="860"
                stroke="#edbf03" stroke-width="10" />
            <circle :class="{ 'stand-alone-circle': circle && hover == 4 }" cx="360" cy="860" r="5" fill="#edbf03" />
            <text :class="{ 'stand-alone-text': text && hover == 4 }" x="160" y="950" fill="#05BB4C" font-size="100">
                偏航
            </text>
        </g>
        <!-- 液压 -->
        <g class="stand-alone-img-g" :class="{ active: activeIndex == 5 }" @mouseover="mouseover(5)"
            @mouseout="mouseout" @click="click(5)">
            <use class="stand-alone-img-item" xlink:href="#hydraulic-pressure" x="775" y="455"
                transform="translate(260, 310) scale(0.7)" />
            <use class="stand-alone-img-item-circle" xlink:href="#stand-alone-circle-yy" x="850" y="730" />
            <line :class="{ 'stand-alone-line': line && hover == 5 }" x1="850" y1="730" x2="1150" y2="1030"
                stroke="#edbf03" stroke-width="10" />
            <circle :class="{ 'stand-alone-circle': circle && hover == 5 }" cx="1150" cy="1030" r="5" fill="#edbf03" />
            <text :class="{ 'stand-alone-text': text && hover == 5 }" x="1160" y="1030" fill="#05BB4C" font-size="100">
                液压
            </text>
        </g>
    </svg>
</template>

<script>
    export default {
        // 名称
        name: "StandAloneImg",
        // 使用组件
        components: {},
        // 数据
        data() {
            return {
                StandAloneCircle1: false,
                StandAloneCircle2: false,
                StandAloneCircle3: false,
                StandAloneCircle4: false,
                line: false,
                circle: false,
                text: false,
                hover: 0,
            };
        },
        props: {
            activeIndex: {
                type: Number,
                default: 0,
            },
        },
        emits: {
            // 选中事件
            selectSvg: null,
        },
        // 函数
        methods: {
            mouseover: function (hIndex) {
                this.StandAloneCircle1 = false;
                this.StandAloneCircle2 = false;
                this.StandAloneCircle3 = false;
                this.StandAloneCircle4 = false;
                this.line = false;
                this.circle = false;
                this.text = false;
                this.StandAloneCircle1 = true;
                this.StandAloneCircle2 = true;
                this.StandAloneCircle3 = true;
                this.StandAloneCircle4 = true;
                this.line = true;
                this.circle = true;
                this.text = true;
                // this.hover = hIndex;
                this.hover = this.activeIndex;
                this.$emit("selectSvg", hIndex);
            },
            mouseout: function () {
                this.StandAloneCircle1 = false;
                this.StandAloneCircle2 = false;
                this.StandAloneCircle3 = false;
                this.StandAloneCircle4 = false;
                this.line = false;
                this.circle = false;
                this.text = false;
                this.hover = 0;
            },
            click: function () {
                // this.$emit("selectSvg", index);
            },
        },
        // 生命周期钩子
        beforeCreate() {
            // 创建前
        },
        created() {
            // 创建后
        },
        beforeMount() {
            // 渲染前
        },
        mounted() {
            // 渲染后
        },
        beforeUpdate() {
            // 数据更新前
        },
        updated() {
            // 数据更新后
        },
    };
</script>

<style lang="less" scoped>
    html {
        .stand-alone-img {
            .stand-alone-img-path {
                -webkit-filter: drop-shadow(0 0 5px green);
            }

            .stand-alone-img-g {
                .stand-alone-img-item {
                    opacity: 0.6;
                    cursor: pointer;
                    transition: all 0.3s;
                }

                .stand-alone-img-item-circle,
                line,
                circle,
                text {
                    opacity: 0;
                }

                text {
                    display: none;
                }

                &:hover,
                &.active {

                    .stand-alone-img-item,
                    .stand-alone-img-item-circle,
                    line,
                    circle,
                    text {
                        opacity: 1;
                    }

                    text {
                        display: block;
                    }
                }
            }

            .stand-alone-circle1 {
                animation: StandAloneCircle1 0.1s linear;
            }

            .stand-alone-circle2 {
                animation: StandAloneCircle2 0.2s linear;
            }

            .stand-alone-circle3 {
                animation: StandAloneCircle3 0.3s linear;
            }

            .stand-alone-circle4 {
                animation: StandAloneCircle4 0.45s linear;
            }

            .stand-alone-line {
                stroke-dasharray: 430, 450;
                animation: line 0.45s linear;
            }

            .stand-alone-circle {
                animation: circle 0.5s linear;
            }

            .stand-alone-text {
                animation: text 0.5s linear;
            }
        }

        @keyframes line {
            from {
                stroke-dashoffset: 430;
            }

            to {
                stroke-dashoffset: 0;
            }
        }

        @keyframes circle {
            0% {
                r: 0;
            }

            90% {
                r: 0;
            }

            100% {
                r: 5;
            }
        }

        @keyframes text {
            0% {
                opacity: 0;
            }

            90% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes StandAloneCircle1 {
            from {
                r: 0;
            }

            to {
                r: 10;
            }
        }

        @keyframes StandAloneCircle2 {
            from {
                r: 0;
            }

            to {
                r: 20;
            }
        }

        @keyframes StandAloneCircle3 {
            from {
                r: 0;
            }

            to {
                r: 30;
            }
        }

        @keyframes StandAloneCircle4 {
            from {
                r: 0;
            }

            to {
                r: 45;
            }
        }
    }
</style>