<template>
  <div>
    <div class="parent">
      <div class="mapParent">
        <div :id="defaultData.mapName" class="my-map"></div>
      </div>
      <div class="child">
        <div class="text-title">状态图示</div>
        <div>
          <div class="circle circle-green"></div>
          <div class="text-info text-info-green">正在使用岸电</div>
        </div>
        <div>
          <div class="circle circle-yellow"></div>
          <div class="text-info text-info-yellow">船方原因未使用岸电</div>
        </div>
        <div>
          <div class="circle circle-red"></div>
          <div class="text-info text-info-red">岸方原因未使用岸电</div>
        </div>
      </div>
<!--      <div class="child" v-if="showButton && usingData.status === 2">-->
<!--        <el-button class="text-title" style="width:100%;background-color: rgba(255, 255, 255, 0);text-align: center;border: none;" @click="updateStatus">确认该事件</el-button>-->
<!--      </div>-->
    </div>
  </div>
</template>

<script setup lang="ts">
import interface_red from '@/assets/svgs/svg/岸电箱-维护保养.png'
import interface_yellow from '@/assets/svgs/svg/用电接口-黄色.gif'
import interface_blue from '@/assets/svgs/svg/岸电箱-正常.png'
import interface_green from '@/assets/svgs/svg/用电接口-绿色.svg'
import ship_red from '@/assets/svgs/svg/船-红色.gif'
import ship_yellow from '@/assets/svgs/svg/船-黄色.svg'
import ship_blue from '@/assets/svgs/svg/船-蓝色.svg'
import ship_green from '@/assets/svgs/svg/船-绿色.png'
import ship_brown from '@/assets/svgs/svg/船-棕色.svg'
import ship_problem from '@/assets/svgs/svg/船-问号.gif'
import shorepower_blue from '@/assets/svgs/svg/配电室.png'
import shorepower_green from '@/assets/svgs/svg/岸电设施-绿色.svg'
import problem from '@/assets/svgs/svg/问号-棕色.svg'
import problem_red from '@/assets/svgs/svg/问号-红色.svg'

import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "leaflet-rotatedmarker";
import {MapApi} from "@/api/shorepower/map";
import baseInfo from "@/views/shorepower/map/baseMapInfo";

defineOptions({ name: 'PublicMapComponents' })


  // const getShorePowerEquipmentStr = (icon: any) => {
  //   return `<div class="table-message">
  //       <div class="table-name">${icon.info.name}</div>
  //       <div class="table-line"></div>
  //       <div class="base-table-info">
  //         <span class='table-info'>名称 ：${icon.info.name}</span></br>
  //         <span class='table-info'>容量：${icon.info.installedPower}</span></br>
  //         <span class='table-info'>电压 ：${icon.info.voltage}</span></br>
  //         <span class='table-info'>频率：${icon.info.frequency}</span></br>
  //         <span class='table-info'>接口数量 ：${icon.info.interfaceCount}</span></br>
  //         <span class='table-info'>同时可用数量：${icon.info.simultaneouslyInterfaceCount}</span></br>
  //       </div>
  //     </div>`
  // }
  // const getBerthStr = (icon: any) => {
  //   return `
  //       <div class="table-message">
  //         <div class="table-name">${icon.info.berthName}</div>
  //         <div class="table-line"></div>
  //         <div class="base-table-info">
  //           <span class='table-info'>泊位 ：${icon.info.berthName}</span></br>
  //           <span class='table-info'>总电量：${icon.info.totalPower}</span></br>
  //           <span class='table-info'>更新时间 ：${icon.info.updateTime}</span></br>
  //           <span class='table-info'>状态：${icon.info.status}</span></br>
  //           <span class='table-info'>接口规格 ：${icon.info.InterfaceType}</span></br>
  //           <span class='table-info'>泊位水深：${icon.info.berthDepth}</span></br>
  //         </div>
  //     </div>`
  // }
  // const getShipStr = (icon: any) => {
  //   return `
  //       <div class="table-message">
  //         <div class="table-name">${icon.info.shipName}</div>
  //         <div class="table-line"></div>
  //         <div class="base-table-info">
  //           <span class='table-info'>船名 ：${icon.info.shipName}</span></br>
  //           <span class='table-info'>呼号：${icon.info.callSign}</span></br>
  //           <span class="table-info">船公司:${icon.info.shipCompany}</span></br>
  //           <span class="table-info">联系电话:${icon.info.phone}</span></br>
  //           <span class='table-info'>长度 ：${icon.info.length}</span></br>
  //           <span class='table-info'>宽度：${icon.info.width}</span></br>
  //           <span class='table-info'>吨位 ：${icon.info.tonnage}</span></br>
  //           <span class='table-info'>类型：${icon.info.type}</span></br>
  //           <span class='table-info'>货物名称：${icon.info.CommodityName}</span></br>
  //           <span class='table-info'>货物吨数：${icon.info.cargoWeight}</span></br>
  //           ${icon.reason == 9 ? `<span class='table-info'>岸电接入时间：${icon.info.startUsingTime}</span></br>` : `<span class='table-info'>岸电未使用原因：${reason.value[icon.reason]}</span></br>`}
  //           <span class='table-info'>计划离泊时间：${icon.info.scheduledDepartureTime}</span></br>
  //           ${icon.reason == 9 ? `<span class='table-info'>岸电用量：${icon.info.shorePowerConsumption}</span></br>` : ''}
  //           <span class='table-info'>辅机总功率：${icon.info.totalAuxiliaryPower}</span></br>
  //         </div>
  //       </div>
  //   `
  // }
  // const getProblemStr = (icon: any) => {
  //   return `
  //     <div class="table-message">
  //         <div class="table-name">${icon.parent.info.shipName}</div>
  //         <div class="table-line"></div>
  //         <div class="base-table-info">
  //           <span class='table-info'>船名 ：${icon.parent.info.shipName}</span></br>
  //           <span class='table-info'>岸电未使用原因：${reason.value[icon.parent.reason]}</span></br>
  //           <span class='table-info'>计划离泊时间：${icon.parent.info.scheduledDepartureTime}</span></br>
  //         </div>
  //       </div>
  //   `
  // }

let mapNum = 1
const usingAlarm = ref([])
const removeAlarm = () => {
  for (let ships of usingAlarm.value) {
    for (const alarm of usingAlarm.value[ships]) {
      alarm.remove()
    }
    usingAlarm.value[ships] = []
  }
}
const buildAlarm = (icon:any, nowMapNum: number, radius: number = 1, timeOutTime: number = 50, color: string = Math.random() > 0.95 ? `rgba(255, 50, 50, 1)` :`rgba(50, 255, 20, 0.13)`) => {
  setTimeout(() => {
    if (nowMapNum !== mapNum) return
    if (_map.value.getZoom() <= 15) {
      const alarm = L.circle(icon.xy, {
        radius: 50 * radius,
        color: color,
        stroke: false,
        interactive: false,
      }).addTo(_map.value);
      if (!usingAlarm.value[icon.id]) usingAlarm.value[icon.id] = []
      usingAlarm.value[icon.id].push(alarm)
    }

    if (radius > (6 * 18 / _map.value.getZoom())) {
      for (let nowAlarm of usingAlarm.value[icon.id]) {
        nowAlarm.remove()
      }
      usingAlarm.value[icon.id] = []
      buildAlarm(icon, nowMapNum, 1, 50, color)
    } else (
      buildAlarm(icon, nowMapNum, radius + 1, timeOutTime + 2 ** radius / 2 , color)
    )
  }, timeOutTime)
}

const svgs = {
  interface_red: interface_red,
  interface_yellow: interface_yellow,
  interface_blue: interface_blue,
  interface_green: interface_green,
  ship_red: ship_red,
  ship_yellow: ship_yellow,
  ship_blue: ship_blue,
  ship_green: ship_green,
  ship_brown: ship_brown,
  ship_problem: ship_problem,
  shorepower_blue: shorepower_blue,
  shorepower_green: shorepower_green,
  problem: problem,
  problem_red: problem_red
}
// 计算图标尺寸【不同缩放比例下】
const countIconSize = (icon: any): [number, number] => {
  let zoomRatio = 2 ** (20 - _map.value.getZoom())
  return [icon.width * icon.ratio / zoomRatio, icon.height * icon.ratio / zoomRatio]
}
// 计算图标中心点【不同缩放比例下】
const countIconAnchor = (icon: any): [number, number] => {
  let zoomRatio = 2 ** (21 - _map.value.getZoom())
  return [icon.width * icon.ratio / zoomRatio, icon.height * icon.ratio / zoomRatio]
}
// 计算文本尺寸【不同缩放比例下】
const countFontSize = (text: any) => {
  return text.fontSize / (1.7 ** (20 - _map.value.getZoom())) * 10
}
// 构建绘制options
const buildOptions = (data: any) => {
  try {

    if ((data.type && data.type === 'gon') || (data.type && data.type === 'line') || (!data.type && (type.value == 'gon' || type.value == 'line'))) return data

    if ((data.type && data.type === 'icon') || (!data.type && type.value == 'icon')) {
      return {
        icon: L.icon({
          iconAnchor: countIconAnchor(data),
          iconSize: countIconSize(data),
          iconUrl: svgs[data.icon]
        }),
        rotationAngle: data.rotationAngle,
        rotationOrigin: "center center"
      }
    }
    if ((data.type && data.type === 'text') || (!data.type && type.value == 'text')) {
      const fontSize = countFontSize(data)
      let textWidth = fontSize * data.name.length
      for (let i = 0; i < data.name.length; i++) {
        if ((data.name[i]) in ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '#']) textWidth = textWidth - 0.5 * fontSize
      }
      textWidth = textWidth * 1.2
      const tagAnchor = data.tagAnchorType === 1 ? [0, 0] : data.tagAnchorType === 2 ? [textWidth, 0] : data.tagAnchorType === 3 ? [0, fontSize] : data.tagAnchorType === 4 ? [textWidth, fontSize] : [textWidth / 2, fontSize / 2]
      const style = `
        background-color:${data.background};border-radius: 5px;text-align: center;
        color: ${data.color};
        width: ${textWidth}px;
        font-size: ${fontSize}px;
        font-style: oblique;
        font-weight: ${data.fontSize * 33};
        cursor: grab;`
      return {
        icon: L.divIcon({
          className: data.name,
          iconAnchor: tagAnchor,
          html: `<div style="${style}">${data.name}</div>`
        })
      }
    }
  } catch (e) {
    console.log(e, data)
  }
}

const _map = ref<any>({_zoom: 14,_animateToCenter: {lat: 0, lng: 0}})
const mapRef = ref(null);
const defaultData = ref({
  defCenter: {lat: 38.8422480135733, lng: 118.4933866580094},
  defZoom: 12,
  mapName: 'map',
  illustration: true
})
const center = ref(defaultData.value.defCenter)
const zoom = ref(defaultData.value.defZoom)
const mouse = ref(defaultData.value.defCenter)
const type = ref('gon') // 1: 绘制区域 2: 绘制线 3: 绘制图标 4: 绘制文本

// 【区域】绘制参数
const polygon = ref({
  stroke: true,
  color:`rgb(50, 50, 50)`,
  weight:1,
  opacity:1,
  fill:true,
  fillColor:`rgb(255, 255, 200)`,
  fillOpacity:1,
  interactive:false,
  smoothFactor:1,
  xy:[]
})
const usingPolygon = ref()
const drawingPolygon = () => {
  if (usingPolygon.value) usingPolygon.value.remove()
  usingPolygon.value = L.polygon(polygon.value.xy, buildOptions(polygon.value)).addTo(_map.value)
  usingPolygon.value.on('click', () => {
    type.value = 'text'
  })
}

// 【线】绘制参数
const polyline = ref({
  interactive: false,
  color: `rgb(50, 50, 50)`,  // 描边颜色
  dashArray: [10, 5],
  weight: 1,// 描边宽度
  smoothFactor: 0,
  xy: [],
})
const usingPolyline = ref()
const drawingPolyline = () => {
  if (usingPolyline.value) usingPolyline.value.remove()
  usingPolyline.value = L.polyline(polyline.value.xy, buildOptions(polyline.value)).addTo(_map.value);
  usingPolygon.value.on('click', () => {
    type.value = 'text'
  })
}

// 【图标】绘制参数
const marker = ref({
  rotationAngle: 0,
  width: 1000,
  height: 5200,
  ratio: 1,
  iconType: 'ship',
  icon: 'ship_green',
  anchor: 'left',
  xy: [],
})
const usingMarker = ref()
const drawingMarker = () => {
  if (usingMarker.value) usingMarker.value.remove()
  if (marker.value.xy.length !== 2) return
  usingMarker.value = L.marker(marker.value.xy, buildOptions(marker.value)).addTo(_map.value);
  usingPolygon.value.on('click', () => {
    type.value = 'text'
  })
}

// 【文本】绘制参数
const textType = ref('ship')
const text = ref({
  name: '浙能2',
  xy: [38.94212905193746, 118.4492737054825],
  // type: 0,
  fontSize: 16,
  tagAnchorType: 1,
  background: 'rgba(255, 255, 255, 0.7)',
  color: 'rgba(50, 50, 50, 1)',
  anchor: 'left',
})
const usingText = ref()
const drawingText = () => {
  if (usingText.value) usingText.value.remove()
  if (text.value.xy.length !== 2) return
  usingText.value = L.marker(text.value.xy, buildOptions(text.value)).addTo(_map.value)
  usingPolygon.value.on('click', () => {
    type.value = 'text'
  })
}

const getDrawingInfo = () => {
  if (type.value === 'gon') {
    return {type: type.value, ...polygon.value}
  } else if (type.value === 'line') {
    return {type: type.value, ...polyline.value}
  } else if (type.value === 'icon') {
    return {type: type.value, ...marker.value}
  } else if (type.value === 'text') {
    if (textType.value !== 'ship') {
      const { anchor, ...textInfo} = text.value
      return {type: type.value, ...textInfo}
    } else {
      return {type: type.value, ...text.value}
    }
  }
}
const doCopy = async () => {
  const str = JSON.stringify(getDrawingInfo())
  try {
    // 尝试使用现代API
    await navigator.clipboard.writeText(str);
    // console.log('复制成功！',str);
    return
  } catch (err) {
    // 降级处理
    const textArea = document.createElement("textarea");
    textArea.value = str;
    textArea.style.cssText = "position: fixed; top: -1000px; opacity: 0;";
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      // console.log('复制成功！',str);
    } catch (err) {
      alert('复制失败，请手动复制')
      // console.log('复制失败，请手动复制');
    }
    document.body.removeChild(textArea);
  }
}
const copyData = async () => {
  await doCopy()
}
const addDrawingList = async (event) => {
  if (event.keyCode === 32 || event.key === ' ') {
    event.preventDefault();
    if (type.value === 'gon') {
      polygon.value.xy.push([mouse.value.lat, mouse.value.lng])
      drawingPolygon()
    } else if (type.value === 'line') {
      polyline.value.xy.push([mouse.value.lat, mouse.value.lng])
      drawingPolyline()
    } else if (type.value === 'icon') {
      marker.value.xy = [mouse.value.lat, mouse.value.lng]
      drawingMarker()
    } else if (type.value === 'text') {
      text.value.xy = [mouse.value.lat, mouse.value.lng]
      drawingText()
    }
  } else if (event.keyCode === 46 || event.key === 'Delete') {
    event.preventDefault();
    if (type.value === 'gon') {
      polygon.value.xy.pop()
      drawingPolygon()
    } else if (type.value === 'line') {
      polyline.value.xy.pop()
      drawingPolyline()
    } else if (type.value === 'icon') {
      marker.value.xy = []
      drawingMarker()
    } else if (type.value === 'text') {
      text.value.xy = []
      drawingText()
    }
  } else if (event.keyCode === 13 || event.key === 'Enter') {
    await copyData()
  }
}
const doDrawing = () => {
  if (type.value === 'gon') {
    drawingPolygon()
  } else if (type.value === 'line') {
    drawingPolyline()
  } else if (type.value === 'icon') {
    drawingMarker()
  } else if (type.value === 'text') {
    drawingText()
  }
}

const history = ref()
const usingHistory = ref([])
const doHistory = ref(false)
const removeHistory = () => {
  if (usingHistory.value) {
    for (const item of usingHistory.value) {
      item.remove()
    }
    usingHistory.value = []
  }
}
const drawingHistoryPolygon = (data: any) => {
  if (_map.value.getZoom() < 12) return
  const usingInfo = L.polygon(data.xy, buildOptions(data)).addTo(_map.value)
  usingInfo.on('click', async () => {
    if (doHistory.value) await drawingHistory(doHistory.value)
    doHistory.value = true
    polygon.value = data
    type.value = 'gon'
    usingInfo.remove()
    doDrawing()
  })
  usingHistory.value.push(usingInfo)
}
const drawingHistoryPolyline = (data: any) => {
  if (_map.value.getZoom() < 12) return
  const usingInfo = L.polyline(data.xy, buildOptions(data)).addTo(_map.value)
  usingInfo.on('click', async () => {
    if (doHistory.value) await drawingHistory(doHistory.value)
    doHistory.value = true
    polyline.value = data
    type.value = 'line'
    usingInfo.remove()
    doDrawing()
  })
  usingHistory.value.push(usingInfo)
}
const drawingHistoryMarker = (data: any) => {
  if (data.iconType === 'ship') {
    const nowMapNum = JSON.parse(JSON.stringify(mapNum))
    buildAlarm(data, nowMapNum)
  }
  if (_map.value.getZoom() < 12) return
  const usingInfo = L.marker(data.xy, buildOptions(data)).addTo(_map.value)
  usingInfo.on('click', async () => {
    if (doHistory.value) await drawingHistory(doHistory.value)
    doHistory.value = true
    marker.value = data
    type.value = 'icon'
    usingInfo.remove()
    doDrawing()
  })
  usingHistory.value.push(usingInfo)
}
const drawingHistoryTest = (data: any) => {
  if (_map.value.getZoom() < 12) return
  const usingInfo = L.marker(data.xy, buildOptions(data)).addTo(_map.value)
  usingInfo.on('click', async () => {
    if (doHistory.value) await drawingHistory(doHistory.value)
    doHistory.value = true
    text.value = data
    type.value = 'text'
    usingInfo.remove()
    doDrawing()
  })
  usingHistory.value.push(usingInfo)
}
const drawingHistoryInfo = (data: any) => {
  if (data.type === 'gon') {
    drawingHistoryPolygon(data)
  } else if (data.type === 'line') {
    drawingHistoryPolyline(data)
  } else if (data.type === 'icon') {
    drawingHistoryMarker(data)
  } else if (data.type === 'text') {
    drawingHistoryTest(data)
  }
}
const drawingHistory = async (justOne: boolean = false) => {
  // if (!history.value) {
  //   history.value = await MapApi.getAllData()
  // }
  const dataInfo = history.value ? history.value : await MapApi.getAllData()
  if (justOne) {
    drawingHistoryInfo(getDrawingInfo())
  } else {
    for (const item of dataInfo) {
      if (!item.data) continue
      const data = JSON.parse(item.data)
      if (!data.xy) continue
      drawingHistoryInfo(data)
    }
  }
}

const buildMap = () => {
  _map.value = L.map(defaultData.value.mapName, {
    center: defaultData.value.defCenter,
    zoom: defaultData.value.defZoom,
    zoomControl: false,
    attributionControl: false,
  })
  L.tileLayer(
    // 'http://150.138.79.224:8000/seamap/allmap/{z}/{y}/{x}.png',
    // 'https://api.shipxy.com/h5s/api/3.5/sample?key=0cd1a6224aaa4b5ab1f3d0e79bb543cc&projection_type=wm&x={x}&y={y}&z={z}',
    // 'https://m12.shipxy.com/tile.c?l=Na&m=o&x={x}&y={y}&z={z}',
    'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    // '',
    {
      maxZoom: 19,
      minZoom: 5,
      attribution: ''
    }).addTo(_map.value);

  // 设置地图的最大边界
  const southWest = L.latLng(38.30071455572194, 117.07885023513526); // 西南角的坐标
  const northEast = L.latLng(  40.32351403031131, 119.9161164758117); // 东北角的坐标
  _map.value.setMaxBounds(L.latLngBounds(southWest, northEast));


  // 监听鼠标位置坐标
  _map.value.on('mousemove', (e) => {
    mouse.value = e.latlng;
  });

  // 监听缩放级别变化
  _map.value.on('zoomend', async () => {
    zoom.value = _map.value.getZoom();
    removeHistory()
    removeAlarm()
    mapNum++
    await drawingHistory()
    doDrawing()
  })

  // 监听当前中心点坐标变化
  _map.value.on('moveend', () => {
    center.value = _map.value.getCenter();
  });
}
const buildBaseInfo = () => {
  for (const item of baseInfo) {
    if (item.xy) L.polygon(item.xy, item).addTo(_map.value)
  }
}

const exportImage = async () => {
  try {
    alert('功能暂不可用！')
  } catch (error) {
    console.error('地图导出失败:', error)
    alert('地图导出失败，请重试')
  }
}
/** 初始化 **/
onMounted(() => {
  buildMap()
  buildBaseInfo()
  window.addEventListener('keyup', addDrawingList)
  drawingHistory()
})


</script>

<style >
  .parent {
    position: relative; /* 启用Grid布局 */
  }

  .child {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 1;
    width: 200px;
    height: 150px;
    background-color: rgba(30, 30, 30, 0.7);
    border: 1px solid rgba(30, 30, 30, 0.4);
    border-radius: 15px;

  }
  .text-title {
    margin-top: 10px;
    font-size: 16px;
    color: rgba(20, 200, 255, 1);
    text-align: center;
    font-weight: bold;
    line-height: 30px;
    text-shadow: 0 0 5px rgba(0, 0, 0, 1), 0 0 6px rgba(20, 200, 255, 0.3), 0 0 7px rgba(20, 200, 255, 0.2), 0 0 8px rgba(20, 200, 255, 0.1);

  }
  .circle {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    margin-left: 15px;
    display: inline-block;
  }
  .circle-green {
    background-color: rgba(50, 255, 100, 1);
  }
  .circle-yellow {
    background-color: rgba(255, 150, 0, 1);
  }
  .circle-red {
    background-color: rgba(255, 70, 70, 1);
  }
  .text-info {
    margin-left: 8px;
    margin-top: 8px;
    display: inline-block;
  }
  .text-info-green {
    color: rgba(50, 255, 100, 1);
  }
  .text-info-yellow {
    color: rgba(255, 150, 0, 1);
  }
  .text-info-red {
    color: rgba(255, 70, 70, 1);
  }
  .mapParent {
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .my-map {
    height: 100vh;
    background-color: #A3CCFF;
    //transform: scale(1.4);
  }

  .table-message {
    width: 300px;
    margin-top: 10px;
  }

  .table-name {
    margin-top: 25px;
    font-size: 20px;
    color: rgb(0, 200, 255);
  }
  .table-line {
    min-height: 3px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: rgb(0, 200, 255);
  }
  .base-table-info {
  }
  .table-info {
    margin-top: 10px;
    font-size: 16px;
    line-height: 25px;
    color: rgba(50, 50, 50, 1);
  }


</style>
