<template>
  <view class="container">
    <view class="gesture-container" 
          @touchstart="handleTouchEvent"
          @touchmove="handleTouchEvent"
          @touchend="handleTouchEvent"
          @touchcancel="handleTouchEvent">
      
      <!-- 显示调试信息 -->
      <view class="debug-info">
        <text>缩放: {{scaleValue.toFixed(2)}} | X: {{transformMatrix.tx.toFixed(1)}} | Y: {{transformMatrix.ty.toFixed(1)}}</text>
        <text>手势: {{gestureStatus}}</text>
        <text>触点: {{touchPoints}}</text>
      </view>
      
      <transform-canvas 
        ref="canvasRef" 
        :width="canvasWidth" 
        :height="canvasHeight"
        :matrix="transformMatrix"
				:imgUrl="'https://assets.tech.troyrc.com/sx25/images/events/XBDT.jpg'"
      />
    </view>
    
    <view class="controls">
      <button @click="resetCanvas">重置</button>
      <button @click="zoomIn">放大</button>
      <button @click="zoomOut">缩小</button>
    </view>
  </view>
</template>

<script>
import TransformMatrix from './transform-matrix.js'
import GestureHandler from './gesture-handler.js'
import TransformCanvas from './transform-canvas.vue'

export default {
  components: {
    TransformCanvas
  },
  
  data() {
    return {
      canvasWidth: 300,
      canvasHeight: 300,
      transformMatrix: new TransformMatrix(),
      gestureHandler: null,
      containerRect: null,
      gestureStatus: '等待手势...',
      scaleValue: 1,
      touchPoints: 0,
      lastGestureTime: 0
    };
  },
  
  async mounted() {
    await this.getContainerPosition();
		
		// 2. 初始化手势处理器（传入容器位置信息）
		this.initGestureHandler();
		
		// 3. 初始绘制
		this.$nextTick(() => {
			this.updateCanvas();
		});
  },
  
  methods: {
		// 独立的手势初始化方法
		initGestureHandler() {
		 try {
				this.gestureHandler = new GestureHandler(this, this.transformMatrix, {
					container: this.containerRect
				});
			} catch (e) {
				console.error('手势处理器初始化失败:', e);
				// 简化降级方案
				this.gestureHandler = {
					catchEvent: (event) => {
						// 只处理最基本的行为
						if (event.touches.length > 0) {
							const firstTouch = event.touches[0];
							const x = firstTouch.clientX - this.containerRect.left;
							const y = firstTouch.clientY - this.containerRect.top;
							
							// 仅更新调试信息显示
							this.gestureStatus = "降级模式: 单指拖动";
							this.touchPoints = event.touches.length;
							
							// 简单变换
							if (event.type === 'touchmove') {
								this.transformMatrix.tx = x;
								this.transformMatrix.ty = y;
								this.updateCanvas();
							}
						}
					}
				}
			}
		},

		async getContainerPosition() {
			// 添加重试机制
			let retryCount = 0;
			const maxRetries = 3;
			
			while (retryCount < maxRetries) {
				try {
					const rect = await new Promise(resolve => {
						const query = uni.createSelectorQuery().in(this);
						query.select('.gesture-container').boundingClientRect(res => {
							resolve(res);
						}).exec();
					});
					
					if (rect) {
						this.containerRect = {
							left: rect.left,
							top: rect.top,
							width: rect.width,
							height: rect.height
						};
						console.log('成功获取容器位置:', this.containerRect);
						return; // 成功获取则退出
					}
				} catch (e) {
					console.error('获取容器位置失败:', e);
				}
				
				// 等待后重试
				await new Promise(r => setTimeout(r, 100));
				retryCount++;
			}
			
			console.error(`容器位置获取失败，已重试${maxRetries}次`);
		},
    // 事件处理
    async handleTouchEvent(event) {
     
			if (!this.gestureHandler || !this.containerRect) {
				console.warn('手势处理器未就绪，尝试重新初始化...');
				await this.getContainerPosition();
				this.initGestureHandler();
				if (event.type === 'touchend' || event.type === 'touchcancel') {
					this.lastPoint = null;
					this.lastPoints = null;
					this.gestureStatus = '结束';
					
					// 更新一次画面
					this.updateCanvas();
					return;
				}
				// 重新处理当前事件
				if (this.gestureHandler) {
					return this.handleTouchEvent(event);
				}
				// 如果是简单处理器，使用下面优化的基础处理方法
				if (!this.at) {
					// 使用优化后的基础处理方法
					if (correctedEvent.touches.length === 1) {
						this.handlePan(correctedEvent.touches[0]);
					} else if (correctedEvent.touches.length > 1) {
						this.handlePinch(correctedEvent.touches);
					}
				}
				return;
			}
      
      
      // 记录时间戳
      const currentTime = Date.now();
      
      // 更新触点数量
      this.touchPoints = event.touches.length;
      
      // 修正坐标（核心修复点）
      const correctedTouches = Array.from(event.touches).map(touch => {
        const x = touch.clientX - this.containerRect.left;
        const y = touch.clientY - this.containerRect.top;
        
        console.log(`原始坐标: (${touch.clientX}, ${touch.clientY}) 修正后: (${x}, ${y})`);
        
        return {
          ...touch,
          x: x,
          y: y
        };
      });
      
      // 创建修正后的事件对象
      const correctedEvent = {
        ...event,
        touches: correctedTouches,
        changedTouches: correctedTouches
      };
      
      // 传递事件给手势处理器
      this.gestureHandler.catchEvent(correctedEvent);
      
      // 更新手势状态
      if (event.type === 'touchstart') {
        this.gestureStatus = event.touches.length > 1 ? '双指开始' : '单指开始';
      } 
      else if (event.type === 'touchmove') {
        this.gestureStatus = event.touches.length > 1 ? '双指缩放/移动' : '单指移动';
      }
      else {
        this.gestureStatus = '结束';
      }
      
      // 限制更新频率：至少每50ms更新一次
      if (currentTime - this.lastGestureTime > 50) {
        this.lastGestureTime = currentTime;
        this.updateCanvas();
      }
    },
    
    // 更新Canvas（性能优化版）
    updateCanvas() {
      this.$nextTick(() => {
        const canvas = this.$refs.canvasRef;
        if (canvas) {
          // canvas.draw(); 
          
          // 计算当前缩放值
          this.scaleValue = Math.sqrt(
            this.transformMatrix.a * this.transformMatrix.a +
            this.transformMatrix.b * this.transformMatrix.b
          );
        }
      });
    },
    
    // 重置画布
    resetCanvas() {
      this.transformMatrix.reset();
      this.scaleValue = 1;
      this.gestureStatus = "画布已重置";
      this.updateCanvas();
    },
    
    // 放大
    zoomIn() {
      this.transformMatrix.scale(1.2, 1.2, this.canvasWidth/2, this.canvasHeight/2);
      this.updateCanvas();
    },
    
    // 缩小
    zoomOut() {
      this.transformMatrix.scale(0.8, 0.8, this.canvasWidth/2, this.canvasHeight/2);
      this.updateCanvas();
    },
    
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.gesture-container {
  position: relative;
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  margin: 0 auto;
}

.debug-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 5px;
  font-size: 12px;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.controls {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

button {
  padding: 8px 16px;
  background: #4a8cff;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>