<template>
    <view class="container">
        <!-- 验证区域 -->
        <view class="captcha-area">
            <image :src="backgroundImg" class="bg-img" mode="widthFix"></image>
            <view class="puzzle-hole" :style="{
                left: `${holePosition.x}px`,
                top: `${holePosition.y}px`,
                width: `${puzzleSize.width}px`,
                height: `${puzzleSize.height}px`
            }"></view>
        </view>

        <!-- 滑块区域 -->
        <view class="slider-area">
            <movable-area class="movable-area">
                <movable-view class="movable-view" direction="horizontal" :x="sliderX" @change="onDrag"
                    @touchend="onDragEnd" :damping="40" :friction="10">
                    <image :src="puzzleImg" class="puzzle-img"></image>
                </movable-view>
            </movable-area>
            <text class="slider-text">{{ sliderText }}</text>
        </view>

        <!-- 操作按钮 -->
        <button class="refresh-btn" @click="initCaptcha">刷新验证码</button>
    </view>
</template>

<script>
export default {
    data() {
        return {
            backgroundImg: './static/images/captcha/1.jpg?v=1', // 替换为你的背景图
            puzzleImg: '', // 滑块小图
            holePosition: { x: 0, y: 0 }, // 缺口位置
            puzzleSize: { width: 50, height: 50 }, // 滑块尺寸
            sliderX: 0, // 滑块位置
            targetX: 0, // 正确目标位置
            isVerified: false,
            sliderText: '拖动滑块完成拼图'
        };
    },
    mounted() {
        this.initCaptcha();
    },
    methods: {
        // 初始化验证码
        initCaptcha() {
            this.isVerified = false;
            this.sliderX = 0;
            this.sliderText = '拖动滑块完成拼图';

            // 随机生成缺口位置 (示例)
            const maxX = 300 - this.puzzleSize.width;
            const maxY = 200 - this.puzzleSize.height;

            this.holePosition = {
                x: Math.floor(Math.random() * maxX),
                y: Math.floor(Math.random() * maxY)
            };

            // 这里应该从服务器获取裁剪后的小图
            // 实际项目中需要通过API获取
            this.puzzleImg = this.generatePuzzleImage();

            // 设置目标位置 (映射到滑块轨道)
            this.targetX = this.mapToSliderPosition(this.holePosition.x);
        },

        // 模拟生成滑块图片 (实际应从服务端获取)
        generatePuzzleImage() {
            // 这里应该是从背景图裁剪的图片
            return './static/images/captcha/1-1.jpg?v=1';
        },

        // 映射背景位置到滑块位置
        mapToSliderPosition(bgX) {
            const bgWidth = 300; // 背景图显示宽度
            const sliderWidth = 280; // 滑块轨道宽度
            return (bgX / bgWidth) * sliderWidth;
        },

        // 拖动中
        onDrag(e) {
            if (this.isVerified) return;
            this.sliderX = e.detail.x;
        },

        // 拖动结束
        onDragEnd() {
            if (this.isVerified) return;

            // 允许的误差范围
            const tolerance = 5;

            if (Math.abs(this.sliderX - this.targetX) < tolerance) {
                this.isVerified = true;
                this.sliderText = '验证成功 ✓';
                uni.showToast({ title: '验证成功', icon: 'success' });
                // 这里可以触发验证通过后的操作
            } else {
                this.sliderText = '验证失败，请重试';
                this.sliderX = 0;
                setTimeout(() => {
                    if (!this.isVerified) this.sliderText = '拖动滑块完成拼图';
                }, 1000);
            }
        }
    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.captcha-area {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
}

.bg-img {
    width: 100%;
    height: 100%;
}

.puzzle-hole {
    position: absolute;
    border: 2px dashed #fff;
    box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.slider-area {
    width: 300px;
    position: relative;
}

.movable-area {
    width: 100%;
    height: 50px;
    background-color: #f5f5f5;
    border-radius: 25px;
}

.movable-view {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.puzzle-img {
    width: 50px;
    height: 50px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.slider-text {
    display: block;
    text-align: center;
    margin-top: 10px;
    color: #666;
}

.refresh-btn {
    margin-top: 20px;
    width: 200px;
}
</style>