
<template>
  <div class="page_container">
    <div class="canvas-container">
      <canvas
        id="mapCanvas"
        ref="mapCanvas"
        @wheel="handleZoom"
        @click="handleCanvasClick"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @mousedown="handleMouseDown"
        @mousemove="handleMouseMove"
        @mouseup="handleMouseUp"
        @mouseleave="handleMouseUp"
      ></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.station_code}}</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>{{selectedPoint.station_name}}</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>{{ selectedPoint.angle }}</p></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import { throttle } from 'lodash'
import markerImage from '@images/new/agv.png'
import { getMapInfoByCode, getRouteInfo, queryMapAllStation } from '@config/getData.js'
import canvasZoomDrag from '@config/canvasZoomDrag'
export default {
  data () {
    return {
      canvas: null, // Canvas 元素
      ctx: null, // Canvas 绘图上下文
      mapData: null, // 地图数据
      pathData: null, // 路径数据
      pointData: null, // 点位数据
      showPopup: false,
      selectedPoint: {},
      popupStyle: {left: '0px', top: '0px'},
      selectedPointId: null
    }
  },
  mixins: [canvasZoomDrag],
  mounted () {
    this._getMapInfoByCode()
    document.addEventListener('click', this.handleDocumentClick)
  },
  beforeDestroy () {
    // 移除事件监听
    document.removeEventListener('click', this.handleDocumentClick)
  },
  methods: {
    async _getMapInfoByCode () {
      try {
        let res = await getMapInfoByCode()
        if (res) {
          this.mapData = res
          this._getRouteInfo()
        }
      } catch (e) {
        this.$message.error(e)
      }
    },
    async _getRouteInfo () {
      try {
        let res = await getRouteInfo()
        this.pathData = [...res]
        this._queryMapAllStation()
      } catch (e) {
        this.$message.error(e)
      }
    },
    async _queryMapAllStation () {
      try {
        let res = await queryMapAllStation()
        const stations = [...res]
        this.pointData = this.filterPointData(this.pathData, stations)
        this.initCanvas()
      } catch (e) {
        this.$message.error(e)
      }
    },
    filterPointData (routes, stations) {
      const result = []
      const seenStationIds = new Set()
      routes.forEach((route) => {
        const startStation = stations.find((station) => station.station_id === route.start_id)
        const endStation = stations.find((station) => station.station_id === route.end_id)
        if (startStation && !seenStationIds.has(startStation.station_id)) {
          result.push(startStation)
          seenStationIds.add(startStation.station_id)
        }
        if (endStation && !seenStationIds.has(endStation.station_id)) {
          result.push(endStation)
          seenStationIds.add(endStation.station_id) // 标记为已添加
        }
      })
      return result
    },
    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.$store.getters.baseUrl}${this.mapData.mapImageAddress}`
      img.onload = () => {
        this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height)
        this.ctx.save()
        this.ctx.translate(this.mapData.x * -1 * this.mapData.resolution, 0)
        this.ctx.scale(1, -1)
        this.drawPath()
        this.drawMarkers()
      }
    },
    drawPath () {
      this.ctx.beginPath()
      this.pathData.forEach((point, index) => {
        const startX = point.start_x * this.mapData.resolution
        const startY = point.start_y * this.mapData.resolution
        const endX = point.end_x * this.mapData.resolution
        const endY = point.end_y * this.mapData.resolution
        this.ctx.moveTo(startX, startY)
        this.ctx.lineTo(endX, endY)
        this.ctx.strokeStyle = '#009de5'
        this.ctx.lineWidth = 3
        this.ctx.stroke()
      })
    },
    drawMarkers () {
      const markerImg = new Image()
      markerImg.src = markerImage
      markerImg.onload = () => {
        this.pointData.forEach(point => {
          const x = point.x * this.mapData.resolution
          const y = point.y * this.mapData.resolution
          if (point.station_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.station_name, x, -y + 25)
          this.ctx.restore()
        })
      }
    },
    handleCanvasClick (event) {
      const rect = this.canvas.getBoundingClientRect()
      const mouseX = (event.clientX - rect.left) / this.scale
      const mouseY = (event.clientY - rect.top) / this.scale
      this.pointData.forEach(point => {
        let x = (point.x - this.mapData.x) * this.mapData.resolution
        let y = point.y * -1 * this.mapData.resolution
        x = Math.abs(x) === 0 ? 0 : x
        y = Math.abs(y) === 0 ? 0 : y
        // 检查点击位置是否在标记图片内
        if (mouseX >= x - 10 && mouseX <= x + 10 && mouseY >= y - 10 && mouseY <= y + 10) {
          if (this.selectedPointId === point.station_id) {
            this.resetSelection()
          } else {
            this.selectedPointId = point.station_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()
      }
    }
  }
}
</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%)
  box-shadow inset 1px 1px 7px 2px #4d9bcd
  overflow hidden
.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>
