<template>
    <div class="container">
        <!-- viewBox="0 0 600 1800" -->
        <div class="svg-box">
            <svg ref="svg" width="100%" height="100%" viewBox="0 0 348 1048" @click="handlePathClick">
                <!-- 可交互的L形路径 -->

                <!-- 动态节点 -->
                <circle v-for="(point, i) in dynamicPoints" :key="i" :cx="point.x" :cy="point.y" r="12" fill="#757575"
                    class="node" @click.stop="moveCharacter(point.progress)" />

                <path ref="path"
                    d="M318.125,1.816 L318.125,112.223 L142.430,112.223 L142.430,297.624 L245.454,297.624 L245.454,804.524 L4.236,804.524 L4.236,1014.515"
                    fill="none" stroke="rgb(230, 91, 36)" stroke-width="3.5" stroke-linecap="round"
                    stroke-linejoin="round" />
            </svg>
        </div>



        <!-- 动态吉祥物 -->
        <transition name="line">
            <div v-show="showMascot" class="mascot" :style="mascotStyle">
                <!-- <div class="antenna"></div> -->
                <div class="body"></div>
            </div>
        </transition>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 路径控制点（根据L形结构设置）
const dynamicPoints = ref([
    { progress: 0, x: 318, y: 10 }, // 顶部起点
    { progress: 33, x: 140, y: 181 }, // 垂直段中点
    { progress: 66, x: 244, y: 425 }, // 转折点
    { progress: 83, x: 0, y: 815 }, // 水平段中点
    { progress: 100, x: 0, y: 1000 }  // 右侧终点
])

// 吉祥物移动逻辑
const path = ref(null)
const mascotStyle = ref({ transform: 'translate(0,0)' })
const showMascot = ref(true) // true表示默认显示
const calculatePosition = (progress) => {
    const pathEl = path.value
    const totalLength = pathEl.getTotalLength()
    
    const point = pathEl.getPointAtLength((totalLength * progress) / 100)

    // 计算方向向量
    const nextPoint = pathEl.getPointAtLength((totalLength * (progress + 1)) / 100)

    return {
        x: point.x - 40, // 40为吉祥物尺寸的一半
        y: point.y - 40,
    }
}

const moveCharacter = (progress) => {
    const { x, y, } = calculatePosition(progress)
    mascotStyle.value = {
        transform: `translate(${x}px, ${y}px)`,
        transition: 'all 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55)'
    }
}

// 点击路径任意位置添加节点
const handlePathClick = (e) => {
    const svg = e.currentTarget
    const pt = svg.createSVGPoint()
    pt.x = e.clientX
    pt.y = e.clientY
    const { x, y } = pt.matrixTransform(svg.getScreenCTM().inverse())

    dynamicPoints.value.push({
        progress: calculateProgress(x, y),
        x: x,
        y: y
    })
}

// 辅助方法
const calculateProgress = (x, y) => {
    // 根据实际路径结构计算进度百分比
    if (y < 500) return (y - 200) / 3  // 垂直段
    return 66 + (x - 300) / 2          // 水平段
}
</script>

<style lang="scss" scoped>
.container {
    padding: 2rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    overflow: auto;
    background-color: rgba($color: #000000, $alpha: .7)
}

.svg-box {
    @include pos(348px, 1048px, 180px, 578px);
}

.interactive-path {
    cursor: crosshair;
    transition: stroke 0.3s;

    &:hover {
        stroke: #FF9100;
    }
}

.mascot {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: aqua;

    .body {
        background: #2196F3;
        border-radius: 50%;
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
    }

    .antenna {
        position: absolute;
        top: -15px;
        left: 50%;
        width: 6px;
        height: 20px;
        background: #FFF;
        border-radius: 3px;
    }
}

.bounce-enter-active {
    animation: bounce-in 0.5s;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}
</style>