<template>
  <view class="container">
    <view class="screen">银幕</view>
    <canvas 
      canvas-id="seatCanvas"
      type="2d"
      class="seat-canvas"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    ></canvas>
    <view class="legend">
      <view class="legend-item">
        <view class="seat-icon available"></view>
        <text>可选</text>
      </view>
      <view class="legend-item">
        <view class="seat-icon selected"></view>
        <text>已选</text>
      </view>
      <view class="legend-item">
        <view class="seat-icon sold"></view>
        <text>已售</text>
      </view>
    </view>
    <view class="selected-seats">
      <text>已选座位：{{ selectedSeats.join(', ') || '无' }}</text>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      ctx: null,
      canvasWidth: 300,
      canvasHeight: 500,
      seatSize: 30,
      gap: 10,
      rows: 8,
      cols: 10,
      seats: [],
      selectedSeats: [],
      touchStartX: 0,
      touchStartY: 0,
      offsetX: 0,
      offsetY: 0
    }
  },
  onReady() {
    this.initSeats();
    this.initAndroidCanvas();
  },
  methods: {
    initSeats() {
      // 初始化座位数据
      for (let i = 0; i < this.rows; i++) {
        this.seats[i] = [];
        for (let j = 0; j < this.cols; j++) {
          // 随机生成一些已售座位
          const isSold = Math.random() < 0.2;
          this.seats[i][j] = {
            row: i,
            col: j,
            status: isSold ? 'sold' : 'available',
            x: 0,
            y: 0
          };
        }
      }
    },
    // 替换原来的 initAndroidCanvas 方法
    initAndroidCanvas() {
      return new Promise((resolve) => {
        // 安卓平台需要使用 uni.createCanvasContext
        this.ctx = uni.createCanvasContext('seatCanvas', this);
        console.log(this.ctx,'ctx123123123')
        // 获取Canvas显示尺寸
        const query = uni.createSelectorQuery().in(this);
        query.select('.seat-canvas')
          .boundingClientRect(rect => {
            if (!rect) {
              console.error('获取Canvas尺寸失败');
              return resolve(false);
            }
            
            this.canvasWidth = rect.width;
            this.canvasHeight = rect.height;
            
            // 计算初始偏移使座位居中
            const totalWidth = this.cols * (this.seatSize + this.gap) - this.gap;
            const totalHeight = this.rows * (this.seatSize + this.gap) - this.gap;
            this.offsetX = (this.canvasWidth - totalWidth) / 2;
            this.offsetY = (this.canvasHeight - totalHeight) / 2;
            
            this.drawSeats();
            resolve(true);
          })
          .exec();
      });
    },
		
  drawSeats() {
    if (!this.ctx) return;
    
    // 清空画布（安卓平台方式）
    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
    
    // 绘制座位
    for (let i = 0; i < this.rows; i++) {
      for (let j = 0; j < this.cols; j++) {
        const seat = this.seats[i][j];
        const x = j * (this.seatSize + this.gap) + this.offsetX;
        const y = i * (this.seatSize + this.gap) + this.offsetY;
        
        // 更新座位坐标
        seat.x = x;
        seat.y = y;
        
        // 设置座位颜色
        switch (seat.status) {
          case 'available':
            this.ctx.setFillStyle('#4CAF50');
            break;
          case 'selected':
            this.ctx.setFillStyle('#2196F3');
            break;
          case 'sold':
            this.ctx.setFillStyle('#9E9E9E');
            break;
        }
        
        // 绘制座位（安卓平台API）
        this.ctx.fillRect(x, y, this.seatSize, this.seatSize);
        
        // 绘制座位编号
        this.ctx.setFillStyle('#FFFFFF');
        this.ctx.setFontSize(12);
        this.ctx.setTextAlign('center');
        this.ctx.fillText(
          `${String.fromCharCode(65 + i)}${j + 1}`,
          x + this.seatSize / 2,
          y + this.seatSize / 2 + 4 // 安卓平台文字垂直对齐需要微调
        );
      }
    }
    
			// 实际绘制（安卓平台需要显式调用draw）
			this.ctx.draw();
		}, 
    // 触摸事件处理（安卓专用优化）
    handleTouchStart(e) {
      this.touchStartX = e.touches[0].x;
      this.touchStartY = e.touches[0].y;
    },
    
    handleTouchMove(e) {
      const touchX = e.touches[0].x;
      const touchY = e.touches[0].y;
      
      // 计算移动距离
      const dx = touchX - this.touchStartX;
      const dy = touchY - this.touchStartY;
      
      // 更新偏移量
      this.offsetX += dx;
      this.offsetY += dy;
      
      // 限制边界
      const minX = this.canvasWidth - (this.cols * (this.seatSize + this.gap) - this.gap);
      const minY = this.canvasHeight - (this.rows * (this.seatSize + this.gap) - this.gap);
      
      this.offsetX = Math.max(minX, Math.min(0, this.offsetX));
      this.offsetY = Math.max(minY, Math.min(0, this.offsetY));
      
      // 更新起始位置
      this.touchStartX = touchX;
      this.touchStartY = touchY;
      
      this.drawSeats();
    },
    
    handleTouchEnd(e) {
      // 检测是否点击了座位
      const touchX = e.changedTouches[0].x;
      const touchY = e.changedTouches[0].y;
      
      // 检查是否点击了座位
      for (let i = 0; i < this.rows; i++) {
        for (let j = 0; j < this.cols; j++) {
          const seat = this.seats[i][j];
          if (
            touchX >= seat.x && 
            touchX <= seat.x + this.seatSize && 
            touchY >= seat.y && 
            touchY <= seat.y + this.seatSize
          ) {
            this.toggleSeatSelection(seat);
            return;
          }
        }
      }
    },
    
    toggleSeatSelection(seat) {
      if (seat.status === 'sold') return;
      
      if (seat.status === 'available') {
        seat.status = 'selected';
        this.selectedSeats.push(`${String.fromCharCode(65 + seat.row)}${seat.col + 1}`);
      } else {
        seat.status = 'available';
        this.selectedSeats = this.selectedSeats.filter(
          s => s !== `${String.fromCharCode(65 + seat.row)}${seat.col + 1}`
        );
      }
      
      this.drawSeats();
    }
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  height: 100vh;
  background-color: #f5f5f5;
}

.screen {
  width: 80%;
  height: 40rpx;
  background: linear-gradient(to bottom, #ccc, #fff);
  margin-bottom: 40rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.seat-canvas {
  width: 100%;
  height: 500px; /* 安卓使用固定像素单位更可靠 */
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 8rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}

.legend {
  display: flex;
  justify-content: center;
  margin-bottom: 20rpx;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 0 20rpx;
}

.seat-icon {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
  border-radius: 4rpx;
}

.available {
  background-color: #4CAF50;
}

.selected {
  background-color: #2196F3;
}

.sold {
  background-color: #9E9E9E;
}

.selected-seats {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  width: 90%;
  text-align: center;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
}
</style>