import * as Cesium from 'cesium'
import { analyzeKmzFile, getKmlParams } from '/@/utils/cesium/kmz'
import { getPolylineLength, createTriangleMarker } from '/@/utils/cesium/mapUtils'
import ImageTrailMaterial from '/@/utils/cesium/ImageTrailMaterial'
import { ref } from 'vue'
import { cesiumOperation } from '/@/hooks/use-cesium-tsa'
const { addPolyline, getEntityById } = cesiumOperation()

const getResource = (name: string) => {
  return new URL(`/src/assets/icons/${name}`, import.meta.url).href
}

interface waylineDetails {
  title: string
  value: number | string
}
interface eventParmas {
  key: string
  name: string
  distinguish?: string
  icon?: string
}
interface tragetPoint {
  position: Cesium.Cartesian3
  eventList: eventParmas[]
}

// 对应事件
const eventList = [
  {
    key: 'takePhoto',
    name: '单拍',
    icon: getResource('waylinetool/camera.png'),
  },
  {
    key: 'startRecord',
    name: '开始录像',
    icon: getResource('waylinetool/camera-on.png'),
  },
  {
    key: 'stopRecord',
    name: '结束录像',
    icon: getResource('waylinetool/camera-off.png'),
  },
  {
    key: 'time',
    name: '开始等时间隔拍照',
    icon: getResource('waylinetool/shoot1.png'),
  },
  {
    key: 'distance',
    name: '开始等距间隔拍照',
    icon: getResource('waylinetool/shoot2.png'),
  },
  {
    key: 'zoom',
    name: '变焦',
    icon: getResource('waylinetool/fd.png'),
  },
  {
    key: 'customDirName',
    name: '创建新文件夹',
    icon: getResource('waylinetool/create-file.png'),
  },
  {
    key: 'gimbalRotate',
    distinguish: 'Yaw',
    name: '云台俯仰角',
    icon: getResource('waylinetool/holderyaw.png'),
  },
  {
    key: 'gimbalYawRotate',
    name: '云台偏航角',
    distinguish: 'pitch',
    icon: getResource('waylinetool/holdertilt.png'),
  },
  {
    key: 'rotateYaw',
    name: '飞行器偏航',
    icon: getResource('waylinetool/droneyaw.png'),
  },
  {
    key: 'hover',
    name: '悬停等待',
    icon: getResource('waylinetool/xt.png'),
  },
]

const useMapDraw = (
  dataSource: Cesium.DataSource | any,
  entitiesList: Cesium.Entity[] | any,
  fileUrl: string | any,
  global: any,
) => {
  const ellipsoid = global.$viewer.scene.globe.ellipsoid
  const waylinePointsEvent = ref<tragetPoint[]>([])
  // 路线详情
  const waylineDetails = reactive<waylineDetails[]>([
    {
      title: '航线长度',
      value: '0',
    },
    {
      title: '预计执行时间',
      value: '0',
    },
    {
      title: '航点',
      value: 0,
    },
    {
      title: '照片',
      value: 0,
    },
  ])
  // kml中的全部实体
  const kmlEntities = ref<Cesium.Entity[]>([])
  //   kml文件中点位string
  let kmlPoints: string[] | any = []
  //   记录点位信息
  const cartesianArr: Cesium.Cartesian3[] = []

  //   绘制路线
  const drawWayline = async () => {
    dataSource.show = false
    let kmlEntityArr = [...entitiesList]
    if (dataSource) {
      kmlEntityArr = dataSource.entities.values[0]._children
      kmlEntities.value = kmlEntityArr
    }
    // 获取所有点位
    const kmlRes = await analyzeKmzFile(fileUrl)
    // 所有航点
    kmlPoints = getKmlParams(kmlRes, false, {
      name: 'Placemark',
      findRegx: '([\\s\\S]*?)',
      mode: 'g',
    })
    // 起飞点
    let btmStartPoint = null
    // 修改点位样式
    for (let i = 0; i < kmlEntityArr.length; i++) {
      const entity: any = kmlEntityArr[i]
      // 将cartographic3D坐标转换为正常坐标
      const c3Position = entity.position._value
      const c2Postion = ellipsoid.cartesianToCartographic(c3Position)
      const longitude = Cesium.Math.toDegrees(c2Postion.longitude)
      const latitude = Cesium.Math.toDegrees(c2Postion.latitude)
      // 获取当前航点中的值
      const point = kmlPoints[i]
      const getPointHeight: any = getKmlParams(point, true, {
        name: 'ellipsoidHeight',
        findRegx: '([\\s\\S]*?)',
      })
      const getHaeHeight: any = getKmlParams(point, true, {
        name: 'height',
        findRegx: '([\\s\\S]*?)',
      })
      const AslHeight = Number(getPointHeight[1])
      const HeaHeight = Number(getHaeHeight[1])
      entity.position = Cesium.Cartesian3.fromDegrees(
        longitude,
        latitude,
        AslHeight,
      )
      if (i === 0) {
        btmStartPoint = Cesium.Cartesian3.fromDegrees(longitude, latitude, 0)
      }
      // 创建广告牌信息
      const title = Number(i + 1) === 1 ? 'S' : i
      const billboard = createTriangleMarker(title, '#61d396')
      // 修改id
      entity._id = 'tragetPoint' + i
      // 修改广告牌样式
      entity.billboard = new Cesium.BillboardGraphics({
        image: billboard,
        pixelOffset: new Cesium.Cartesian2(0, -20),
      })
      entity.label = new Cesium.LabelGraphics({
        text: `ASL：${Math.round(AslHeight)}m\nHAE：${Math.round(HeaHeight)}m`,
        font: '13px monospace',
        showBackground: true,
        horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        disableDepthTestDistance: Number.POSITIVE_INFINITY,
        pixelOffset: new Cesium.Cartesian2(0, -40),
      })
      // 修改点的信息
      entity.point = new Cesium.PointGraphics({
        pixelSize: 20,
        color: Cesium.Color.GHOSTWHITE,
        outlineColor: Cesium.Color.BLACK,
      })
      // 创建虚线
      addPolyline({
        id: 'dashLine' + i,
        polyline: {
          positions: Cesium.Cartesian3.fromDegreesArrayHeights([
            longitude,
            latitude,
            AslHeight,
            longitude,
            latitude,
            0,
          ]),
          width: 1,
          material: new Cesium.PolylineDashMaterialProperty({
            color: Cesium.Color.WHITE,
          }),
        },
      })
      cartesianArr.push(entity.position._value)
      // 当前航线点位事件信息等
      waylinePointsEvent.value.push({
        position: entity.position._value,
        eventList: [],
      })
    }
    // 创建起飞位置
    global.$viewer.entities.add({
      id: 'dronePosition',
      position: btmStartPoint,
      billboard: {
        image: getResource('dock.png'),
        width: 36,
        height: 36,
      },
    })
    // 绘制链接线
    addPolyline({
      id: 'entityLine',
      polyline: {
        positions: [btmStartPoint, ...cartesianArr],
        width: 7,
        material: new ImageTrailMaterial({
          backgroundColor: Cesium.Color.fromBytes(96, 210, 149),
          image: getResource('arrow-right.png'),
          imageW: 7,
          duration: 0,
          animation: false,
        }),
        clampToGround: false, // 关闭贴地效果，保留高度
      },
    })
    // 获取航线详情
    getWaylineDetails(kmlRes)
    dataSource.show = true
    global.$viewer.flyTo(getEntityById('entityLine'), {
      offset: new Cesium.HeadingPitchRange(0, -90, 600),
    })
  }
  //   获取航线详情
  const getWaylineDetails = (kmlStr: string) => {
    // 获取当前航线全局速度
    const getGlobalSpeed: any = getKmlParams(kmlStr, true, {
      name: 'autoFlightSpeed',
      findRegx: '([\\s\\S]*?)',
    })
    const speed = Number(getGlobalSpeed[1])
    const lineEntity = getEntityById('entityLine')
    // 获取距离
    const polylineLength: any = getPolylineLength(lineEntity).toFixed(1) || 0
    waylineDetails[0].value = polylineLength + 'm'
    // 航点数
    waylineDetails[2].value = cartesianArr.length
    // 计算时间
    const sportTime = polylineLength / speed
    // 判断有没有超过一分钟
    const time = sportTime / 60
    waylineDetails[1].value =
      Math.trunc(time) + ' m ' + Math.round((time % 1) * 60) + ' s'

    // 获取事件
    getPointEvent()
  }
  // 获取航线点位事件
  const getPointEvent = async () => {
    const kmlRes = await analyzeKmzFile(fileUrl)
    // 所有航点
    const points = getKmlParams(kmlRes, false, {
      name: 'Placemark',
      findRegx: '([\\s\\S]*?)',
      mode: 'g',
    })
    points?.forEach((point: string, index: number) => {
      // 当前点位事件
      const pointActions = getKmlParams(point, true, {
        name: 'actionGroup',
        findRegx: '([\\s\\S]*?)',
        mode: 'g',
      })
      const eventArr: eventParmas[] = []
      if (pointActions) {
        const actions =
          getKmlParams(pointActions[0], true, {
            name: 'action',
            findRegx: '([\\s\\S]*?)',
            mode: 'g',
          }) || []
        actions?.forEach((action) => {
          eventList.forEach((event: any) => {
            if (!event.distinguish) {
              action.includes(event.key) && eventArr.push(event)
            } else {
              const pitchAngle =
                getKmlParams(action, true, {
                  name: 'gimbalPitchRotateAngle',
                  findRegx: '([\\s\\S]*?)',
                }) || []
              const yawAngle =
                getKmlParams(action, true, {
                  name: 'gimbalYawRotateAngle',
                  findRegx: '([\\s\\S]*?)',
                }) || []
              if (!!Number(pitchAngle[1]) && event.distinguish === 'pitch') {
                eventArr.push(event)
              }
              if (!!Number(yawAngle[1]) && event.distinguish === 'yaw') {
                eventArr.push(event)
              }
            }
          })
          // 判断一共有多少个拍照模式
          const actionFunc = getKmlParams(point, true, {
            name: 'actionActuatorFunc',
            findRegx: 'takePhoto',
            mode: 'g',
          })
          if (actionFunc) {
            ;(waylineDetails[3] as any).value++
          }
        })
        waylinePointsEvent.value[index].eventList = eventArr
      }
      // 获取当前是否存在拍照模式
      const pointShootMode = getKmlParams(point, true, {
        name: 'shootType',
        findRegx: '([\\s\\S]*?)',
        mode: 'g',
      })
      if (pointShootMode) {
        pointShootMode.forEach((type: string) => {
          eventList.forEach((item: any) => {
            type.includes(item.key) && eventArr.push(item)
          })
        })
      }
    })
  }

  return {
    waylinePointsEvent,
    waylineDetails,
    kmlEntities,
    drawWayline,
    getWaylineDetails,
  }
}
export default useMapDraw