<template>
  <div
    class="affix-container"
    id="indexpage-container"
    :style="{
      height: heightVal * radio + 'px',
      cursor: isDrag ? 'pointer' : 'default',
      scale: isSizeRaio,
      transformOrigin: '0 0'
    }"
  >
    <div
      :class="isDrag ? 'indexpage-container-active' : 'indexpage-container'"
      v-if="imgUrl"
      v-drag="isDrag"
      :style="{ scale: 1, transformOrigin: '0 0' }"
      ref="draggableElement"
    >
      <div class="indexpage-container-box">
        <img :src="imgUrl" alt="" class="indexpage-container-box-img" />

        <div class="indexpage-container-box-point">
          <!-- 连线 -->
          <div v-if="legendObj.driveLineShow">
            <div class="line-box">
              <svg id="svg" :width="widthVal" :height="heightVal">
                <template v-for="(item, index) in lineList" :key="index">
                  <!-- 定义箭头 -->
                  <defs>
                    <marker id="forward-arrow" viewBox="0 0 10 10" refX="10" refY="5" orient="auto">
                      <path d="M 0 0 L 10 5 L 0 10 z" fill="black" />
                    </marker>
                    <!-- 反向箭头 -->
                    <marker id="backward-arrow" viewBox="0 0 10 10" refX="0" refY="5" orient="auto">
                      <path d="M 10 0 L 0 5 L 10 10 z" fill="black" />
                    </marker>
                  </defs>
                  <template v-if="item.method == 0">
                    <line
                      :x1="Number(item.startPointX) * radio"
                      :y1="Number(item.startPointY) * radio"
                      :x2="Number(item.endPointX) * radio"
                      :y2="Number(item.endPointY) * radio"
                      :stroke="item.isSelect ? '#f48924' : '#00329F'"
                      :stroke-width="5 * radio"
                      :marker-start="item.direction === 2 ? 'url(#double-arrow-start)' : ''"
                      marker-end="url(#single-arrow)"
                      @click="handleChooseRoute(item, index)"
                    />
                    <path
                      :d="getLineMidArrowPath(item)"
                      stroke="none"
                      fill="black"
                      stroke-width="4"
                      :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
                      :marker-end="
                        item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
                      "
                    />
                  </template>
                  <template v-else>
                    <path
                      :d="getCurvePath(item)"
                      :stroke="item.isSelect ? '#f48924' : '#00329F'"
                      :stroke-width="5 * radio"
                      fill="none"
                      :marker-start="item.direction === 2 ? 'url(#backward-arrow)' : ''"
                      :marker-end="
                        item.direction === 2 ? 'url(#forward-arrow)' : 'url(#forward-arrow)'
                      "
                      @click="handleChooseRoute(item, index)"
                    />
                  </template>
                </template>
              </svg>
            </div>
          </div>
          <!-- 小车 -->
          <div
            class="indexpage-car-item"
            v-for="(item, index) in testCarList"
            @dblclick="carDbClick(item, index)"
            :key="index"
            :style="{
              left: item.realX * radio + 'px',
              top: item.realY * radio + 'px',
              width: legendObj.carShow ? 40 * radio + 'px' : '0',
              height: legendObj.carShow ? 22 * radio + 'px' : '0'
            }"
          >
            <img
              src="@/assets/imgs/indexPage/chache-4备份 7@2x.png"
              alt=""
              style="width: 100%; height: 100%"
            />
          </div>
          <div
            class="indexpage-container-box-point-item"
            v-for="(item, index) in pointList"
            :key="index"
            :style="{
              left:
                (item.locationX - item.locationWide / 2 / nowObject.showYamlJson.resolution / 100) *
                  radio +
                'px',
              top:
                (item.locationY - item.locationDeep / 2 / nowObject.showYamlJson.resolution / 100) *
                  radio +
                'px'
            }"
          >
            <!-- 库位点 -->
            <div
              class="indexpage-container-box-point-item-inner"
              v-if="item.showData"
              :style="{
                width:
                  (item.showData.locationWide / nowObject.showYamlJson.resolution / 100) * radio +
                  'px',
                height:
                  (item.showData.locationDeep / nowObject.showYamlJson.resolution / 100) * radio +
                  'px'
              }"
            >
              <!-- 库位 2-->
              <div v-if="item.type == 2" style="width: 100%; height: 100%">
                <el-popover placement="top-start" trigger="hover" width="auto">
                  <template #reference>
                    <img
                      :src="item.imgUrl"
                      alt=""
                      style="width: 100%; height: 100%"
                      @dblclick="storeClick(item)"
                    />
                  </template>
                  <div class="indexpage-container-box-point-item-inner-popover">
                    <div
                      class="indexpage-container-box-point-item-inner-popover-item"
                      style="margin-bottom: 8px"
                    >
                      <div class="indexpage-container-box-point-item-inner-popover-name">
                        库位名：
                      </div>
                      <div class="indexpage-container-box-point-item-inner-popover-value">
                        {{ item.showData.locationNo || '' }}
                      </div>
                    </div>
                    <div
                      class="indexpage-container-box-point-item-inner-popover-item"
                      style="margin-bottom: 8px"
                    >
                      <div class="indexpage-container-box-point-item-inner-popover-name">
                        所属线库：
                      </div>
                      <div class="indexpage-container-box-point-item-inner-popover-value">
                        {{ item.showData.laneName || '' }}
                      </div>
                    </div>
                    <div
                      class="indexpage-container-box-point-item-inner-popover-item"
                      style="margin-bottom: 8px"
                    >
                      <div class="indexpage-container-box-point-item-inner-popover-name">
                        所属区域：
                      </div>
                      <div class="indexpage-container-box-point-item-inner-popover-value">
                        {{ item.showData.areaName || '' }}
                      </div>
                    </div>
                  </div>
                </el-popover>
              </div>
              <!-- 设备点 -->
              <div v-if="item.type == 3">
                <img
                  :src="item.formattedData.mapImageUrl"
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
            <!-- 设备点 -->
            <div
              class="indexpage-container-box-point-item-inner"
              v-if="item.type == 3"
              :style="{
                width:
                  (item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
                    radio +
                  'px',
                height:
                  (item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
                    radio +
                  'px'
              }"
            >
              <div>
                <img
                  :src="
                    item.formattedData.mapImageUrl
                      ? item.formattedData.mapImageUrl
                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
                  "
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
            <!-- 停车点 -->
            <div
              class="indexpage-container-box-point-item-inner"
              v-if="item.type == 4"
              :style="{
                width:
                  (item.formattedData.locationWide / nowObject.showYamlJson.resolution / 100) *
                    radio +
                  'px',
                height:
                  (item.formattedData.locationDeep / nowObject.showYamlJson.resolution / 100) *
                    radio +
                  'px'
              }"
            >
              <div>
                <img
                  :src="
                    item.formattedData.mapImageUrl
                      ? item.formattedData.mapImageUrl
                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
                  "
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
            <!-- 路径点 -->
            <div
              class="indexpage-container-box-point-item-inner"
              v-if="item.type == 5"
              :style="{
                width: 150 * radio + 'px',
                height: 150 * radio + 'px'
              }"
            >
              <div>
                <img
                  :src="
                    item.formattedData.mapImageUrl
                      ? item.formattedData.mapImageUrl
                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
                  "
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
            <!-- 等待点 -->
            <div
              class="indexpage-container-box-point-item-inner"
              v-if="item.type == 6"
              :style="{
                width: 150 * radio + 'px',
                height: 150 * radio + 'px'
              }"
            >
              <div>
                <img
                  :src="
                    item.formattedData.mapImageUrl
                      ? item.formattedData.mapImageUrl
                      : 'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
                  "
                  alt=""
                  style="width: 100%; height: 100%"
                />
              </div>
            </div>
            <!-- 普通点 -->
            <el-tooltip
              class="box-item"
              effect="dark"
              :content="item.sortNum"
              placement="top"
              v-if="item.type == 1"
            >
              <div
                :style="{
                  width: 10 * radio + 'px',
                  height: 10 * radio + 'px',
                  background: '#000',
                  borderRadius: '50%'
                }"
              >
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 左下角图层 -->
  <div class="affix-container-left" :style="{ left: boxLeft + 'px' }">
    <div class="affix-container-left-box">
      <div
        class="affix-container-left-box-item-box"
        :style="{
          height: legendObj.legendShow ? '84px' : '0',
          overflow: 'hidden',
          transition: 'all 0.3s ease-in-out'
        }"
      >
        <div class="affix-container-left-box-item">
          <div class="affix-container-left-box-item-left"> 行驶路线 </div>
          <img
            src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
            alt=""
            class="affix-container-left-box-item-img"
            v-if="legendObj.driveLineShow"
            @click="changDriveLineShow"
          />
          <img
            src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
            alt=""
            class="affix-container-left-box-item-img"
            v-if="!legendObj.driveLineShow"
            @click="changDriveLineShow"
          />
        </div>
        <div class="affix-container-left-box-item">
          <div class="affix-container-left-box-item-left"> 车辆 </div>
          <img
            src="@/assets/imgs/indexPage/yanjing_xianshi_o.png"
            alt=""
            class="affix-container-left-box-item-img"
            v-if="legendObj.carShow"
            @click="changCarShow"
          />
          <img
            src="@/assets/imgs/indexPage/yanjing_yincang_o.png"
            alt=""
            class="affix-container-left-box-item-img"
            v-if="!legendObj.carShow"
            @click="changCarShow"
          />
        </div>
      </div>
      <div
        class="affix-container-left-box-item-bottom"
        @click="legendObj.legendShow = !legendObj.legendShow"
      >
        <div class="affix-container-left-box-item-bottom-left"> 图例 </div>
        <img
          src="@/assets/imgs/indexPage/zhankai@2x.png"
          alt=""
          class="affix-container-left-box-item-bottom-img"
          :style="{
            transform: legendObj.legendShow ? 'rotate(180deg)' : 'rotate(0deg)',
            transition: 'all 0.3s ease-in-out'
          }"
        />
      </div>
    </div>
  </div>

  <!-- 右下角的功能 -->
  <div class="affix-container-right">
    <!-- 拖拽 -->
    <div class="affix-container-right-item" @click="changeIsDrag">
      <img src="@/assets/imgs/indexPage/编组 12.png" alt="" style="width: 100%; height: 100%" />
    </div>
    <!-- 放大 -->
    <div class="affix-container-right-item">
      <img
        src="@/assets/imgs/indexPage/编组 14.png"
        alt=""
        style="width: 100%; height: 100%"
        @click="changeSizeRaio(0.2)"
      />
    </div>
    <!-- 缩小 -->
    <div class="affix-container-right-item">
      <img
        src="@/assets/imgs/indexPage/编组 15.png"
        alt=""
        style="width: 100%; height: 100%"
        @click="changeSizeRaio(-0.2)"
      />
    </div>
    <!-- 全屏 -->
    <div class="affix-container-right-item">
      <img
        src="@/assets/imgs/indexPage/编组 22.png"
        alt=""
        style="width: 100%; height: 100%"
        @click="toggleFullScreen"
      />
    </div>
  </div>
  <storeDialog ref="storeDialogRef" @success="getList" />
  <carDialog ref="carDialogRef" />
</template>

<script setup>
import {
  ref,
  defineComponent,
  reactive,
  nextTick,
  onMounted,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
import * as MapApi from '@/api/map/map'
import WebSocketClient from '../webSocket.js'
import storeDialog from './storeDialog.vue'
import { color } from 'echarts'
import { resetDragPosition } from '@/utils/drag'
import carDialog from './carDialog.vue'
import { is } from 'bpmn-js/lib/util/ModelUtil'
import JSONBigInt from 'json-bigint'
const imgUrl = ref('')
const carDialogRef = ref(null)
const socketClient = ref(null)

const emit = defineEmits(['transmitMapId'])
const storeDialogRef = ref(null)
const list = ref([])
const nowObject = ref(null)
const testCarList = ref([])
const carPointListFun = () => {
  let testJson = {
    type: 'map_push',
    content:
      '{"d0:65:78:c4:af:cc":"{\\"id\\":1,\\"macAddress\\":\\"d0:65:78:c4:af:cc\\",\\"robotModelNumber\\":\\"A-1\\",\\"pose2d\\":{\\"y\\":\\"1\\",\\"x\\":\\"2\\",\\"yaw\\":\\"30\\",\\"floor\\":\\"1\\",\\"area\\":\\"A区\\",\\"bat_soc\\":\\"40\\"}}"}'
  }
  let data = JSON.parse(testJson.content)
  // console.log("============",data)
  let dataList = []
  for (let key in data) {
    dataList.push({
      macAddress: key,
      data: JSON.parse(data[key])
    })
  }
  // console.log('=====', dataList)
  testCarList.value = dataList

  // let data2 = JSON.parse(data['d0:65:78:c4:af:cc'])
  // console.log(data2)
}
//是否可以拖拽
const isDrag = ref(false)
const changeIsDrag = () => {
  nextTick(() => {
    isDrag.value = !isDrag.value
    // console.log(isDrag.value)
    if (!isDrag.value) {
      //还原位置
      resetPosition()
    }
  })
}

const handleChooseRoute = (val, i) => {
  // console.log('============================', val)
  if (lineList.value.length) {
    if(val.isSelect){
      lineList.value.forEach((item, index) => {
      if (index == i) {
        item.isSelect = false
      } else {
        item.isSelect = false
      }
    })
    } else {
      lineList.value.forEach((item, index) => {
      if (index == i) {
        item.isSelect = true
      } else {
        item.isSelect = false
      }
    })
    }
   
  }
}

// 获取曲线的路径
const getCurvePath = (curve) => {
  let startPointX = Number(curve.startPointX) * radio.value
  let startPointY = Number(curve.startPointY) * radio.value
  let endPointX = Number(curve.endPointX) * radio.value
  let endPointY = Number(curve.endPointY) * radio.value

  return `M ${startPointX} ${startPointY} C ${curve.beginControlX * radio.value} ${curve.beginControlY * radio.value}, ${curve.endControlX * radio.value} ${curve.endControlY * radio.value}, ${endPointX} ${endPointY}`
}
//放大缩小
const isSizeRaio = ref(1)
const changeSizeRaio = (type) => {
  if (type < 0 && isSizeRaio.value + type <= 0) {
    return
  }
  isSizeRaio.value += type
}
//图层状态
const legendObj = reactive({
  driveLineShow: true,
  carShow: true,
  legendShow: true
})
// 车辆是否显示
const changCarShow = () => {
  legendObj.carShow = !legendObj.carShow
}
// 车辆行驶路线是否展示
const changDriveLineShow = () => {
  legendObj.driveLineShow = !legendObj.driveLineShow
}
const toggleFullScreen = () => {
  var elem = document.getElementById('indexpage-container') // 获取元素
  if (!document.fullscreenElement) {
    // 检查是否已经是全屏模式
    if (elem.requestFullscreen) {
      // 支持requestFullscreen API的标准方式
      elem.requestFullscreen().catch((err) => {
        alert(`无法进入全屏模式: ${err.message}`) // 处理错误情况
      })
    } else if (elem.mozRequestFullScreen) {
      // 旧版Firefox的API名称（已废弃）
      elem.mozRequestFullScreen()
    } else if (elem.webkitRequestFullscreen) {
      // WebKit/Safari/Chrome的API名称（已废弃）
      elem.webkitRequestFullscreen()
    } else if (elem.msRequestFullscreen) {
      // IE/Edge的API名称（已废弃）
      elem.msRequestFullscreen()
    }
    isDrag.value = true
  } else {
    // 退出全屏模式
    if (document.exitFullscreen) {
      // 标准API退出全屏模式
      document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
      // 旧版Firefox的API名称（已废弃）
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      // WebKit/Safari/Chrome的API名称（已废弃）
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      // IE/Edge的API名称（已废弃）
      document.msExitFullscreen()
    }
    console.log('退出全屏')
    isDrag.value = false
    resetPosition()
  }
  // 监听全屏状态变化事件
  document.addEventListener('fullscreenchange', function () {
    if (!document.fullscreenElement) {
      console.log('已退出全屏模式')
      // 在这里可以添加退出全屏后的逻辑
      isDrag.value = false
      resetPosition()
    } else {
      console.log('已进入全屏模式')
      // 在这里可以添加进入全屏后的逻辑
      isDrag.value = true
    }
  })

  // 监听旧版浏览器的全屏状态变化事件
  document.addEventListener('mozfullscreenchange', function () {
    if (!document.mozFullScreenElement) {
      console.log('已退出全屏模式 (Firefox旧版)')
      isDrag.value = false
      resetPosition()
    } else {
      console.log('已进入全屏模式 (Firefox旧版)')
      isDrag.value = true
    }
  })

  document.addEventListener('webkitfullscreenchange', function () {
    if (!document.webkitFullscreenElement) {
      console.log('已退出全屏模式 (WebKit旧版)')
      isDrag.value = false
      resetPosition()
    } else {
      console.log('已进入全屏模式 (WebKit旧版)')
      isDrag.value = true
    }
  })

  document.addEventListener('msfullscreenchange', function () {
    if (!document.msFullscreenElement) {
      console.log('已退出全屏模式 (IE/Edge旧版)')
      isDrag.value = false
      resetPosition()
    } else {
      console.log('已进入全屏模式 (IE/Edge旧版)')
      isDrag.value = true
    }
  })
}
//获取地图区域
const getList = async () => {
  let data = await MapApi.getPositionMapGetMap()
  let mapList = []
  for (let key in data) {
    mapList.push({
      floor: key,
      label: key + '层',
      value: key,
      children: data[key]
    })
  }
  if (mapList.length) {
    mapList.forEach((item) => {
      if (item.children.length) {
        item.children.forEach((child) => {
          child.label = child.area
          child.value = child.id
        })
      }
    })
  }

  list.value = mapList
  // console.log(list.value, data)
  //默认取第一个
  if (data[1][0]) {
    getMapData(data[1][0])
  }
}
//库位双击
const storeClick = async (item) => {
  // console.log(item)
  let storeData = await MapApi.houseLocationGetByMapItemId({
    mapId: item.positionMapId,
    mapItemId: item.id
  })
  // console.log(storeData)
  storeDialogRef.value.open(JSON.parse(JSON.stringify(storeData)))
}
const lineList = ref([])
const pointList = ref([])
const getPositionMapListFun = async (positionMapId) => {
  // console.log(positionMapId)
  let data = await MapApi.getPositionMapItemList({ positionMapId: positionMapId })
  // console.log(data)
  if (data && data.length > 0) {
    data.forEach((item) => {
      // console.log(JSON.parse(item.dataJson))
      item.formattedData = item.dataJson ? JSON.parse(item.dataJson) : ''
      item.showData = item.dataJson ? JSON.parse(item.dataJson)[0] : null
      item.imgUrl = formatteTypeImg(item.type)
    })
  }
  // console.log(data)
  pointList.value = data

  console.log('=======================', pointList.value)
  pointList.value.forEach((item) => {
    if (item.type === 1) {
      item.locationDeep = 40
      item.locationWide = 40
    } else if (item.type === 5 || item.type === 6) {
      item.locationDeep = 150
      item.locationWide = 150
    } else if (item.type === 2) {
      //库位点
      item.dataList = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.locationDeep = item.dataList[0].locationDeep
      item.locationWide = item.dataList[0].locationWide
    } else if (item.type === 3) {
      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.locationDeep = item.dataObj.locationDeep
      item.locationWide = item.dataObj.locationWide
    } else if (item.type === 4) {
      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.locationDeep = item.dataObj.locationDeep
      item.locationWide = item.dataObj.locationWide
    } else if (item.type === 7) {
    }
  })
  // let lineStyle = calculateDistanceAndAngle(
  //   {
  //     left: pointList.value[0].locationX,
  //     top: pointList.value[0].locationY
  //   },
  //   {
  //     left: pointList.value[1].locationX,
  //     top: pointList.value[1].locationY
  //   }
  // )
  // console.log(lineStyle)
  // lineList.value = [
  //   {
  //     ...lineStyle,
  //     color: '#1677ff',
  //     height: 2
  //   }
  // ]
}
const draggableElement = ref(null)
const resetPosition = () => {
  if (draggableElement.value) {
    resetDragPosition(draggableElement.value)
  }
}
// 计算直线中间箭头的路径
const getLineMidArrowPath = (item) => {
  const midX = ((Number(item.startPointX) + Number(item.endPointX)) / 2) * radio.value
  const midY = ((Number(item.startPointY) + Number(item.endPointY)) / 2) * radio.value

  let dx = item.endPointX * radio.value - item.startPointX * radio.value
  let dy = item.endPointY * radio.value - item.startPointY * radio.value
  let length = Math.sqrt(dx * dx + dy * dy)

  if (length === 0) {
    return `M ${midX} ${midY} L ${midX} ${midY}`
  }

  const unitDx = dx / length
  const unitDy = dy / length

  const arrowLength = 1
  const startXArrow = midX - unitDx * arrowLength
  const startYArrow = midY - unitDy * arrowLength
  const endXArrow = midX
  const endYArrow = midY

  return `M ${startXArrow} ${startYArrow} L ${endXArrow} ${endYArrow}`
}
const calculateDistanceAndAngle = (point1, point2) => {
  // 计算水平和垂直方向的差值
  const dx = point2.left - point1.left
  const dy = point2.top - point1.top

  // 计算两点之间的长度（使用勾股定理）
  const distance = Math.sqrt(dx * dx + dy * dy)

  // 计算两点连线与水平轴正方向的夹角（弧度）
  const angleInRadians = Math.atan2(dy, dx)

  // 将弧度转换为角度
  const angleInDegrees = angleInRadians * (180 / Math.PI)

  return {
    distance: distance,
    angle: angleInDegrees,
    left: point1.left,
    top: point1.top
  }
}

const formatteTypeImg = (type) => {
  switch (type) {
    case 1:
      return ''
    case 2:
      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png'
    case 3:
      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png'
    case 4:
      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png'
    case 5:
      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png'
    case 6:
      return 'https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png'
    default:
      return ''
  }
}
const replaceHttpWithWs = (str) => {
  return str.replace(/^http/, 'ws')
}
// 连接websocket
const linkWebSocket = (url) => {
  socketClient.value = new WebSocketClient(url)
  if (socketClient.value) {
    // 监听消息
    socketClient.value.onMessage((message) => {
      console.log('收到消息:', message)
      if (message.type == 'map_push') {
        let data = JSON.parse(testJson.content)
        // console.log("============",data)
        let dataList = []
        for (let key in data) {
          dataList.push({
            macAddress: key,
            data: JSON.parse(data[key])
          })
        }
        // console.log('=====', dataList)
        testCarList.value = dataList
      }
    })
  }
}
// 发送websocket消息
const sendMessage = () => {
  socketClient.value.send('Hello, WebSocket!')
}
// 断开连接
const disconnect = () => {
  socketClient.value.disconnect()
}
//获取扫描图
const getMapData = async (item) => {
  // console.log('============', JSON.parse(item.yamlJson))
  nowObject.value = JSON.parse(JSON.stringify(item))
  nowObject.value.showYamlJson = JSON.parse(item.yamlJson)
  let websoketUrl = `${replaceHttpWithWs(import.meta.env.VITE_BASE_URL)}/infra/ws?type=map&floor=${nowObject.value.floor}&area=${nowObject.value.area}`
  // console.log(websoketUrl)
  linkWebSocket(websoketUrl)
  getPositionMapListFun(nowObject.value.id)
  emit('transmitMapInfo', {
    id: item.id,
    floor: item.floor,
    area: item.area
  })
  let data = await MapApi.getPositionMapdDwnloadPngBase64({
    floor: item.floor,
    area: item.area
  })
  imgUrl.value = data
  computedRatio()
  getMapLineList()
}
const heightVal = ref(0)
const widthVal = ref(0)
const radio = ref(1)
const computedRatio = () => {
  nextTick(() => {
    if (imgUrl.value) {
      //这段代码之后会删掉 yaml会给原始宽高
      getImageSize(imgUrl.value)
        .then(({ width, height }) => {
          // console.log("原始地图的宽高",JSON.parse(nowObject.value.yamlJson))
          if (testCarList.value.length) {
            testCarList.value.forEach((item) => {
              item.originWidth = width
              item.originHeight = height
              item.origin = JSON.parse(nowObject.value.yamlJson).origin
              item.realX = convertToFrontendCoordinates(item.origin, width, height, [
                item.data.pose2d.x,
                item.data.pose2d.y
              ]).left
              item.realY = convertToFrontendCoordinates(item.origin, width, height, [
                item.data.pose2d.x,
                item.data.pose2d.y
              ]).top
            })
            // console.log('当前数据', testCarList.value)
          }
        })
        .catch((error) => {
          console.error(error.message)
        })

      let width = getElementWidthByClass('indexpage-container')
      getImageWidth(imgUrl.value, 'width').then((res) => {
        // console.log(res)
        let ratioVal = width / res
        radio.value = ratioVal
        widthVal.value = res
        if (pointList.value.length) {
          pointList.value.forEach((item) => {
            item.radio = radio.value
          })
        }
        if (testCarList.value.length) {
          testCarList.value.forEach((item) => {
            item.radio = radio.value
          })
        }
      })
      getImageWidth(imgUrl.value, 'height').then((res) => {
        // console.log('高', res)
        heightVal.value = res
      })
      // console.log(width)
    }
  })
}

const getMapLineList = () => {
  MapApi.mapLineListGet({ positionMapId: nowObject.value.id }).then((res) => {
    // console.log(res)
    lineList.value = res
  })
}

const getImageSize = (url) => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.src = url
    // 图片加载成功时触发
    img.onload = () => {
      const width = img.width
      const height = img.height
      resolve({ width, height })
    }
    // 图片加载失败时触发
    img.onerror = () => {
      reject(new Error(`Failed to load image from URL 获取图片尺寸失败: ${url}`))
    }
  })
}
const convertToFrontendCoordinates = (origin, width, height, target) => {
  // 提取原点的 x 和 y 坐标
  const [originX, originY] = origin
  // 提取目标点的 x 和 y 坐标
  const [targetX, targetY] = target

  // 计算目标点相对于原点在 x 方向上的偏移量
  const offsetX = targetX - originX
  // 计算目标点相对于原点在 y 方向上的偏移量
  const offsetY = targetY - originY

  // 计算前端页面中的 left 坐标
  const left = offsetX
  // 计算前端页面中的 top 坐标，需要考虑坐标系的转换
  const top = height - offsetY

  return {
    top,
    left,
    origin
  }
}
const getImageWidth = (imageUrl, name) => {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = function () {
      resolve(img[name])
    }
    img.onerror = function () {
      reject(new Error('图片加载失败'))
    }
    img.src = imageUrl
  })
}

const getElementWidthByClass = (className) => {
  const element = document.querySelector(`.${className}`)
  if (element) {
    // return window.getComputedStyle(element).width
    const widthWithUnit = window.getComputedStyle(element).width
    return widthWithUnit.slice(0, -2)
  }
  return null
}
//小车双击
const carDbClick = (item, index) => {
  // console.log(item)
  carDialogRef.value.open(JSON.parse(JSON.stringify(item)))
}
const boxLeft = ref(0)
//获取元素距离左边的距离
const getLeftPx = () => {
  let indexpageContainer = document.getElementById('indexpage-container')
  // console.log('距离左边的距离', indexpageContainer.getBoundingClientRect().left)
  boxLeft.value = indexpageContainer.getBoundingClientRect().left + 6
}
// 封装监听元素宽度变化的方法
const observeWidthChange = (id, callback) => {
  const targetElement = document.getElementById(id)
  if (!targetElement) {
    console.error(`未找到 ID 为 ${id} 的元素`)
    return
  }

  const resizeObserver = new ResizeObserver((entries) => {
    for (const entry of entries) {
      const newWidth = entry.contentRect.width
      callback(newWidth)
    }
  })

  resizeObserver.observe(targetElement)

  return () => {
    resizeObserver.disconnect()
  }
}

let stopObserving
defineExpose({ getMapData }) // 提供 open 方法，用于打开弹窗
onMounted(() => {
  carPointListFun()
  // getList()
  window.addEventListener('resize', computedRatio)
  stopObserving = observeWidthChange('indexpage-container', (newWidth) => {
    // 在这里执行宽度变化时的自定义操作
    // console.log(`元素宽度已变为: ${newWidth}px`);
    // 你可以添加更多的操作，比如更新组件的状态等
    getLeftPx()
    computedRatio()
  })
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', computedRatio)
})
// 组件卸载时停止监听
onUnmounted(() => {
  if (stopObserving) {
    stopObserving()
  }
})
</script>

<style lang="scss" scoped>
.affix-container {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
}
.indexpage-container {
  width: 100%;
  position: relative;
}
.indexpage-container-active {
  width: 100%;
  position: relative;
  cursor: grab;
}
.indexpage-container-active:active {
  cursor: grabbing;
}
.indexpage-container .affix-container-top {
  width: 100%;
  height: 80px;
  background-color: #fff;
  border-bottom: 1px solid #f5f5f5;
}
.indexpage-container-box-point {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.indexpage-container-box-point-item {
  position: absolute;
  cursor: pointer;
}
.scrollbar-flex-content {
  padding: 2px 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90px;
  height: 30px;
  margin: 10px 6px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  position: relative;
}
.scrollbar-demo-item {
  cursor: pointer;
  border: none;
}

:focus-visible {
  outline: none;
}
.indexpage-container-box {
  width: 100%;
  position: relative;
}
.indexpage-container-box-img {
  width: 100%;
  height: auto;
}
.indexpage-container-box-point-item-inner-popover-item {
  display: flex;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0d162a;
}
.line-box {
  position: absolute;
}
.indexpage-car-item {
  position: absolute;
  cursor: pointer;
}
.affix-container-left {
  position: fixed;
  bottom: 26px;
  z-index: 999;
  // overflow: hidden;
}
.affix-container-left-box {
  width: 144px;
  // height: 120px;
  // background: #ffffff;
}
.affix-container-left-box-item-box {
  width: 100%;
  border-bottom: 1px solid #eeeeee;
  background: #ffffff;
}
.affix-container-left-box-item {
  width: 100%;
  padding: 0 18px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.affix-container-left-box-item-left {
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.88);
}
.affix-container-left-box-item-img {
  cursor: pointer;
  flex-shrink: 0;
  width: 20px;
  height: 12px;
}
.affix-container-left-box-item-bottom {
  width: 100%;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #ffffff;
}
.affix-container-left-box-item-bottom-img {
  cursor: pointer;
  flex-shrink: 0;
  width: 12px;
  height: 7px;
}
.affix-container-left-box-item-bottom-left {
  cursor: pointer;
  flex-shrink: 0;
  font-family:
    PingFangSC,
    PingFang SC;
  font-weight: 400;
  font-size: 16px;
  color: #98a4bf;
  margin-right: 2px;
}
.affix-container-right {
  position: fixed;
  z-index: 999;
  right: 40px;
  bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.affix-container-right-item {
  width: 28px;
  height: 28px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: 8px;
}
</style>
