<script setup>
import { ref, onMounted, onUnmounted, computed, nextTick, getCurrentInstance as vueGetCurrentInstance } from 'vue'
import FuClickArea from './FuClickArea.vue'

// 获取 Vue 实例
const instance = vueGetCurrentInstance()

// 组件属性
const props = defineProps({
  active: {
    type: Boolean,
    default: false
  },
  scrollPosition: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['collect-seal'])

// 是否收集福印
const sealCollected = ref(false)

// 福字点击区域状态
const fuClickAreaVisible = ref(true)
const sq3ImageVisible = ref(false)

// 计算视差效果的偏移量
const parallaxOffset = computed(() => {
  return props.scrollPosition * 0.1
})

// 点击福字区域
const handleFuClick = () => {
  fuClickAreaVisible.value = false
  sq3ImageVisible.value = true
  emit('collect-seal')
}

// 拖拽状态
const isDragging = ref(false)
const showDuck = ref(true) // 调试时默认显示鸭子
const deskImage = ref('/static/dzm/img_desk1.png')
const showGuideElements = ref(true)

// Canvas 上下文
const ctx = ref(null)

// 鸭子图片路径
const duckImagePath = ref(null)

// 鸭子位置（相对于 Canvas）
const duckX = ref(275)
const duckY = ref(110)

// 鸭子尺寸（与图片实际尺寸一致）
const duckWidth = 36
const duckHeight = 70

// 拖拽偏移量
const dragOffsetX = ref(0)
const dragOffsetY = ref(0)

// Canvas 位置信息
const canvasRect = ref({
  left: 0,
  top: 0,
  width: 0,
  height: 0
})

// 目标区域 (餐桌区域) - 相对于 Canvas 的坐标
const targetArea = ref({
  x: 0,
  y: 80,
  width: 200,
  height: 150
})

// 动画帧 ID
const animationId = ref(null)

// 初始化 Canvas
const initCanvas = () => {
  console.log('正在初始化 Canvas...')

  // 在 uni-app 中使用 uni.createCanvasContext
  ctx.value = uni.createCanvasContext('dragDuckCanvas', instance)

  if (ctx.value) {
    console.log('Canvas 上下文创建成功')
    // 加载鸭子图片
    loadDuckImage()
    // 获取 Canvas 位置
    getCanvasPosition()
    // 开始动画循环
    startAnimation()
  } else {
    console.error('Canvas 上下文创建失败')
  }
}

// 加载鸭子图片
const loadDuckImage = () => {
  uni.getImageInfo({
    src: '/static/dzm/img_duck.png',
    success: (res) => {
      console.log('鸭子图片加载成功:', res)
      duckImagePath.value = res.path
    },
    fail: (err) => {
      console.error('鸭子图片加载失败:', err)
    }
  })
}

// 获取 Canvas 元素位置
const getCanvasPosition = () => {
  const query = uni.createSelectorQuery().in(instance)
  query.select('#dragDuckCanvas').boundingClientRect(res => {
    if (res) {
      canvasRect.value = {
        left: res.left,
        top: res.top,
        width: res.width,
        height: res.height
      }
      console.log('Canvas 位置信息:', canvasRect.value)
    } else {
      console.error('无法获取 Canvas 位置信息')
    }
  }).exec()
}

// 开始动画循环
const startAnimation = () => {
  const animate = () => {
    drawCanvas()
    animationId.value = requestAnimationFrame(animate)
  }
  animationId.value = requestAnimationFrame(animate)
}

// 绘制 Canvas
const drawCanvas = () => {
  if (!ctx.value) return

  // 清除 Canvas
  ctx.value.clearRect(0, 0, canvasRect.value.width || 400, canvasRect.value.height || 600)

  // 绘制目标区域
  drawTarget()

  // 绘制鸭子
  drawDuck()

  // 执行绘制
  ctx.value.draw(true)
}

// 绘制目标区域
const drawTarget = () => {
  const target = targetArea.value

  // 绘制目标区域背景
  ctx.value.setFillStyle('rgba(52, 152, 219, 0.3)')
  ctx.value.fillRect(target.x, target.y, target.width, target.height)

  // 绘制目标区域边框
  ctx.value.setStrokeStyle('#3498db')
  ctx.value.setLineWidth(2)
  ctx.value.setLineDash([5, 5])
  ctx.value.strokeRect(target.x, target.y, target.width, target.height)
  ctx.value.setLineDash([])

  // 绘制目标区域文字
  ctx.value.setFontSize(14)
  ctx.value.setFillStyle('#3498db')
  ctx.value.setTextAlign('center')
  ctx.value.fillText(
    '目标区域',
    target.x + target.width / 2,
    target.y + target.height / 2
  )
}

// 绘制鸭子
const drawDuck = () => {
  if (!showDuck.value) return

  // 如果图片已加载，绘制图片
  if (duckImagePath.value) {
    ctx.value.drawImage(duckImagePath.value, duckX.value, duckY.value, duckWidth, duckHeight)
  } else {
    // 图片未加载时，绘制占位方块
    ctx.value.setFillStyle('#ffcc00')
    ctx.value.fillRect(duckX.value, duckY.value, duckWidth, duckHeight)

    // 绘制边框
    ctx.value.setStrokeStyle('#333')
    ctx.value.setLineWidth(2)
    ctx.value.strokeRect(duckX.value, duckY.value, duckWidth, duckHeight)

    // 绘制文字
    ctx.value.setFontSize(14)
    ctx.value.setFillStyle('#FFFFFF')
    ctx.value.setTextAlign('center')
    ctx.value.setTextBaseline('middle')
    ctx.value.fillText('鸭', duckX.value + duckWidth / 2, duckY.value + duckHeight / 2)
  }

  // 如果正在拖拽，绘制拖拽效果
  if (isDragging.value) {
    // 绘制拖拽阴影
    ctx.value.setFillStyle('rgba(231, 76, 60, 0.3)')
    ctx.value.fillRect(duckX.value, duckY.value, duckWidth, duckHeight)

    // 绘制拖拽边框
    ctx.value.setStrokeStyle('#e74c3c')
    ctx.value.setLineWidth(2)
    ctx.value.setLineDash([5, 5])
    ctx.value.strokeRect(duckX.value - 3, duckY.value - 3, duckWidth + 6, duckHeight + 6)
    ctx.value.setLineDash([])
  }
}

// 检查触摸点是否在鸭子内
const checkTouchInDuck = (x, y) => {
  return x >= duckX.value &&
         x <= duckX.value + duckWidth &&
         y >= duckY.value &&
         y <= duckY.value + duckHeight
}

// 检查鸭子是否在目标区域内
const checkDuckInTarget = () => {
  const target = targetArea.value

  // 计算鸭子中心点
  const duckCenterX = duckX.value + duckWidth / 2
  const duckCenterY = duckY.value + duckHeight / 2

  // 检查中心点是否在目标区域内
  return duckCenterX >= target.x &&
         duckCenterX <= target.x + target.width &&
         duckCenterY >= target.y &&
         duckCenterY <= target.y + target.height
}

// 触摸开始事件
const handleTouchStart = (e) => {
  console.log('触摸开始事件触发', e)

  // 获取触摸点
  const touch = e.touches[0]
  if (!touch) {
    console.error('没有触摸点信息')
    return
  }

  // 确保 Canvas 位置信息是最新的
  getCanvasPosition()

  // 异步获取 Canvas 位置后执行检查
  setTimeout(() => {
    // 计算相对于 Canvas 的坐标
    const touchX = touch.clientX - canvasRect.value.left
    const touchY = touch.clientY - canvasRect.value.top

    console.log(`触摸点相对 Canvas: (${touchX}, ${touchY})`)
    console.log(`鸭子位置: (${duckX.value}, ${duckY.value})`)

    // 检查是否点击在鸭子上
    if (checkTouchInDuck(touchX, touchY)) {
      console.log('触摸点在鸭子内，开始拖拽')

      // 设置拖拽状态和偏移量
      isDragging.value = true
      dragOffsetX.value = touchX - duckX.value
      dragOffsetY.value = touchY - duckY.value

      showDuck.value = true
    } else {
      console.log('触摸点不在鸭子内')
    }
  }, 50)
}

// 触摸移动事件
const handleTouchMove = (e) => {
  if (!isDragging.value) return

  e.preventDefault()

  const touch = e.touches[0]
  if (!touch) return

  // 计算相对于 Canvas 的坐标
  const touchX = touch.clientX - canvasRect.value.left
  const touchY = touch.clientY - canvasRect.value.top

  // 更新鸭子位置
  duckX.value = touchX - dragOffsetX.value
  duckY.value = touchY - dragOffsetY.value

  // 限制边界
  const canvasW = canvasRect.value.width || 400
  const canvasH = canvasRect.value.height || 600

  duckX.value = Math.max(0, Math.min(canvasW - duckWidth, duckX.value))
  duckY.value = Math.max(0, Math.min(canvasH - duckHeight, duckY.value))

  console.log(`鸭子新位置: (${duckX.value}, ${duckY.value})`)
}

// 触摸结束事件
const handleTouchEnd = () => {
  console.log('触摸结束事件触发')

  if (isDragging.value) {
    isDragging.value = false

    // 检查是否成功放入目标区域
    if (checkDuckInTarget()) {
      console.log('成功放入目标区域！')
      // 更换餐桌图片
      deskImage.value = '/static/dzm/img_desk2.png'
      // 隐藏引导元素
      showGuideElements.value = false
      // 隐藏鸭子
      showDuck.value = false
    }
  }
}

// 开始拖拽（从触发区域开始）
const startDrag = (e) => {
  console.log('开始拖拽', e)

  // 初始化 Canvas
  if (!ctx.value) {
    initCanvas()
  }

  // 设置鸭子初始位置（在触发区域附近）
  duckX.value = 50
  duckY.value = 50
  showDuck.value = true

  // 触发触摸开始事件处理
  handleTouchStart(e)
}

// 页面挂载时的初始化
onMounted(() => {
  // 添加动画类，触发入场动画
  const container = document.querySelector('.dongzhimen-scene-container')
  if (container) {
    container.classList.add('animate-in')
  }

  // 调试时自动初始化 Canvas
  setTimeout(() => {
    initCanvas()
  }, 500)
})

// 组件卸载时清理
onUnmounted(() => {
  // 停止动画
  if (animationId.value) {
    cancelAnimationFrame(animationId.value)
  }
})
</script>

<template>
  <view class="dongzhimen-scene-container" :class="{ 'active': active }">
    <!-- 背景图片层 -->
    <view class="background-layer" :style="{ transform: `translateY(${parallaxOffset}px)` }">
      <image src="/static/bg/bg5.jpg" alt="东直门商圈" class="background-image" mode="widthFix" />
    </view>

    <!-- 福字点击区域 -->
    <FuClickArea
      :visible="fuClickAreaVisible"
      :x-range="630"
      :y-range="400"
      :y-start="150"
      :fu-width="100"
      :fu-height="100"
      @click="handleFuClick"
    />

    <!-- sq3图片 -->
    <image
      v-if="sq3ImageVisible"
      src="/static/images/sq5.png"
      alt="新春祝福"
      class="sq-image"
      mode="widthFix"
    />

    <!-- 装饰图片 -->
    <image :src="deskImage" alt="餐桌" class="deco-img desk-img" mode="widthFix" />
    <image src="/static/dzm/img_stove1.png" alt="灶台" class="deco-img stove-img" mode="widthFix" />
    <image v-if="showGuideElements" src="/static/dzm/img_line.png" alt="线条" class="deco-img line-img" mode="widthFix" />
    <image v-if="showGuideElements" src="/static/images/icon_hand.png" alt="手势" class="deco-img hand-img" mode="widthFix" />

    <!-- Canvas 拖拽区域 -->
    <canvas
      canvas-id="dragDuckCanvas"
      id="dragDuckCanvas"
      class="drag-canvas"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
    ></canvas>

    <!-- 拖拽触发区域 -->
    <view
      v-if="showGuideElements"
      class="drag-trigger-area"
      @touchstart="startDrag"
    ></view>
  </view>
</template>

<style scoped>
.dongzhimen-scene-container {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ff6b35;
}

.background-layer {
  position: relative;
  width: 100%;
  transition: transform 0.1s ease;
  height: auto;
}

.background-image {
  width: 100%;
  height: auto;
  display: block;
}

.sq-image {
  position: absolute;
  top: 220rpx;
  right: -6rpx;
  width: 300rpx;
  height: auto;
  z-index: 20;
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

.deco-img {
  position: absolute;
  z-index: 25;
}

.desk-img {
  left: 13rpx;
  top: 1665rpx;
  width: 441rpx;
  height: auto;
}

.stove-img {
  left: 492rpx;
  top: 1711rpx;
  width: 241rpx;
  height: auto;
}

.line-img {
  left: 250rpx;
  top: 1842rpx;
  width: 360rpx;
  height: auto;
}

.hand-img {
  left: 440rpx;
  top: 1900rpx;
  width: 38rpx;
  height: auto;
  animation: arcSlideLeft 1.2s ease-in-out infinite;
}

@keyframes arcSlideLeft {
  0% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateX(-80rpx) translateY(3rpx);
    opacity: 1;
  }
}

.drag-canvas {
  position: absolute;
  left: 0;
  top: 800px;
  width: 375px;
  height: 300px;
  z-index: 100;
  pointer-events: auto;
}

.drag-trigger-area {
  position: absolute;
  left: 540rpx;
  top: 1781rpx;
  width: 100rpx;
  height: 100rpx;
  z-index: 30;
}
</style>
