<template>
  <div class="top-tool">
    <div class="top-tool-list">
      <div v-for="item in state.topToolList" :key="item.switchType" class="top-tool-item">
        <el-popover
          placement="bottom"
          :width="80"
          trigger="click"
          v-if="item.switchType === 'move' || item.switchType === 'revolve'"
          :disabled="currentItemIndex === -1"
        >
          <template #reference>
            <div
              class="tool-item"
              :class="
                toolbarSwitchType === item.switchType
                  ? 'tool-active'
                  : item.isActive
                    ? 'right-tool-active'
                    : ''
              "
              @click="toolbarClick(item)"
            >
              <Icon :icon="item.icon" :size="24" />
              <div class="name"> {{ item.name }} </div>
            </div>
          </template>
          <!-- 位置 -->
          <el-form :model="state.moveForm" v-if="item.switchType === 'move'">
            <el-form-item label="X">
              <el-input v-model="state.moveForm.locationX" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="Y">
              <el-input v-model="state.moveForm.y" placeholder="请输入" />
            </el-form-item>
            <div style="text-align: right">
              <el-button size="small" color="#00329F" @click="moveFormSubmit">确认</el-button>
            </div>
          </el-form>
          <!-- 旋转 -->
          <el-form :model="state.rotationForm" v-if="item.switchType === 'revolve'">
            <el-form-item label="角度">
              <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
            </el-form-item>
            <div style="text-align: right">
              <el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
            </div>
          </el-form>
          <!-- 字体 -->
          <el-form :model="state.rotationForm" v-if="item.switchType === 'text'">
            <el-form-item label="角度">
              <el-input v-model="state.rotationForm.angle" placeholder="请输入" />
            </el-form-item>
            <div style="text-align: right">
              <el-button size="small" color="#00329F" @click="rotationFormSubmit">确认</el-button>
            </div>
          </el-form>
        </el-popover>

        <div
          v-else
          class="tool-item"
          :class="
            toolbarSwitchType === item.switchType
              ? 'tool-active'
              : item.isActive
                ? 'right-tool-active'
                : ''
          "
          @click="toolbarClick(item)"
        >
          <Icon :icon="item.icon" :size="24" />
          <div class="name"> {{ item.name }} </div>
        </div>
        <!-- 分隔线 -->
        <div
          class="line"
          v-if="
            item.switchType === 'saveAs' ||
            item.switchType === 'delete' ||
            item.switchType === 'grid' ||
            (item.switchType === 'next' &&
              (toolbarSwitchType === 'lineLibrary' || toolbarSwitchType === 'region'))
          "
        ></div>
        <el-button
          v-if="
            item.switchType === 'next' &&
            (toolbarSwitchType === 'lineLibrary' || toolbarSwitchType === 'region')
          "
          type="danger"
          class="selection-area-btn"
          @click="clickDrawSelectionArea"
          >确定</el-button
        >
      </div>
    </div>
    <div class="right-tool-list" v-if="state.isShowToolbar">
      <div
        v-for="item in state.rightToolList"
        :key="item.switchType"
        class="tool-item"
        :class="
          toolbarSwitchType === item.switchType
            ? 'tool-active'
            : item.isActive
              ? 'right-tool-active'
              : ''
        "
        @click="toolbarClick(item)"
      >
        <Icon :icon="item.icon" :size="24" />
        <div class="name"> {{ item.name }} </div>
      </div>
    </div>
  </div>

  <div class="map-box" :style="{ cursor: state.cursorStyle }">
    <div
      class="map-box-inner"
      @mousedown.stop="startDrawSelection"
      @mousemove.stop="updateDrawSelection"
      @mouseup.stop="endDrawSelection"
    >
      <img
        :src="imgBgObj.imgUrl"
        :style="{
          width: Number(imgBgObj.width) * state.imageChangeMultiple + 'px',
          height: Number(imgBgObj.height) * state.imageChangeMultiple + 'px'
        }"
        id="mapBg"
      />
      <div
        ref="mapBackgroundRef"
        class="map-box-inner-dot"
        @click="mapClick"
        :class="state.isShowGrid ? 'grid-show' : ''"
        :style="{
          width: Number(imgBgObj.width) * state.imageChangeMultiple + 'px',
          height: Number(imgBgObj.height) * state.imageChangeMultiple + 'px'
        }"
        v-if="interfaceRefreshed"
      >
        <VueDragResizeRotate
          v-for="(item, index) in allHistoryList[currentIndex]"
          :key="item.locationX"
          :parent="true"
          :x="Number(item.locationX) * state.imageChangeMultiple"
          :y="Number(item.locationY) * state.imageChangeMultiple"
          :w="Number(item.locationWide) * state.imageChangeMultiple"
          :h="Number(item.locationDeep) * state.imageChangeMultiple"
          :r="item.angle"
          @rotatestop="(degree) => rotateEnd(degree, item, index)"
          @dragstop="(x, y) => dragEnd(x, y, item, index)"
          @resizestop="(x, y, width, height) => resizeEnd(x, y, width, height, item, index)"
          @activated="() => activatedHandle(item, index)"
          @deactivated="deactivatedHandle"
          :draggable="item.draggable"
          :resizable="item.resizable"
          :rotatable="item.rotatable"
          :lock-aspect-ratio="item.lockAspectRatio"
          style="border: none"
        >
          <!-- 1 路径点 -->
          <div
            v-if="item.type === 1 && item.layerSelectionShow"
            :style="{
              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
              border: ' 1px dashed #000',
              borderRadius: '50%',
              backgroundColor: '#000'
            }"
          >
          </div>
          <!-- 2 库位点 -->
          <img
            v-if="item.type === 2 && item.layerSelectionShow"
            src="https://api.znkjfw.com/admin-api/infra/file/4/get/库位库存_png_179_1739326653035.png"
            alt=""
            :style="{
              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
              border: currentItemIndex === index ? '1px dashed #000' : 'none'
            }"
          />
          <!-- 3 设备点 -->
          <img
            v-if="item.type === 3 && item.layerSelectionShow"
            src="https://api.znkjfw.com/admin-api/infra/file/4/get/设备点_png_179_1739327151877.png"
            alt=""
            :style="{
              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
              border: currentItemIndex === index ? '1px dashed #000' : 'none'
            }"
          />
          <!-- 4 停车点 -->
          <img
            v-if="item.type === 4 && item.layerSelectionShow"
            src="https://api.znkjfw.com/admin-api/infra/file/4/get/停车场-01_png_179_1739326933020.png"
            alt=""
            :style="{
              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
              border: currentItemIndex === index ? '1px dashed #000' : 'none'
            }"
          />
          <!-- 5 区域变更点 -->
          <img
            v-if="item.type === 5 && item.layerSelectionShow"
            src="https://api.znkjfw.com/admin-api/infra/file/4/get/区域_png_179_1739327151876.png"
            alt=""
            :style="{
              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
              border: currentItemIndex === index ? '1px dashed #000' : 'none'
            }"
          />
          <!-- 6 等待点 -->
          <img
            v-if="item.type === 6 && item.layerSelectionShow"
            src="https://api.znkjfw.com/admin-api/infra/file/4/get/等待点_png_179_1739326991439.png"
            alt=""
            :style="{
              width: Number(item.locationWide) * state.imageChangeMultiple + 'px',
              height: Number(item.locationDeep) * state.imageChangeMultiple + 'px',
              border: currentItemIndex === index ? '1px dashed #000' : 'none'
            }"
          />
          <div
            v-if="item.type === 7 && item.layerSelectionShow"
            :style="{
              color: item.fontColor,
              fontSize: item.fontSize + 'px',
              fontFamily: item.fontFamily,
              border: currentItemIndex === index ? '1px dashed #000' : 'none'
            }"
          >
            {{ item.text }}
          </div>
        </VueDragResizeRotate>
      </div>

      <!-- 框选区域 -->
      <div
        v-for="(box, index) in state.allDrawSelectionAreaBox"
        :key="index"
        :style="{
          position: 'absolute',
          left: `${box.x}px`,
          top: `${box.y}px`,
          width: `${box.width}px`,
          height: `${box.height}px`,
          border: '2px dashed #007bff',
          backgroundColor: 'rgba(0, 123, 255, 0.1)',
          zIndex: 999
        }"
      ></div>
      <!-- 当前框选区域 -->
      <div
        v-if="state.drawSelectionAreaShow"
        :style="{
          position: 'absolute',
          left: `${state.drawSelectionAreaBox.x}px`,
          top: `${state.drawSelectionAreaBox.y}px`,
          width: `${state.drawSelectionAreaBox.width}px`,
          height: `${state.drawSelectionAreaBox.height}px`,
          border: '2px dashed #007bff',
          backgroundColor: 'rgba(0, 123, 255, 0.1)',
          zIndex: 9999
        }"
      ></div>

      <!-- 测距 绘制点和连线 -->
      <template v-if="state.measureDistancesPoints.length > 0">
        <div
          v-for="(point, index) in state.measureDistancesPoints"
          :key="index"
          :style="{
            position: 'absolute',
            left: `${point.x}px`,
            top: `${point.y}px`,
            width: '10px',
            height: '10px',
            backgroundColor: '#00329F',
            borderRadius: '50%'
          }"
        ></div>
        <div
          v-if="state.measureDistancesPoints.length === 2"
          :style="{
            position: 'absolute',
            left: `${state.measureDistancesPoints[0].x + 5}px`,
            top: `${state.measureDistancesPoints[0].y + 5}px`,
            width: `${computedLineWidth}px`,
            height: '2px',
            backgroundColor: '#00329F',
            transform: `rotate(${computedLineAngle}deg)`,
            transformOrigin: '0 0',
            textAlign: 'center'
          }"
        >
          距离：{{ state.measureDistancesNum.toFixed(2) }}</div
        >
      </template>

      <!-- 文字输入区域 -->
      <input
        v-if="state.showInputBox"
        ref="inputBoxRef"
        v-model="state.inputBoxValue"
        @keyup.enter="handleInputEnd"
        @blur="handleInputEnd"
        :style="{
          fontSize: state.inputBoxStyle.fontSize + 'px',
          fontFamily: state.inputBoxStyle.fontFamily,
          color: state.inputBoxStyle.fontColor,
          left: state.inputBoxStyle.locationX + 'px',
          top: state.inputBoxStyle.locationY + 'px'
        }"
        :maxlength="30"
        class="input-box-class"
      />
    </div>
  </div>
  <!-- 节点编辑 -->
  <editNodeProperties
    ref="editNodePropertiesRef"
    :positionMapId="imgBgObj.positionMapId"
    @submitNodeSuccess="submitNodeSuccess"
  />
  <!-- 文字输入弹窗 -->
  <textFormToolDialog
    ref="textFormToolDialogRef"
    v-if="state.textFormToolShow"
    :inputBoxStyle="inputBoxStyle"
    @textFormSuccess="textFormSuccess"
  />
  <!-- 图层选择 -->
  <layerSelectionToolDialog
    v-if="state.isShowLayer"
    ref="layerSelectionToolDialogRef"
    @layerSelectionSuccess="layerSelectionSuccess"
  />
  <!-- 设备弹窗选择 -->
  <equipmentToolDialog ref="equipmentToolDialogRef" :positionMapId="imgBgObj.positionMapId" />
  <!-- 区域选择 -->
  <itemAreaSettingDialog ref="itemAreaSettingDialogRef" :positionMapId="imgBgObj.positionMapId" />
  <!-- 线库设置 -->
  <lineLibrarySettingDialog
    ref="lineLibrarySettingDialogRef"
    :positionMapId="imgBgObj.positionMapId"
  />
</template>

<script setup>
import JSONBigInt from 'json-bigint'
import { ref, defineComponent, reactive, nextTick, onMounted } from 'vue'
import editNodeProperties from '../realTimeMap/components-tool/editNodeProperties.vue'
import textFormToolDialog from '../realTimeMap/components-tool/textFormToolDialog.vue'
import equipmentToolDialog from '../realTimeMap/components-tool/equipmentToolDialog.vue'
import itemAreaSettingDialog from '../realTimeMap/components-tool/itemAreaSettingDialog.vue'
import lineLibrarySettingDialog from '../realTimeMap/components-tool/lineLibrarySettingDialog.vue'
import layerSelectionToolDialog from '../realTimeMap/components-tool/layerSelectionToolDialog.vue'

import * as MapApi from '@/api/map/map'
import cursorCollection from '../realTimeMap/cursorCollection'

defineOptions({ name: 'editMapPageRealTimeMap' })

const lineLibrarySettingDialogRef = ref() //线库设置
const itemAreaSettingDialogRef = ref() //物料区域设置
const equipmentToolDialogRef = ref() //设备弹窗
const textFormToolDialogRef = ref() //文字输入弹窗
const mapBackgroundRef = ref()
const inputBoxRef = ref() //文字输入框

const message = useMessage() // 消息弹窗
const formLoading = ref(false)

const allHistoryList = ref([]) //全部的历史记录
const currentIndex = ref(0) //用于记录是哪条历史记录的
const currentItemIndex = ref(-1) //用于记录是在编辑那个具体的节点、图标等
const allMapPointInfo = ref([]) //所有的图标的列表

// 缩放停止
const interfaceRefreshed = ref(true)
const resizeEnd = (x, y, w, h, item, index) => {
  interfaceRefreshed.value = false
  console.log('缩放', w, h)
  nextTick(() => {
    allMapPointInfo.value[index].locationX = x
    allMapPointInfo.value[index].locationY = y
    allMapPointInfo.value[index].locationWide = w
    allMapPointInfo.value[index].locationDeep = h
    addEditHistory()
  })
}
// 拖拽停止
const dragEnd = (x, y, item, index) => {
  console.log('拖拽')
  if (x === item.locationX && y === item.locationY) return
  allMapPointInfo.value[index].locationX = x
  allMapPointInfo.value[index].locationY = y
  addEditHistory()
}
// 旋转
const rotateEnd = (angle, item, index) => {
  console.log('旋转')
  allMapPointInfo.value[index].angle = angle
  addEditHistory()
}

//选中
const editNodePropertiesRef = ref()
const activatedHandle = (item, index) => {
  currentItemIndex.value = index

  //节点编辑
  if (toolbarSwitchType.value === 'editNode' && item.type !== 7) {
    editNodePropertiesRef.value.open(JSON.parse(JSON.stringify(item)))
  }
}
//非选中
const deactivatedHandle = () => {
  console.log('取消选中')
}

//添加历史记录
const addEditHistory = () => {
  //要判断是不是在最新的记录上修改 如果不是 要把currentIndex之后的记录都删掉 保持当前修改是最新的
  if (currentIndex.value !== allHistoryList.value.length - 1) {
    allHistoryList.value = allHistoryList.value.splice(0, currentIndex.value)
    currentIndex.value = allHistoryList.value.length
    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
  } else {
    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
    currentIndex.value++
  }
  interfaceRefreshed.value = true
  console.log(allHistoryList.value, 'allHistoryList')
}

//上一步
const backPreviousStep = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
    console.log('撤销', allHistoryList.value[currentIndex.value])
  } else {
    message.warning('没了老铁')
  }
}
//下一步
const backNextStep = () => {
  if (currentIndex.value < allHistoryList.value.length - 1) {
    currentIndex.value++
    allMapPointInfo.value = allHistoryList.value[currentIndex.value]
    console.log('重做', allHistoryList.value[currentIndex.value])
  } else {
    message.warning('没了老铁')
  }
}

//地图点击
const mapClick = (e) => {
  //节点
  if (toolbarSwitchType.value === 'drawNodes') {
    //绘制节点
    allMapPointInfo.value.push({
      positionMapId: imgBgObj.positionMapId, //地图的id
      layerSelectionShow: true,
      locationX: e.offsetX,
      locationY: e.offsetY,
      locationDeep: 16,
      locationWide: 16,
      angle: 0,
      draggable: false,
      resizable: false,
      rotatable: false,
      lockAspectRatio: false, //横纵比
      img: '',
      type: 1, //默认类型1 路径节点
      dataList: [], //存库位的
      dataObj: {} //存 设备点 停车点 文字
    })
    currentIndex.value++
    allHistoryList.value.push(JSON.parse(JSON.stringify(allMapPointInfo.value)))
  }
  //文字输入
  if (toolbarSwitchType.value === 'text') {
    state.showInputBox = true
    state.inputBoxStyle.locationX = e.offsetX
    state.inputBoxStyle.locationY = e.offsetY

    // 聚焦输入框
    setTimeout(() => {
      inputBoxRef.value.focus()
    }, 0)
  }
  //测距
  if (toolbarSwitchType.value === 'ranging') {
    measureDistancesClick(e)
  }
}
//输入文字样式改变
const textFormSuccess = (form) => {
  state.inputBoxStyle = {
    fontSize: `${form.fontSize}`,
    fontFamily: `${form.fontFamily}`,
    fontColor: `${form.fontColor}`
  }
}
//输入结束
const handleInputEnd = () => {
  if (state.inputBoxValue) {
    state.showInputBox = false
    allMapPointInfo.value.push({
      type: 7, //类型  7文字
      positionMapId: imgBgObj.positionMapId, //地图的id
      locationX: state.inputBoxStyle.locationX, //x
      locationY: state.inputBoxStyle.locationY, //y
      locationDeep: '', //h
      locationWide: '', //w
      angle: 0, //旋转角度
      draggable: true, //是否可以拖动
      resizable: false, //是否可以调整大小
      rotatable: false, //是否可以旋转
      lockAspectRatio: true, //是否锁定比例
      img: '', //图片
      text: state.inputBoxValue, //文字内容
      fontColor: state.inputBoxStyle.fontColor, //文字颜色
      fontFamily: state.inputBoxStyle.fontFamily, //字体类型
      fontSize: state.inputBoxStyle.fontSize,
      dataObj: {}, //存 设备点 停车点 文字
      layerSelectionShow: true
    })
    addEditHistory()
    state.inputBoxValue = ''
  }
}
//编辑节点成功
const submitNodeSuccess = (item) => {
  allMapPointInfo.value[currentItemIndex.value] = item
  allHistoryList.value[currentIndex.value][currentItemIndex.value] = item
}

//工具栏点击
const toolbarSwitchType = ref('')
const state = reactive({
  topToolList: [
    {
      switchType: 'open',
      name: '打开',
      icon: 'ep:folder-add',
      isActive: false
    },
    {
      switchType: 'save',
      name: '保存',
      icon: 'ep:folder-checked',
      isActive: false
    },
    {
      switchType: 'saveAs',
      name: '另存为',
      icon: 'ep:folder-opened',
      isActive: false
    },
    {
      switchType: 'choose',
      name: '选择',
      icon: 'ep:position',
      isActive: false
    },
    {
      switchType: 'move',
      name: '移动',
      icon: 'ep:rank',
      isActive: false
    },
    {
      switchType: 'revolve',
      name: '旋转',
      icon: 'ep:refresh-right',
      isActive: false
    },
    {
      switchType: 'copy',
      name: '复制',
      icon: 'ep:document',
      isActive: false
    },
    {
      switchType: 'paste',
      name: '粘贴',
      icon: 'ep:copy-document',
      isActive: false
    },
    {
      switchType: 'delete',
      name: '删除',
      icon: 'ep:delete',
      isActive: false
    },
    {
      switchType: 'tools',
      name: '工具',
      icon: 'ep:briefcase',
      isActive: true
    },
    {
      switchType: 'lineLibrary',
      name: '线库',
      icon: 'ep:message-box',
      isActive: false
    },
    {
      switchType: 'region',
      name: '区域',
      icon: 'ep:full-screen',
      isActive: false
    },
    {
      switchType: 'text',
      name: '文字',
      icon: 'ep:edit-pen',
      isActive: false
    },
    {
      switchType: 'equipment',
      name: '设备',
      icon: 'ep:video-camera-filled',
      isActive: false
    },
    {
      switchType: 'ranging',
      name: '测距',
      icon: 'ep:folder-add',
      isActive: false
    },
    {
      switchType: 'layer',
      name: '图层',
      icon: 'ep:copy-document',
      isActive: false
    },
    {
      switchType: 'marker',
      name: '标记',
      icon: 'ep:map-location',
      isActive: false
    },
    {
      switchType: 'grid',
      name: '网格',
      icon: 'ep:grid',
      isActive: true
    },
    {
      switchType: 'larger',
      name: '放大',
      icon: 'ep:zoom-in',
      isActive: false
    },
    {
      switchType: 'smaller',
      name: '缩小',
      icon: 'ep:zoom-out',
      isActive: false
    },
    {
      switchType: 'withdraw',
      name: '撤回',
      icon: 'ep:top-left',
      isActive: false
    },
    {
      switchType: 'next',
      name: '重做',
      icon: 'ep:top-right',
      isActive: false
    }
  ],
  rightToolList: [
    {
      switchType: 'drawNodes',
      name: '绘制节点',
      icon: 'ep:circle-plus-filled',
      isActive: false
    },
    {
      switchType: 'editNode',
      name: '编辑节点',
      icon: 'ep:circle-plus-filled',
      isActive: false
    },
    {
      switchType: 'drawRoute',
      name: '绘制路线',
      icon: 'ep:semi-select',
      isActive: false
    },
    {
      switchType: 'editRoute',
      name: '编辑路线',
      icon: 'ep:semi-select',
      isActive: false
    }
  ],
  isShowToolbar: true, //工具栏展示隐藏
  isShowGrid: true, //网格展示隐藏
  moveForm: {
    locationX: '',
    locationY: ''
  }, //移动的表单
  rotationForm: {
    angle: ''
  }, //旋转的表单
  copyMapItem: '', //复制的值
  cursorStyle: 'auto',
  drawSelectionAreaShow: false, //绘制框选区域
  allDrawSelectionAreaBox: [], // 所有框选区域
  drawSelectionAreaBox: { x: 0, y: 0, width: 0, height: 0 }, //绘制区域的位置，长宽
  drawSelectionStartPoint: { x: 0, y: 0 }, //开始绘制的点位
  drawSelectionPointList: [], //绘制选中的list
  textFormToolShow: false, //文字表单显示隐藏
  showInputBox: false, //输入框显示隐藏
  inputBoxStyle: {
    fontFamily: 'SimSun',
    fontSize: '14',
    fontColor: '#000000',
    locationX: 0,
    locationY: 0
  }, //输入框的样式
  inputBoxValue: '', //输入的值
  isShowLayer: false, //图层显示
  measureDistancesPoints: [], // 存储点击的点位
  measureDistancesNum: 0, // 存储两点之间的距离
  imageChangeMultiple: 1 //图片放大缩小的倍数
})
const toolbarClick = (item) => {
  let type = item.switchType
  if (
    currentItemIndex.value === -1 &&
    (type === 'move' || type === 'revolve' || type === 'copy' || type === 'delete')
  ) {
    message.warning('请先选择要操作的对象')
    return
  }
  //粘贴
  if (type === 'paste' && !state.copyMapItem) {
    message.warning('请先复制对象')
    return
  }

  if (
    (type === 'tools' || type === 'text' || type === 'layer' || type === 'grid') &&
    toolbarSwitchType.value === type
  ) {
    toolbarSwitchType.value = ''
  } else {
    toolbarSwitchType.value = type
  }

  if (toolbarSwitchType.value !== 'text') {
    state.cursorStyle = `auto`
    state.textFormToolShow = false
    state.showInputBox = false
    state.inputBoxValue = ''
  }

  //工具切换 不适用框选的 要把框选的信息都删掉
  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') {
    state.drawSelectionAreaShow = false
    state.allDrawSelectionAreaBox = []
    state.drawSelectionPointList = []
  }
  //非测距
  if (toolbarSwitchType.value !== 'ranging') {
    state.measureDistancesPoints = [] // 清空存储点击的点位
    state.measureDistancesNum = 0 // 清空存储两点之间的距离
  }

  switch (type) {
    case 'open':
      // 打开
      break
    case 'save':
      //保存
      saveMap()
      break
    case 'saveAs':
      //另存为 存为json文件 无法直接访问用户的文件系统 不能选择存在那个文件夹里面
      const jsonString = JSON.stringify(allHistoryList.value[currentIndex.value], null, 2)
      const blob = new Blob([jsonString], { type: 'application/json' })
      const url = URL.createObjectURL(blob)

      const a = document.createElement('a')
      a.href = url
      a.download = 'mapJson.json'
      document.body.appendChild(a)
      a.click()
      document.body.removeChild(a)
      URL.revokeObjectURL(url)

      message.success('下载成功')
      break
    case 'choose':
      //选择
      break
    case 'move':
      //移动
      break
    case 'revolve':
      break
    case 'copy':
      //复制
      let copyMapItem = allHistoryList.value[currentIndex.value][currentItemIndex.value]
      state.copyMapItem = {
        positionMapId: copyMapItem.positionMapId,
        locationX: copyMapItem.locationX,
        locationY: copyMapItem.locationY,
        type: copyMapItem.type,
        dataJson: copyMapItem.dataJson || '',
        dataObj: copyMapItem.dataObj || {},
        dataList: copyMapItem.dataList || [],
        locationDeep: copyMapItem.locationDeep,
        locationWide: copyMapItem.locationWide,
        draggable: copyMapItem.draggable,
        resizable: copyMapItem.resizable,
        rotatable: copyMapItem.rotatable,
        lockAspectRatio: copyMapItem.lockAspectRatio
      }
      message.success('复制成功')
      break
    case 'paste':
      //粘贴
      let copyObj = JSON.parse(JSON.stringify(state.copyMapItem))
      copyObj.locationX = Number(copyObj.locationX) + 50
      copyObj.locationY = Number(copyObj.locationY) + 50
      allMapPointInfo.value.push(copyObj)
      addEditHistory()
      break
    case 'delete':
      //删除
      allMapPointInfo.value.splice(currentItemIndex.value, 1)
      addEditHistory()
      break
    case 'tools':
      //工具
      if (toolbarSwitchType.value === 'tools') {
        state.isShowToolbar = true
        item.isActive = true
      } else {
        state.isShowToolbar = false
        item.isActive = false
      }
      break
    case 'lineLibrary':
      // 线库
      break
    case 'region':
      // 区域
      break
    case 'text':
      //文字
      if (toolbarSwitchType.value === 'text') {
        state.textFormToolShow = true
        state.cursorStyle = `url('${cursorCollection.input}'),auto`
      } else {
        state.cursorStyle = `auto`
        state.textFormToolShow = false
        state.showInputBox = false
        state.inputBoxValue = ''
      }
      break
    case 'ranging':
      // 测距
      break
    case 'layer':
      //图层
      if (toolbarSwitchType.value === 'layer') {
        state.isShowLayer = true
        item.isActive = true
      } else {
        state.isShowLayer = false
        item.isActive = false
      }
      break
    case 'marker':
      // 标记
      break
    case 'grid':
      //网格
      if (toolbarSwitchType.value === 'grid') {
        state.isShowGrid = true
        item.isActive = true
      } else {
        state.isShowGrid = false
        item.isActive = false
      }
      break
    case 'larger':
      //放大
      if (imgBgObj.width < 10000) {
        state.imageChangeMultiple *= 1.2
      } else {
        message.warning('不能在放大了')
      }
      break
    case 'smaller':
      //缩小
      if (imgBgObj.width > 500) {
        state.imageChangeMultiple *= 0.8
      } else {
        message.warning('不能在缩小了')
      }
      break
    case 'withdraw':
      //上一步
      backPreviousStep()
      break
    case 'next':
      //下一步
      backNextStep()
      break
    case 'drawNodes':
      //绘制节点
      break
    case 'editNode':
      // 编辑节点
      break
    case 'drawRoute':
      //绘制路线
      break
    case 'editRoute':
      // 编辑路线
      break
    case 'equipment':
      // 设备
      equipmentToolDialogRef.value.open()
      break
  }
}

//移动工具表单提交
const moveFormSubmit = () => {
  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationX =
    state.moveForm.locationX
  allHistoryList.value[currentIndex.value][currentItemIndex.value].locationY =
    state.moveForm.locationY
}
//旋转工具表单提交
const rotationFormSubmit = () => {
  allHistoryList.value[currentIndex.value][currentItemIndex.value].angle = state.rotationForm.angle
}

//开始框选绘制
const startDrawSelection = (event) => {
  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return

  const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()

  const x = Number(event.clientX) - backgroundRect.left
  const y = event.clientY - backgroundRect.top

  // 确保点击在背景区域内
  if (x >= 0 && x <= backgroundRect.width && y >= 0 && y <= backgroundRect.height) {
    state.drawSelectionAreaShow = true
    state.drawSelectionStartPoint = { x: x, y: y }
    state.drawSelectionAreaBox = { x: x, y: y, width: 0, height: 0 }
  }

  // 阻止默认行为（避免选中图片或文本）
  event.preventDefault()
}
// 更新框选区域
const updateDrawSelection = (event) => {
  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
  if (state.drawSelectionAreaShow) {
    const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
    const x = event.clientX - backgroundRect.left
    const y = event.clientY - backgroundRect.top

    state.drawSelectionAreaBox.width = Number(x) - Number(state.drawSelectionStartPoint.x)
    state.drawSelectionAreaBox.height = Number(y) - Number(state.drawSelectionStartPoint.y)
  }
  // 阻止默认行为（避免选中图片或文本）
  event.preventDefault()
}
//结束框选绘制
const endDrawSelection = () => {
  if (toolbarSwitchType.value !== 'lineLibrary' && toolbarSwitchType.value !== 'region') return
  state.drawSelectionAreaShow = false
  state.allDrawSelectionAreaBox.push({ ...state.drawSelectionAreaBox })
  state.drawSelectionAreaBox = { x: 0, y: 0, width: 0, height: 0 }
}
//点击区域
const clickDrawSelectionArea = () => {
  let points = allHistoryList.value[currentIndex.value]

  state.drawSelectionPointList = []
  state.allDrawSelectionAreaBox.forEach((box) => {
    points.forEach((point) => {
      if (
        point.locationX >= box.x &&
        point.locationX <= box.x + box.width &&
        point.locationY >= box.y &&
        point.locationY <= box.y + box.height
      ) {
        state.drawSelectionPointList.push(point)
      }
    })
  })

  console.log(state.drawSelectionPointList, '选中的')

  // 清空框选区域
  state.allDrawSelectionAreaBox = []
  //只要库位的
  let binLocation = state.drawSelectionPointList.filter((item) => item.type === 2)

  if (toolbarSwitchType.value === 'lineLibrary') {
    //线库
    if (binLocation.length < 2) {
      message.warning('至少选择两个库位')
      return
    }
    if (!isStraightLine(binLocation)) {
      message.warning('您选择的库位不在一条直线上')
      return
    }
    lineLibrarySettingDialogRef.value.open(binLocation)
  }
  if (toolbarSwitchType.value === 'region') {
    //区域
    if (binLocation.length < 1) {
      message.warning('至少选择两个库位')
    } else {
      itemAreaSettingDialogRef.value.open(binLocation)
    }
  }
}
//计算是不是在同一条直线的
const isStraightLine = (binLocation) => {
  if (binLocation.length <= 2) {
    return true // 两个点一定在一条直线上
  }

  const firstPoint = binLocation[0]
  const secondPoint = binLocation[1]

  // 检查是否垂直直线（所有 x 相同）
  const isVertical = binLocation.every(
    (point) => Number(point.locationX) === Number(firstPoint.locationX)
  )
  if (isVertical) {
    return true
  }

  // 检查是否水平直线（所有 y 相同）
  const isHorizontal = binLocation.every(
    (point) => Number(point.locationY) === Number(firstPoint.locationY)
  )
  if (isHorizontal) {
    return true
  }

  // 计算斜率
  const slope =
    Number(secondPoint.locationY) -
    Number(firstPoint.locationY) / (Number(secondPoint.locationX) - Number(firstPoint.locationX))

  // 检查所有点是否在同一条斜线上
  return binLocation.every((point) => {
    const currentSlope =
      (Number(point.locationY) - Number(firstPoint.locationY)) /
      (Number(point.locationX) - Number(firstPoint.locationX))
    return Math.abs(currentSlope - slope) < Number.EPSILON // 处理浮点数精度问题
  })
}

//测距相关
// 计算两点之间的距离
const calculateDistance = (point1, point2) => {
  const dx = point2.x - point1.x
  const dy = point2.y - point1.y
  return Math.sqrt(dx * dx + dy * dy)
}

// 计算连线的角度
const computedLineAngle = computed(() => {
  if (state.measureDistancesPoints.length === 2) {
    const dx = state.measureDistancesPoints[1].x - state.measureDistancesPoints[0].x
    const dy = state.measureDistancesPoints[1].y - state.measureDistancesPoints[0].y
    return Math.atan2(dy, dx) * (180 / Math.PI)
  }
  return 0
})

// 计算连线的长度
const computedLineWidth = computed(() => {
  if (state.measureDistancesPoints.length === 2) {
    return calculateDistance(state.measureDistancesPoints[0], state.measureDistancesPoints[1])
  }
  return 0
})

// 处理点击事件
const measureDistancesClick = (event) => {
  // 获取点击点相对于整个页面的坐标
  const x = event.clientX
  const y = event.clientY

  // 检查点击是否发生在背景区域内
  const backgroundRect = mapBackgroundRef.value.getBoundingClientRect()
  if (
    x >= backgroundRect.left &&
    x <= backgroundRect.right &&
    y >= backgroundRect.top &&
    y <= backgroundRect.bottom
  ) {
    if (state.measureDistancesPoints.length === 2) {
      // 如果已经有两个点，清空信息
      state.measureDistancesPoints = []
      state.measureDistancesNum = null
    } else {
      // 记录点击的点位（相对于背景区域的坐标）
      const offsetX = x - backgroundRect.left
      const offsetY = y - backgroundRect.top
      state.measureDistancesPoints.push({ x: offsetX, y: offsetY })
      if (state.measureDistancesPoints.length === 2) {
        // 计算两点之间的距离
        state.measureDistancesNum = calculateDistance(
          state.measureDistancesPoints[0],
          state.measureDistancesPoints[1]
        )
      }
    }
  }
}

//获取扫描图  地图背景相关的信息
const imgBgObj = reactive({
  imgUrl: '',
  positionMapId: '',
  width: '',
  height: '',
  floor: '',
  area: ''
})
//接收参数
const { query } = useRoute() // 查询参数
//获取地图点位
const getMapList = async () => {
  if (query.mapId) {
    imgBgObj.positionMapId = query.mapId
    imgBgObj.floor = query.floor
    imgBgObj.area = query.area
    //调转换成png的接口
    getMapData(imgBgObj)
  }
}
//调转换成png的接口
const getMapData = async (mapInfo) => {
  let data = await MapApi.getPositionMapdDwnloadPngBase64({
    floor: mapInfo.floor,
    area: mapInfo.area
  })
  imgBgObj.imgUrl = data

  //获取一下图片的宽高
  const img = new Image()
  img.src = imgBgObj.imgUrl
  //加载图片成功
  img.onload = () => {
    imgBgObj.width = img.naturalWidth
    imgBgObj.height = img.naturalHeight
    getAllNodeList()
  }
  //加载图片失败
  img.onerror = () => {
    console.error('图片加载失败')
  }
}
//获取所有的点位 处理七种类型的
const getAllNodeList = async () => {
  let list = await MapApi.getPositionMapItemList({
    positionMapId: imgBgObj.positionMapId
  })
  list.forEach((item) => {
    item.layerSelectionShow = true //用于图层
    item.locationX = Number(item.locationX)
    item.locationY = Number(item.locationY)

    if (item.type === 1 || item.type === 5 || item.type === 6) {
      item.dataObj = {}
      item.dataList = []
      item.locationDeep = 16
      item.locationWide = 16
      item.draggable = false
      item.resizable = false
      item.rotatable = false
      item.lockAspectRatio = true
    } 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
      item.draggable = true
      item.resizable = false
      item.rotatable = false
      item.lockAspectRatio = true
    } else if (item.type === 3 || item.type === 4) {
      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.dataList = []
      item.locationDeep = item.dataObj.locationDeep
      item.locationWide = item.dataObj.locationWide
      item.draggable = true
      item.resizable = false
      item.rotatable = false
      item.lockAspectRatio = true
    } else if (item.type === 7) {
      item.dataObj = JSONBigInt({ storeAsString: true }).parse(item.dataJson)
      item.text = item.dataObj.text
      item.fontColor = item.dataObj.fontColor
      item.fontFamily = item.dataObj.fontFamily
      item.fontSize = item.dataObj.fontSize
      item.angle = item.dataObj.angle
      item.draggable = true
      item.resizable = false
      item.rotatable = true
      item.lockAspectRatio = true
    }
    allMapPointInfo.value.push(item)
  })
  allHistoryList.value[0] = JSON.parse(JSON.stringify(allMapPointInfo.value))
}

//保存地图按钮
const saveMap = async () => {
  //节点的保存
  await saveNodeList()
  //路线的保存
}
//节点的保存
const saveNodeList = async () => {
  formLoading.value = true
  let list = allHistoryList.value[currentIndex.value]

  list.forEach((item) => {
    if (item.type === 7) {
      item.dataObj.positionMapId = imgBgObj.positionMapId
      item.dataObj.text = item.text
      item.dataObj.fontColor = item.fontColor
      item.dataObj.fontType = item.fontType
      item.dataObj.fontFamily = item.fontFamily
      item.dataObj.rotatable = item.rotatable
      item.dataObj.angle = item.angle
      //dataJson数据
      item.dataJson = JSON.stringify(item.dataObj)
    }
  })

  try {
    await MapApi.batchSaveOrEditOrDelMapItem(imgBgObj.positionMapId, list)
    message.success('创建成功')
  } finally {
    formLoading.value = false
  }
}

//筛选图层
const layerSelectionSuccess = (typeList) => {
  allHistoryList.value[currentIndex.value].forEach((item) => {
    // 如果 type 存在于第一个数组中，则将 layerSelectionShow 设置为 false
    if (typeList.includes(item.type)) {
      item.layerSelectionShow = false
    } else {
      item.layerSelectionShow = true
    }
  })
}

onMounted(() => {
  getMapList()
})
</script>

<style lang="scss" scoped>
.map-box {
  width: 100%;
  position: relative;

  .map-box-inner {
    position: relative;
    width: 100%;

    .map-box-inner-dot {
      position: absolute;
      top: 0;
      left: 0;
    }

    .grid-show {
      background: linear-gradient(-90deg, rgba(0, 0, 0, 0.1) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 0.1) 1px, transparent 1px);
      background-size:
        10px 10px,
        10px 10px;
    }
  }
}

.top-tool {
  .top-tool-list {
    display: flex;
    align-items: center;
    text-align: center;
    background-color: #fff;
    margin-top: -15px;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 12px;
    margin-bottom: 20px;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    height: 70px;

    .top-tool-item {
      display: flex;
      align-items: center;

      .tool-item {
        cursor: pointer;
        width: 49px;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .name {
          cursor: pointer;
          font-family:
            PingFangSC,
            PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: #0d162a;
          line-height: 20px;
          text-align: center;
          font-style: normal;
        }
      }
      .line {
        margin: 0 12px;
        width: 1px;
        height: 47px;
        border: 1px solid #cccccc;
      }
    }
  }

  .right-tool-list {
    position: absolute;
    right: 0;
    top: 94px;
    background-color: #fff;
    z-index: 999;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;

    .tool-item {
      cursor: pointer;
      padding: 10px;
      .name {
        font-family:
          PingFangSC,
          PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #0d162a;
        line-height: 20px;
        text-align: center;
        font-style: normal;
      }
    }
  }

  .tool-active {
    background: #ebf1ff;
    border-bottom: 2px solid #1677ff;
  }

  .right-tool-active {
    background: #ebf1ff;
  }
}

.input-box-class {
  position: absolute;
  border: 1px solid #00329f;
  padding: 4px;
  outline: none;
}

.selection-area-btn {
  width: 80px;
  margin-left: 4px;
}
</style>
