<template>
  <view class="container" @click="handleCanvasClick">
    <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'"
			  :areaData="currentView === 'area' ? seatAreas : []"
				:seatData="currentView === 'seat' ? seatPositions : []"
				:selectedCodes="selectedCodes"
      />
    </view>
    <!-- isShowSeat -->
		
   <!-- <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: 800,
      canvasHeight: 600,
      transformMatrix: new TransformMatrix(),
      gestureHandler: null,
      containerRect: null,
      gestureStatus: '等待手势...',
      scaleValue: 1,
      touchPoints: 0,
      lastGestureTime: 0,
      seatAreas: [], // 座位区域数据
			currentView:'area',
			seatPositions: [],    // 座位数据
			selectedArea: null,    // 当前选中分区
			selectedCodes: new Set(), // 存储选中的座位code
    };
  },
  
  async mounted() {
    await this.getContainerPosition();
    this.initGestureHandler();
    
    // 加载座位区域数据
    await this.loadSeatAreas();
    
    // 初始绘制
    this.$nextTick(() => {
      this.updateCanvas();
    });
  },
  
  methods: {
		handleCanvasClick(e) {
			if (!this.containerRect) return;
			
			// 获取dpr
			const dpr = this.$refs.canvasRef.dpr || 1;
			
			// 计算点击坐标（考虑dpr）
			const x = (e.detail.x - this.containerRect.left) * dpr;
			const y = (e.detail.y - this.containerRect.top) * dpr;
			// console.log('handleCanvasClick',x,y)
			if (this.currentView === 'area') {
				const hitArea = this.$refs.canvasRef.checkHitArea(x, y);
				// console.log('handleCanvasClick',hitArea)
				if (hitArea) {
					uni.showModal({
						title: '请确认',
						content: `您确实要选择分区:${hitArea.areaname}吗?`,
						showCancel: true,
						success: async(res) => {
							if(res.confirm){
								// 切换到座位视图
								this.selectedArea = hitArea;
								this.currentView = 'seat';
								this.loadSeatData(hitArea.areacode)
							}
						},
					})
				}
			} else if (this.currentView === 'seat') {
				const hitSeat = this.$refs.canvasRef.checkSeatHit(x, y);
				if (hitSeat) {
					console.log('选中座位:', hitSeat);
					 this.toggleSeatSelection(hitSeat);
					// 这里可以添加座位选择逻辑
				}
			}
		},
		  
			
		toggleSeatSelection(seat) {
			 if (seat.status !== 1) return; // 只允许选择可用座位
			  
			  // 创建新的 Set 实例，确保响应式更新
			  const newSet = new Set(this.selectedCodes);
			  
			  if (newSet.has(seat.id)) {
			    newSet.delete(seat.id);
			  } else {
			    if (newSet.size < 6) {
			      newSet.add(seat.id);
			    } else {
			      uni.showToast({
			        title: '最多只能选择6个座位',
			        icon: 'none'
			      });
			    }
			  }
			  
			  // 更新选中状态
			  this.selectedCodes = newSet;
			  
			  // 强制更新视图
			  this.$nextTick(() => {
			    this.$refs.canvasRef.redraw();
			  });
		},
		
		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
            };
            return;
          }
					} catch (e) {
						console.error('获取容器位置失败:', e);
					}
        
        // 等待后重试
        await new Promise(r => setTimeout(r, 100));
        retryCount++;
      }
    },
    
    initGestureHandler() {
       try {
         this.gestureHandler = new GestureHandler(this, this.transformMatrix, {
           container: this.containerRect
         });
				 // console.log( 'initGestureHandler', this.gestureHandler )
       } catch (e) {
         console.error('手势处理器初始化失败:', e);
         // 简化降级方案
         this.gestureHandler = {
           catchEvent: this.createGestureFallback(),
           setScale: (scale) => {
             this.transformMatrix.scale(scale, scale, this.canvasWidth/2, this.canvasHeight/2);
             this.updateCanvas();
           },
           reset: () => {
             this.transformMatrix.reset();
             this.updateCanvas();
           }
         }
       }
     },
     
     createGestureFallback() {
       let isClick = true;
       let startPoint = null;
       let startTime = null;
       let lastPoint = null;
       
       return (event) => {
         const touches = event.touches || [];
         
         if (touches.length === 1) {
           const getPoint = (t) => ({
             x: t.clientX - this.containerRect.left,
             y: t.clientY - this.containerRect.top
           });
           
           const currentPoint = getPoint(touches[0]);
           
           if (!startPoint) {
             startPoint = currentPoint;
             startTime = Date.now();
           }
           
           const dx = currentPoint.x - startPoint.x;
           const dy = currentPoint.y - startPoint.y;
           const distance = Math.sqrt(dx * dx + dy * dy);
           
           // 如果是点击（移动距离小于阈值且时间短）
           if (isClick && distance < 5 && Date.now() - startTime < 200) {
             return; // 不执行移动操作
           }
           
           // 标记为非点击操作
           isClick = false;
           
           // 执行移动操作
           if (lastPoint) {
             const moveDx = currentPoint.x - lastPoint.x;
             const moveDy = currentPoint.y - lastPoint.y;
             
             this.transformMatrix.tx += moveDx;
             this.transformMatrix.ty += moveDy;
           }
           
           lastPoint = currentPoint;
         } 
         
         // 在触摸结束时重置状态
         if (event.type === 'touchend' || event.type === 'touchcancel') {
           isClick = true;
           startPoint = null;
           startTime = null;
           lastPoint = null;
         }
       };
     },
  
   async handleTouchEvent(event) {
		 // console.log(event,'handleTouchEvent')
     // 更新触点数量
     this.touchPoints = event.touches.length;
     
     // 仅在触摸开始时重置状态
     if (event.type === 'touchstart') {
       this.gestureStatus = event.touches.length > 1 ? '双指开始' : '单指开始';
     } 
     
     // 处理事件传递
     this.gestureHandler?.catchEvent(event);
     
     // 更新触摸结束状态
     if (event.type === 'touchend' || event.type === 'touchcancel') {
       this.gestureStatus = '结束';
       this.updateCanvas();
     }
     
     // 限制更新频率
     const currentTime = Date.now();
     if (currentTime - this.lastGestureTime > 50) {
       this.lastGestureTime = currentTime;
       this.updateCanvas();
     }
   },
	 
    // 更新Canvas
    updateCanvas() {
      this.$nextTick(() => {
        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();
    },
    
    // 加载座位区域数据
    async loadSeatAreas() {
      try {
        // 模拟API请求
        const response = {
					"code":200,
					"message":"",
					"data": [{
							"areacode": "0pwkru74ffwg",
							"areaname": "B2区",
							"description": "B2区",
							"remain": 0,
							"polygon": [348, 193, 348, 216, 348, 240, 348, 263, 363, 263, 377, 263, 392, 263, 392, 240, 392, 216, 392, 193, 377, 193, 363, 193, 348, 193]
						}, {
							"areacode": "9kb27u2gt75p",
							"areaname": "A2区",
							"description": "A2区",
							"remain": 286,
							"polygon": [488, 251, 473, 262, 453, 281, 455, 290, 494, 290, 518, 290, 542, 290, 542, 273, 542, 257, 536, 205, 521, 207, 494, 240, 488, 251]
						}, {
							"areacode": "3raruc74ffwj",
							"areaname": "N3区",
							"description": "N3区",
							"remain": 0,
							"polygon": [527, 96, 519, 107, 536, 140, 564, 172, 596, 182, 610, 176, 611, 166, 594, 149, 581, 138, 583, 142, 567, 119, 560, 114, 527, 96]
						}, {
							"areacode": "h50wgwsa81a3",
							"areaname": "H1区",
							"description": "H1区",
							"remain": 48,
							"polygon": [348, 144, 348, 152, 348, 162, 348, 170, 361, 170, 374, 170, 388, 169, 387, 162, 387, 152, 387, 144, 374, 144, 361, 144, 348, 144]
						}, {
							"areacode": "st0w88ej0kmu",
							"areaname": "N20区",
							"description": "N20区",
							"remain": 0,
							"polygon": [582, 341, 582, 361, 582, 381, 602, 380, 600, 400, 614, 401, 620, 401, 622, 366, 619, 360, 621, 341, 614, 341, 597, 341, 582, 341]
						}, {
							"areacode": "sbk5lljukrhk",
							"areaname": "G区",
							"description": "G区",
							"remain": 87,
							"polygon": [113, 371, 113, 397, 113, 424, 113, 450, 118, 450, 124, 450, 129, 450, 129, 424, 129, 397, 129, 371, 124, 371, 118, 371, 113, 371]
						}, {
							"areacode": "1ehnqusa81a6",
							"areaname": "N11区",
							"description": "N11区",
							"remain": 93,
							"polygon": [58, 323, 58, 345, 58, 367, 58, 389, 71, 389, 83, 389, 96, 389, 96, 367, 96, 345, 96, 323, 83, 323, 71, 323, 58, 323]
						}, {
							"areacode": "ecc4b9sa81a7",
							"areaname": "L区",
							"description": "L区",
							"remain": 0,
							"polygon": [541, 196, 554, 223, 553, 252, 554, 282, 555, 285, 564, 285, 568, 284, 567, 253, 568, 222, 559, 191, 564, 188, 555, 188, 541, 196]
						}, {
							"areacode": "04fglh2gt760",
							"areaname": "N2区",
							"description": "N2区",
							"remain": 0,
							"polygon": [577, 204, 579, 216, 579, 240, 602, 252, 602, 267, 609, 267, 618, 267, 621, 240, 615, 221, 611, 191, 609, 189, 595, 194, 577, 204]
						}, {
							"areacode": "au80sb74ffwt",
							"areaname": "E区",
							"description": "E区",
							"remain": 86,
							"polygon": [114, 215, 114, 236, 114, 257, 114, 278, 119, 278, 124, 278, 129, 278, 129, 257, 129, 236, 129, 215, 124, 215, 119, 215, 114, 215]
						}, {
							"areacode": "k872hp2gt762",
							"areaname": "N14区",
							"description": "N14区",
							"remain": 0,
							"polygon": [155, 529, 149, 538, 148, 542, 142, 551, 170, 563, 192, 563, 213, 563, 213, 550, 213, 538, 213, 525, 192, 525, 170, 525, 155, 529]
						}, {
							"areacode": "tkh95d74ffww",
							"areaname": "J区",
							"description": "J区",
							"remain": 137,
							"polygon": [393, 137, 393, 152, 393, 168, 393, 183, 414, 183, 434, 183, 455, 183, 455, 168, 455, 152, 455, 137, 434, 137, 414, 137, 393, 137]
						}, {
							"areacode": "etnhc7sa81ae",
							"areaname": "N17区",
							"description": "N17区",
							"remain": 0,
							"polygon": [445, 532, 445, 544, 445, 555, 445, 567, 468, 567, 492, 567, 515, 560, 515, 555, 515, 544, 503, 527, 492, 532, 468, 532, 445, 532]
						}, {
							"areacode": "qpy6ce74ffwy",
							"areaname": "G区",
							"description": "G区",
							"remain": 131,
							"polygon": [224, 139, 224, 153, 224, 169, 224, 183, 245, 183, 265, 183, 286, 183, 286, 169, 286, 153, 286, 139, 265, 139, 245, 139, 224, 139]
						}, {
							"areacode": "21er312gt766",
							"areaname": "N10区",
							"description": "N10区",
							"remain": 98,
							"polygon": [60, 256, 60, 276, 60, 297, 60, 317, 73, 317, 85, 317, 98, 317, 98, 297, 98, 276, 98, 256, 85, 256, 73, 256, 60, 256]
						}, {
							"areacode": "uxem1b74ffwp",
							"areaname": "N9区",
							"description": "N9区",
							"remain": 153,
							"polygon": [63, 181, 63, 203, 63, 224, 63, 246, 76, 246, 89, 246, 102, 246, 102, 224, 102, 203, 102, 181, 89, 181, 76, 181, 63, 181]
						}, {
							"areacode": "qaqq5bsa81aj",
							"areaname": "N7区",
							"description": "N7区",
							"remain": 149,
							"polygon": [159, 87, 159, 100, 159, 113, 159, 126, 185, 126, 212, 126, 238, 126, 238, 113, 238, 100, 238, 87, 212, 87, 185, 87, 159, 87]
						}, {
							"areacode": "q41b0u74ffwr",
							"areaname": "M区",
							"description": "M区",
							"remain": 75,
							"polygon": [552, 283, 552, 309, 552, 335, 552, 361, 557, 361, 564, 361, 569, 361, 569, 335, 569, 309, 569, 283, 564, 283, 557, 283, 552, 283]
						}, {
							"areacode": "mh5c6g74ff2d",
							"areaname": "N4区",
							"description": "N4区",
							"remain": 147,
							"polygon": [440, 89, 440, 101, 440, 113, 440, 125, 471, 125, 503, 125, 507, 114, 512, 105, 512, 99, 505, 95, 492, 89, 471, 89, 440, 89]
						}, {
							"areacode": "hfhsd4jukrml",
							"areaname": "Q区",
							"description": "Q区",
							"remain": 0,
							"polygon": [223, 467, 223, 483, 223, 499, 223, 515, 257, 515, 290, 515, 324, 515, 324, 499, 324, 483, 324, 467, 290, 467, 257, 467, 223, 467]
						}, {
							"areacode": "t0bugwsa81e7",
							"areaname": "O区",
							"description": "O区",
							"remain": 0,
							"polygon": [437, 472, 437, 486, 437, 501, 437, 515, 465, 515, 492, 515, 514, 502, 523, 499, 520, 486, 497, 463, 476, 469, 465, 472, 437, 472]
						}, {
							"areacode": "t5uyd3ej0ks0",
							"areaname": "N13区",
							"description": "N13区",
							"remain": 178,
							"polygon": [89, 485, 89, 499, 89, 514, 89, 528, 106, 528, 123, 528, 140, 528, 140, 514, 140, 499, 140, 485, 123, 485, 106, 485, 89, 485]
						}, {
							"areacode": "qtjhh7sa81e9",
							"areaname": "N18区",
							"description": "N18区",
							"remain": 0,
							"polygon": [528, 486, 535, 509, 535, 520, 536, 527, 552, 532, 540, 531, 551, 544, 582, 511, 595, 495, 566, 480, 566, 482, 540, 470, 528, 486]
						}, {
							"areacode": "pmmm6m74ff28",
							"areaname": "N19区",
							"description": "N19区",
							"remain": 0,
							"polygon": [583, 409, 583, 435, 595, 461, 589, 482, 600, 484, 605, 481, 610, 473, 611, 463, 617, 442, 619, 413, 615, 409, 599, 409, 583, 409]
						}, {
							"areacode": "3wtt3fsa81eb",
							"areaname": "D区",
							"description": "D区",
							"remain": 69,
							"polygon": [111, 290, 111, 314, 111, 339, 111, 363, 116, 363, 122, 363, 127, 363, 127, 339, 127, 314, 127, 290, 122, 290, 116, 290, 111, 290]
						}, {
							"areacode": "nums6x2gt76l",
							"areaname": "N12区",
							"description": "N12区",
							"remain": 142,
							"polygon": [57, 390, 57, 419, 57, 447, 57, 476, 71, 476, 85, 476, 99, 476, 99, 447, 99, 419, 99, 390, 85, 390, 71, 390, 57, 390]
						}, {
							"areacode": "241p54ej0ks5",
							"areaname": "D4区",
							"description": "D4区",
							"remain": 0,
							"polygon": [234, 412, 223, 423, 215, 440, 215, 463, 236, 463, 256, 463, 277, 463, 277, 440, 277, 419, 277, 396, 256, 396, 242, 402, 234, 412]
						}, {
							"areacode": "l7rlk92gt76n",
							"areaname": "P区",
							"description": "P区",
							"remain": 0,
							"polygon": [355, 486, 355, 501, 329, 500, 329, 515, 365, 515, 400, 515, 436, 515, 436, 500, 436, 484, 436, 469, 400, 469, 360, 469, 355, 486]
						}, {
							"areacode": "5sbc1qsa81eg",
							"areaname": "B3区",
							"description": "B3区",
							"remain": 0,
							"polygon": [286, 193, 286, 216, 286, 238, 286, 261, 302, 261, 319, 261, 335, 261, 335, 238, 335, 216, 335, 193, 319, 193, 302, 193, 286, 193]
						}, {
							"areacode": "xb036djukrjt",
							"areaname": "D3区",
							"description": "D3区",
							"remain": 0,
							"polygon": [286, 398, 286, 419, 286, 441, 286, 462, 302, 462, 317, 462, 333, 462, 333, 441, 333, 419, 333, 398, 317, 398, 302, 398, 286, 398]
						}, {
							"areacode": "w9f0t474ff2g",
							"areaname": "D2区",
							"description": "D2区",
							"remain": 0,
							"polygon": [347, 396, 347, 418, 347, 441, 347, 463, 362, 463, 376, 463, 391, 463, 391, 441, 391, 418, 391, 396, 376, 396, 362, 396, 347, 396]
						}, {
							"areacode": "ng0y77sa81ek",
							"areaname": "D1区",
							"description": "D1区",
							"remain": 0,
							"polygon": [404, 397, 404, 419, 404, 440, 404, 462, 424, 462, 444, 462, 464, 462, 464, 440, 460, 435, 457, 425, 443, 411, 424, 397, 404, 397]
						}, {
							"areacode": "fgwf442gt76u",
							"areaname": "H2区",
							"description": "H2区",
							"remain": 50,
							"polygon": [293, 144, 293, 153, 293, 162, 293, 171, 307, 171, 321, 171, 335, 171, 335, 162, 335, 153, 335, 144, 321, 144, 307, 144, 293, 144]
						}, {
							"areacode": "3bl5tw74ff2k",
							"areaname": "F区",
							"description": "F区",
							"remain": 0,
							"polygon": [163, 139, 163, 155, 163, 170, 163, 186, 181, 186, 199, 186, 217, 186, 217, 170, 217, 155, 217, 139, 199, 139, 181, 139, 163, 139]
						}, {
							"areacode": "r20f7aej0kse",
							"areaname": "N8区",
							"description": "N8区",
							"remain": 182,
							"polygon": [93, 121, 93, 136, 93, 149, 93, 164, 108, 164, 123, 164, 138, 164, 138, 149, 138, 136, 138, 121, 123, 121, 108, 121, 93, 121]
						}, {
							"areacode": "49k1dy2gt76y",
							"areaname": "N区",
							"description": "N区",
							"remain": 89,
							"polygon": [552, 372, 554, 401, 553, 423, 545, 459, 555, 465, 558, 462, 562, 453, 568, 426, 569, 398, 565, 367, 564, 367, 561, 369, 552, 372]
						}, {
							"areacode": "srhh3asa81ee",
							"areaname": "R区",
							"description": "R区",
							"remain": 0,
							"polygon": [157, 469, 157, 484, 157, 497, 157, 512, 177, 512, 196, 512, 216, 512, 216, 497, 216, 484, 216, 469, 196, 469, 177, 469, 157, 469]
						}, {
							"areacode": "dtnat7sa81ef",
							"areaname": "B1区",
							"description": "B1区",
							"remain": 0,
							"polygon": [406, 193, 406, 214, 406, 237, 406, 258, 424, 258, 442, 258, 460, 257, 461, 237, 461, 217, 461, 193, 442, 193, 424, 193, 406, 193]
						}, {
							"areacode": "j2xeleej0ksk",
							"areaname": "K区",
							"description": "K区",
							"remain": 190,
							"polygon": [466, 140, 466, 155, 466, 172, 466, 187, 481, 187, 494, 187, 509, 187, 509, 172, 509, 155, 509, 140, 494, 140, 481, 140, 466, 140]
						}, {
							"areacode": "2ax05h2gt77e",
							"areaname": "N15区",
							"description": "N15区",
							"remain": 0,
							"polygon": [225, 530, 225, 545, 224, 565, 247, 566, 247, 578, 290, 582, 325, 580, 326, 561, 326, 545, 326, 530, 292, 530, 259, 530, 225, 530]
						}, {
							"areacode": "hsker374ff2t",
							"areaname": "C3区",
							"description": "C3区",
							"remain": 287,
							"polygon": [134, 364, 134, 380, 134, 396, 134, 412, 160, 412, 185, 412, 211, 412, 211, 396, 211, 380, 211, 364, 185, 364, 160, 364, 134, 364]
						}, {
							"areacode": "fulx09ej0ksn",
							"areaname": "A3区",
							"description": "A3区",
							"remain": 0,
							"polygon": [451, 364, 453, 373, 470, 390, 486, 399, 493, 413, 516, 414, 541, 414, 541, 398, 541, 380, 541, 364, 516, 364, 493, 364, 451, 364]
						}, {
							"areacode": "wg8lmjjukrk9",
							"areaname": "C2区",
							"description": "C2区",
							"remain": 284,
							"polygon": [133, 241, 133, 259, 133, 276, 133, 294, 158, 294, 185, 294, 210, 294, 210, 276, 210, 259, 210, 241, 185, 241, 158, 241, 133, 241]
						}, {
							"areacode": "5h7k7xej0ksq",
							"areaname": "C1区",
							"description": "C1区",
							"remain": 342,
							"polygon": [134, 304, 134, 318, 134, 333, 134, 347, 165, 347, 197, 347, 228, 347, 228, 333, 228, 318, 228, 304, 197, 304, 165, 304, 134, 304]
						}, {
							"areacode": "x82lwq2gt779",
							"areaname": "N1区",
							"description": "N1区",
							"remain": 0,
							"polygon": [581, 276, 581, 296, 581, 316, 604, 321, 606, 335, 607, 336, 620, 335, 620, 316, 620, 296, 620, 276, 607, 276, 594, 276, 581, 276]
						}, {
							"areacode": "d0c2e1ej0kss",
							"areaname": "N5区",
							"description": "N5区",
							"remain": 332,
							"polygon": [334, 75, 334, 92, 334, 109, 334, 126, 367, 126, 399, 126, 432, 126, 432, 109, 432, 92, 432, 75, 399, 75, 367, 75, 334, 75]
						}, {
							"areacode": "b49sdg2gt77b",
							"areaname": "B4区",
							"description": "B4区",
							"remain": 239,
							"polygon": [216, 193, 216, 215, 216, 239, 216, 261, 236, 261, 256, 261, 276, 261, 276, 239, 276, 215, 276, 193, 256, 193, 236, 193, 216, 193]
						}, {
							"areacode": "7ss3wnjukrk4",
							"areaname": "N6区",
							"description": "N6区",
							"remain": 352,
							"polygon": [246, 74, 246, 91, 246, 109, 246, 126, 273, 126, 299, 126, 326, 126, 326, 109, 326, 91, 326, 74, 299, 74, 273, 74, 246, 74]
						}, {
							"areacode": "h442c1jukrkh",
							"areaname": "A1区",
							"description": "A1区",
							"remain": 0,
							"polygon": [454, 306, 454, 320, 454, 336, 454, 350, 484, 350, 513, 350, 543, 350, 543, 336, 543, 320, 543, 306, 513, 306, 484, 306, 454, 306]
						}, {
							"areacode": "n3wlb4sa81f8",
							"areaname": "N16区",
							"description": "N16区",
							"remain": 0,
							"polygon": [335, 534, 335, 550, 335, 565, 335, 581, 369, 581, 404, 581, 438, 581, 438, 565, 438, 550, 438, 534, 404, 534, 369, 534, 335, 534]
						}]
					} 
        this.seatAreas = response.data;
      } catch (e) {
        console.error('加载区域数据失败:', e);
      }
    },
		async loadSeatData(areaCode) {
		      try {
		        // const response = await this.$api.getSeatData(areaCode);
		        let data = {"codes":["lxealffw3r9e","dqqhn6fw3r9f","ffn4swpbp95h","glxmfffw3r9u","y2e5ru3txpqr","qqdbgaxrbhw4","2l8170b9fthd","f02at8xrbhw6","11j0s7b9fthf","c7mms4pbp95e","w8s9fj3txpqy","f7blw9xrbhwa","0acmccpbp992","uddwmhb9ftm5","gxk1nsfw3rde","f9cgdlpbp995","eqgstrb9ftlx","rtla3jb9ftly","uaqpqdpbp998","rcpb3kfw3rdk","jn230mpbp99a","ful2f1pbp99b","4qqalspbp969","6uam9mb9ftmg","7r1plmpbp96b","m5sgd4fw3rds","4j85p9fw3rdt","uly7x2xrbh24","e2um5xfw3rdw","cwnk6rxrbh1u","365ykjpbp96h","644kut3txprq","w4h0h7pbp96l","dp0f9mb9ftmt","kkdkahxrbh2c","3jjpm4pbp96p","hjbac6fw3re6","rgx2ktfw3re7","5358l9b9ftmn","m6jd0xfw3re9","dfe3r0fw3rea","45exg4pbp96k","6h1cbaxrbh2m","gc2tt6fw3ree","9gd2743txpsh","qt553pb9ftjs","qmhja6pbp973","akdeap3txpsa","nhy1163txpsb","d8k96xxrbh2j","am5c02xrbh2k","my2q3gxrbh2l","l2xxampbp97a","hgk6ctpbp97b","lt6fld3txpsj","k67pb4pbp97d","77jmedpbp97e","g613acxrbh2t","37f1snb9ftk8","wnexh2pbp977","gw77wsb9ftka","037dbufw3rep","c0mp0mpbp97m","beesjqfw3rf4","ntrt3wfw3rf5","pg4n743txpsx","t8auwmb9ftkh","59jks9pbp97g","9nchuub9ftkk","jkk1dxpbp97j","82ehpyxrbh05","ckgut0b9ftkc","c3rt80pbp980","d63c823txpt7","lxe1uwfw3rfg","4qr24x3txpt9","ry1pgb3txpta","tdb6u5pbp97t","pnrgck3txptc","g4lxh43txptd","k9frsxxrbh0g","4wesmrxrbh0h","5nd00u3txpth","5ghmetfw3rcn","693uc1fw3rcp","9a9me6b9ftl6","kc8w19pbp985","cf4wkjpbp986","a0u4f0fw3rch","ccfyl9b9ftl0","tp8ldqfw3rck","ls51rkb9ftl2","r3b0xnxrbh0x","29jnap3txptw","xcx0b3fw3rd2","npb4wx3txpty","9ex9rcxrbh12","lkwjq9xrbh13","mculkjpbp98j","l8a74nfw3rcw","jfehdsxrbh16","aardj9fw3rcy","anqlf83txpr3","rbgls3fw3rdc","08abkkxrbh1b","ftqqmtb9ftlu","a6704l3txpr7","lghxxqb9ftll","r3ayu73txpr9","84muc7pbp98x","j81r9wxrbh1h","jxx0mdfw3rda","wp32mkpbp99e","xnkt9ppbp99f","77a45u3txpw0","sg3mesb9ftqd","hwh21ufw3rh0","seguj8b9ftqf","7jlk1rxrbh50","xs3ukr3txput","gr23ut3txpuu","tt2renfw3rh5","xhwgwx3txpw9","a639wgb9ftqn","9tt0xu3txpwb","jy9j1kpbp99u","3gxh8db9ftqr","p4eaqx3txpw4","3u27wexrbh5b","g89kjyxrbh5c","385rwjpbp99p","3n95prpbp99q","x52h2uxrbh5s","gusmhtpbp9a5","r4b63jb9ftmx","s7n58qfw3rhm","y62sjwfw3rhn","s10ytq3txpwf","1ubf9nfw3rhq","4trgr83txpwh","5pubr0fw3rhg","a25jtk3txpwk","3khtmwpbp9af","mdaqetfw3rhx","h58660xrbh67","117w35pbp9aj","nke3q1b9ftnb","m4n8tsfw3rj2","ptk0jn3txpwt"],"levels":["C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C","C"],"statuses":[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],"floorNames":["1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼","1楼"],"rowNames":["1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","1排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","2排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","3排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","4排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","5排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","6排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","7排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排","8排"],"seatNames":["17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","21座","20座","19座","18座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","22座","21座","20座","19座","18座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座","21座","20座","19座","18座","17座","16座","15座","14座","13座","12座","11座","10座","9座","8座","7座","6座","5座","4座","3座","2座","1座"],"xCoords":[10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,5,6,7,8,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,4,5,6,7,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,4,6,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26],"yCoords":[10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,10,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,11,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,12,13,13,13,13,13,13,13,13,13,13,13,13,13,13,13,13,13,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,14,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,15,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,16,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17,17]};
						const seatSize = 20
						// 转换数据结构：将多个数组合并为对象数组
						this.seatPositions = data.codes.map((code, index) => {
							return {
								id: code,
								level: data.levels[index],
								status: data.statuses[index],
								floor: data.floorNames[index],
								row: data.rowNames[index],
								name: data.seatNames[index],
								x: data.xCoords[index] * seatSize,
								y: data.yCoords[index] * seatSize
							};
						});
						this.transformMatrix = new TransformMatrix();
						      
						// 自动居中显示座位区域
						 // 自动居中显示座位区域
						    this.$nextTick(() => {
									if (!this.gestureHandler) {
										this.initGestureHandler();
									}
						      if (this.seatPositions.length > 0) {
						        // 计算座位区域边界
						        const xs = this.seatPositions.map(s => s.x);
						        const ys = this.seatPositions.map(s => s.y);
						        const minX = Math.min(...xs);
						        const maxX = Math.max(...xs);
						        const minY = Math.min(...ys);
						        const maxY = Math.max(...ys);
						        
						        // 计算中心点
						        const centerX = (minX + maxX) / 2;
						        const centerY = (minY + maxY) / 2;
						        
						        // 计算合适的缩放比例
						        const widthRatio = this.canvasWidth / (maxX - minX + 100);
						        const heightRatio = this.canvasHeight / (maxY - minY + 100);
						        const scale = Math.min(widthRatio, heightRatio, 1);
						        
						        // 应用变换
						        // this.transformMatrix.scale(scale, scale);
						        // this.transformMatrix.translate(
						        //   this.canvasWidth/2 - centerX * scale,
						        //   this.canvasHeight/2 - centerY * scale
						        // );
						      }
						    });
					
								
		      } catch (e) {
		        console.error('加载座位数据失败:', e);
		        uni.showToast({ title: '加载座位失败', icon: 'none' });
		      }
		    },
	}
};
</script>

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

.gesture-container {
  position: relative;
  width: 100%;
  /* height: 70vh; */
  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>