<template>
    <div class="line-container">
        <button @click="handleMove(25)">前进25%</button>
        <button @click="handleMove(-25)">后退25%</button>
        <div class="container">
            <svg class="path-svg" viewBox="0 0 348 1048">
                <path id="motionPath"
                    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="2" stroke-linecap="round" />
            </svg>
            <div class="box" ref="box"></div>
        </div>
    </div>
</template>

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

gsap.registerPlugin(MotionPathPlugin)

const box = ref(null)
const currentProgress = ref(0)  // 当前进度百分比
let animation = null

// 新增：坐标转换方法
const convertCoordinates = (point) => {
    const svg = document.querySelector('.path-svg')
    const pt = svg.createSVGPoint()

    pt.x = point.x
    pt.y = point.y
    return pt.matrixTransform(svg.getScreenCTM().inverse())
}



onMounted(() => {
    // 获取SVG元素
    const svg = document.querySelector('.path-svg')
    const path = document.querySelector('#motionPath')

    // 关键：设置SVG的preserveAspectRatio
    svg.setAttribute('preserveAspectRatio', 'none')

    animation = gsap.to(box.value, {
        motionPath: {
            path: "#motionPath",
            align: "#motionPath",
            autoRotate: false,
            // 新增坐标转换
            from: convertCoordinates({ x: 0, y: 0 }),
            to: convertCoordinates({ x: 1, y: 1 }),
            usePathData: true
        },
        paused: true,
        duration: 1,
        ease: "power2.inOut"
    })

    // 初始定位优化
    gsap.set(box.value, {
        x: convertCoordinates(path.getPointAtLength(0)).x,
        y: convertCoordinates(path.getPointAtLength(0)).y
    })
})

// 统一运动控制方法
const handleMove = (percent) => {
    const target = currentProgress.value + percent

    // 边界限制
    const clampedTarget = Math.min(Math.max(target, 0), 100)

    // 创建补间动画
    gsap.to(currentProgress, {
        value: clampedTarget,
        duration: 1,
        onUpdate: () => {
            animation.progress(currentProgress.value / 100)
        },
        onComplete: () => {
            console.log(`当前进度: ${currentProgress.value}%`)
        }
    })
}
</script>

<style lang="scss" scoped>
.line-container {
    @include fixed();
    // @include flexCen();
    background-color: rgba($color: #000000, $alpha: 0.7);
}

.container {
    position: relative;
    width: 348px;
    height: 1048px;
    margin-top: 20px;
    overflow: visible;
    /* 确保元素可超出容器 */
}

.path-svg {
    width: 100%;
    height: 100%;
    transform: translateZ(0);
    /* 修复渲染层级 */
}

.box {
    width: 30px;
    height: 30px;
    background-color: #42b983;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    will-change: transform;
    /* 优化动画性能 */
}

button {
    margin: 0 10px;
    padding: 8px 16px;
    cursor: pointer;
    background: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    transition: background 0.3s;
}

button:hover {
    background: #3aa876;
}

button:active {
    transform: scale(0.98);
}
</style>