<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>滑动拼图验证</title>
  <script type="text/javascript" src="/Public/gdyxh/js/jquery-1.12.4.min.js"></script>
  <style>
    .verify-container { width: 600px; margin: 50px auto; }
    .puzzle-box { width: 600px; height: 200px; border: 1px solid #ccc; position: relative; overflow: hidden; }
    #puzzle-img { width: 100%; height: 100%; }
    #slider { width: 50px; height: 50px; position: absolute; top: 0; left: 0; border: 1px solid #fff; box-shadow: 0 0 5px rgba(0,0,0,0.3); cursor: pointer; }
    #slider-img { width: 100%; height: 100%; }
    .slider-track { height: 40px; line-height: 40px; text-align: center; border: 1px solid #ccc; margin-top: 10px; position: relative; }
    #slider-btn { width: 50px; height: 40px; background: #1E9FFF; color: #fff; text-align: center; line-height: 40px; position: absolute; left: 0; top: 0; cursor: pointer; }
    #msg { margin-top: 10px; color: #f00; }
  </style>
</head>
<body>
<div class="verify-container">
  <div class="puzzle-box">
    <img id="puzzle-img" src="" alt="拼图">
    <div id="slider">
      <img id="slider-img" src="" alt="滑块">
    </div>
  </div>
  <div class="slider-track">
    <div id="slider-btn">向右滑</div>
  </div>
  <div id="msg"></div>
</div>

<script>
  var isDragging = false; // 是否正在滑动
  var startX = 0; // 滑动开始位置
  var startY = 0;
  var startTime = 0; // 滑动开始时间
  var track = []; // 滑动轨迹（x:水平位移, y:垂直位移, time:相对时间）
  var sliderInitX = 0; // 滑块初始X坐标
  var sliderInitY = 0; // 滑块初始Y坐标

  // 直接从模板变量获取拼图数据，实现页面初始加载
  $(function() {
    // 获取PHP传递的拼图数据
    var puzzleData = {"status":1,"puzzle_url":"\/App\/Runtime\/verify\/captcha\/1761740521935524248496174394200676_puzzle.jpg","slider_url":"\/App\/Runtime\/verify\/captcha\/1761740521935524248496174394200676_slider.jpg","slider_init_x":0,"slider_init_y":"59"};
    
    // 初始化滑块位置和图片
    sliderInitX = puzzleData.slider_init_x || 0;
    sliderInitY = puzzleData.slider_init_y || 0;
    
    if (puzzleData.status == 1) {
      $('#puzzle-img').attr('src', puzzleData.puzzle_url);
      $('#slider-img').attr('src', puzzleData.slider_url);
      $('#slider').css({ top: sliderInitY + 'px', left: sliderInitX + 'px' });
    } else if (puzzleData.msg) {
      $('#msg').text(puzzleData.msg);
    }
  });

  // 绑定鼠标事件（PC端）
  $('#slider-btn').mousedown(function(e) {
    startDrag(e.pageX, e.pageY);
  });
  $(document).mousemove(function(e) {
    if (isDragging) {
      moveDrag(e.pageX, e.pageY);
    }
  });
  $(document).mouseup(function(e) {
    if (isDragging) {
      endDrag(e.pageX);
    }
  });

  // 绑定触屏事件（手机端）
  $('#slider-btn').on( 'touchstart' ,function(e) {
    var touch = e.touches[0];
    startDrag(touch.pageX, touch.pageY);
  });
  $(document).on( 'touchmove' , function(e) {
    if (isDragging) {
      e.preventDefault(); // 阻止页面滚动
      var touch = e.touches[0];
      moveDrag(touch.pageX, touch.pageY);
    }
  });
  $(document).on ( 'touchend' , function(e) {
    if (isDragging) {
      var touch = e.changedTouches[0];
      endDrag(touch.pageX);
    }
  });

  // 开始滑动
  function startDrag(x, y) {
    isDragging = true;
    startX = x;
    startY = y;
    startTime = new Date().getTime();
    track = []; // 清空轨迹
    $('#msg').text('');
  }

  // 滑动中（更新滑块位置并记录轨迹）
  function moveDrag(x, y) {
    // 计算相对位移（限制滑块不超出拼图范围）
    var diffX = x - startX;
    diffX = Math.max(0, Math.min(diffX, 600 - 50)); // 最大X位移：容器宽-滑块宽
    var diffY = y - startY;

    // 更新滑块和按钮位置
    $('#slider').css('left', sliderInitX + diffX + 'px');
    $('#slider-btn').css('left', diffX + 'px');

    // 记录轨迹（相对时间：毫秒）
    track.push({
      x: diffX,
      y: diffY,
      time: new Date().getTime() - startTime
    });
  }

  // 结束滑动（提交验证）
  function endDrag(x) {
    isDragging = false;
    var finalX = x - startX; // 最终水平位移
    var duration = new Date().getTime() - startTime; // 滑动时长（毫秒）

    // 提交验证数据
    $.post("/verify/checkSlide.html", {
      final_x: finalX,
      track: JSON.stringify(track),
      duration: duration
    }, function(res) {
      if (res.status == 1) {
        $('#msg').css('color', '#0f0').text('验证通过，正在跳转...');
        // 验证通过后跳转，优先使用服务器返回的redirect_url
        setTimeout(function() {
          // 优先使用res.redirect_url，不存在时才使用session中的target_url或默认地址
          var redirectUrl = res.redirect_url || "http://www.sinopharmacy.com.cn/Data/static/js_plugins/baidumap/css/bdMap.css";
          window.location.href = redirectUrl;
        }, 1000);
      } else {
        $('#msg').text(res.msg);
        // 验证失败，重置滑块位置
        $('#slider').css('left', sliderInitX + 'px');
        $('#slider-btn').css('left', '0px');
      }
    }, 'json');
  }
</script>
</body>
</html>