
<template>
  <div class="page_container">
    <div class="canvas-container">
      <canvas id="mapCanvas" ref="mapCanvas" @wheel="handleZoom"  @click="handleCanvasClick" @touchstart="handleTouchStart" @touchmove="handleTouchMove"></canvas>
      <el-row type="flex" justify="end" class="map_tools">
        <el-button type="primary" :disabled="zoomPercentage === 2" icon="el-icon-minus" size="mini" style="border: 0;border-radius: 0;" @click="zoomOut"></el-button>
        <div class="zoom_data">{{ zoomPercentage }}%</div>
        <el-button type="primary" :disabled="zoomPercentage === 200" icon="el-icon-plus" size="mini" style="border: 0;border-radius: 0;" @click="zoomIn"></el-button>
      </el-row>
    </div>
    <div
      v-if="showPopup"
      class="point-popup"
      :style="popupStyle"
      @click.stop
    >
      <el-row type="flex" justify="space-between" class="popup-content" style="border-bottom: 1px solid #fff;">
        <el-col :span="10"><h3>编号</h3></el-col>
        <el-col :span="14"><p>{{selectedPoint.id}}</p></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="popup-content">
        <el-col :span="10"><h3>别名</h3></el-col>
        <el-col :span="14"><p>-</p></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="popup-content">
        <el-col :span="10"><h3>X坐标</h3></el-col>
        <el-col :span="14"><p>{{ selectedPoint.x }}</p></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="popup-content">
        <el-col :span="10"><h3>Y坐标</h3></el-col>
        <el-col :span="14"><p>{{ selectedPoint.y }}</p></el-col>
      </el-row>
      <el-row type="flex" justify="space-between" class="popup-content">
        <el-col :span="10"><h3>角度值</h3></el-col>
        <el-col :span="14"><p>0</p></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import { throttle } from 'lodash'
import markerImage from '@images/new/agv.png'
import { fetchMapData, fetchPathData } from '@config/getData.js'
export default {
  data () {
    return {
      scale: 1, // 缩放比例
      canvas: null, // Canvas 元素
      ctx: null, // Canvas 绘图上下文
      touchStart: null, // 触摸起点
      zoomPercentage: 100, // 当前缩放百分比
      mapData: null, // 存储从后端获取的地图数据
      pathData: null, // 存储从后端获取的路径数据
      showPopup: false,
      selectedPoint: {},
      popupStyle: {left: '0px', top: '0px'},
      selectedPointId: null

    }
  },
  mounted () {
    this._fetchMapData()
    document.addEventListener('click', this.handleDocumentClick)
  },
  beforeDestroy () {
    // 移除事件监听
    document.removeEventListener('click', this.handleDocumentClick)
  },
  methods: {
    async _fetchMapData () {
      try {
        let res = await fetchMapData()
        if (res) {
          this.mapData = res.data
          this._fetchPathData()
        }
      } catch (e) {
        this.$message.error(e)
      }
    },
    async _fetchPathData () {
      try {
        let res = await fetchPathData()
        this.pathData = [...res.data]
        this.initCanvas()
      } catch (e) {
        this.$message.error(e)
      }
    },
    initCanvas () {
      this.canvas = this.$refs.mapCanvas
      this.ctx = this.canvas.getContext('2d')
      this.canvas.width = this.mapData.width
      this.canvas.height = this.mapData.height
      this.redrawCanvas()
    },
    redrawCanvas () {
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      const img = new Image()
      img.src = this.mapData.image
      img.onload = () => {
        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
        this.ctx.save()
        this.ctx.translate(this.mapData.leftBottomCoordinate.x * -1 * this.mapData.pixelRatio, 0)
        this.ctx.scale(1, -1)
        this.drawPath()
        this.drawMarkers()
      }
    },
    drawPath () {
      this.ctx.beginPath()
      this.pathData.forEach((point, index) => {
        const x = point.x * this.mapData.pixelRatio
        const y = point.y * this.mapData.pixelRatio
        if (index === 0) {
          this.ctx.moveTo(x, y)
        } else {
          this.ctx.lineTo(x, y)
        }
      })
      this.ctx.strokeStyle = '#009de5'
      this.ctx.lineWidth = 3
      this.ctx.stroke()
    },
    drawMarkers () {
      const markerImg = new Image()
      markerImg.src = markerImage
      markerImg.onload = () => {
        this.pathData.forEach(point => {
          const x = point.x * this.mapData.pixelRatio
          const y = point.y * this.mapData.pixelRatio
          if (point.id === this.selectedPointId) {
            this.ctx.beginPath()
            this.ctx.arc(x, y, 10, 0, Math.PI * 2)
            this.ctx.fillStyle = '#59ccd2'
            this.ctx.fill()
          } else {
            this.ctx.drawImage(markerImg, x - 10, y - 10, 20, 20)
          }
          this.ctx.save()
          this.ctx.scale(1, -1)
          this.ctx.font = '12px Arial'
          this.ctx.fillStyle = 'white'
          this.ctx.textAlign = 'center'
          this.ctx.fillText(point.id, x, -y + 25)
          this.ctx.restore()
        })
      }
    },
    handleCanvasClick (event) {
      const rect = this.canvas.getBoundingClientRect()
      const mouseX = event.clientX - rect.left
      const mouseY = event.clientY - rect.top
      this.pathData.forEach(point => {
        const x = (point.x - this.mapData.leftBottomCoordinate.x) * this.mapData.pixelRatio
        const y = point.y * -1 * this.mapData.pixelRatio
        // 检查点击位置是否在标记图片内
        if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
          if (this.selectedPointId === point.id) {
            this.resetSelection()
          } else {
            this.selectedPointId = point.id
            this.selectedPoint = point
            this.showPopup = true
            this.popupStyle = {
              left: `${event.clientX - 40}px`,
              top: `${event.clientY - 200}px`
            }
            this.initCanvas()
            event.stopPropagation()
          }
        }
      })
    },
    handleDocumentClick () {
      this.resetSelection()
    },
    resetSelection () {
      if (this.selectedPointId) {
        this.selectedPointId = null
        this.selectedPoint = null
        this.showPopup = false
        this.initCanvas()
      }
    },
    zoom (step) {
      this.scale = Math.min(2, Math.max(0.02, this.scale + step / 100))
      this.zoomPercentage = Math.round(this.scale * 100)
      this.applyTransform()
    },
    applyTransform () {
      this.canvas.style.transform = `scale(${this.scale})`
    },
    // 鼠标滚动缩放
    handleZoom (event) {
      event.preventDefault()
      const delta = event.deltaY
      const step = delta > 0 ? -1 : 1
      this.zoom(step)
    },
    // 触摸开始事件
    handleTouchStart (event) {
      this.touchStart = Array.from(event.touches).map(touch => ({
        x: touch.clientX,
        y: touch.clientY
      }))
    },
    // 触摸移动事件
    handleTouchMove (event) {
      if (this.touchStart && this.touchStart.length === 2 && event.touches.length === 2) {
        const startDist = this.getDistance(this.touchStart[0].x, this.touchStart[0].y, this.touchStart[1].x, this.touchStart[1].y)
        const currentDist = this.getDistance(event.touches[0].clientX, event.touches[0].clientY, event.touches[1].clientX, event.touches[1].clientY)
        const step = (currentDist - startDist) / startDist
        this.zoom(step)
      }
      this.touchStart = Array.from(event.touches).map(touch => ({
        x: touch.clientX,
        y: touch.clientY
      }))
    },
    // 计算两点之间的距离
    getDistance (x1, y1, x2, y2) {
      return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2)
    },
    zoomIn () {
      if (this.scale < 2) {
        this.zoom(8) // 每次放大8%
      }
    },
    zoomOut () {
      if (this.scale > 0.02) {
        this.zoom(-8) // 每次缩小8%
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.canvas-container
  position relative
  display flex
  justify-content: center;
  align-items: center;
  height calc(100% - .32rem)
  background-color rgba(4, 33, 58, 70%)
  // background-color rgb(11 68 137 / 70%)
  box-shadow inset 1px 1px 7px 2px #4d9bcd
  overflow auto
.map_tools
  position absolute
  top 0
  right 0
.zoom_data
  width .6rem
  font-size .16rem
  height .32rem
  line-height .32rem
  color #00d9f3
  text-align center
  border-top 1px solid #009fde
  border-bottom 1px solid #009fde
.point-popup
  position fixed
  background rgba(0, 0, 0, 70%)
  border 1px solid rgba(255, 255, 255, .3)
  border-radius: 8px;
  padding 10px
  box-shadow 0 0px 4px 2px rgba(255,255,255,0.1)
  z-index 100
  min-width 180px
  animation fadeIn 0.2s ease-out
  h3
    color #fff
    font-size 16px
    line-height 30px
    text-align center
  p
    color #fff
    font-size 16px
    line-height 30px
    text-align center
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
</style>
