<template>
  <div class="main_container">
    <div id="track" ref="map" />
  </div>
</template>
<script>
import { reactive, toRefs, onMounted, ref } from 'vue'
import { Map, View } from 'ol'
import 'ol/ol.css'
import { Tile } from 'ol/layer'
import { XYZ } from 'ol/source'
import { transform } from 'ol/proj'
import * as control from 'ol/control'

export default {
  name: 'PositionMsg',
  props: {
    data: {
      type: Array,
      default: () => {}
    }
  },
  emits: {},
  setup(props, { emit }) {
    const data = reactive({
      problemList: props.data, // 问题矢量点列表
      problemData: {}, // 问题点数据
      mapData: null,
      mapView: null
    })

    /**
     * 初始化底图
     */
    const initMap = function() {
      const layers = [
        new Tile({
          visible: true,
          source: new XYZ({
            url: 'https://tianditu.t-aaron.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f82bb2fd8115c7fb576a8b2fcf738523'
          })
        })
      ]

      data.mapView = new View({
        maxZoom: 18,
        zoom: 4,
        center: transform([108.94043, 31.008173], 'EPSG:4326', 'EPSG:3857')
      })
      data.mapData = new Map({
        layers: layers,
        target: 'track',
        view: data.mapView,
        controls: control.defaults({
          attribution: false,
          rotate: false,
          zoom: false
        })
      })
      data.mapData.render()
    }

    // function playTrack(map, view, id, hisTrackList) {
    //   let animating = false
    //   let distance = 0
    //   let lastTime
    //   let trackInfo = null
    //   let vectorLayer
    //   let changeTrack
    //   const initTrack = (coordinate) => {
    //     const route = new LineString(coordinate)
    //     const routeFeature = new Feature({
    //       type: 'route',
    //       geometry: route
    //     })
    //     const startMarker = new Feature({
    //       type: 'icon',
    //       geometry: new Point(route.getFirstCoordinate())
    //     })
    //     const endMarker = new Feature({
    //       type: 'icon',
    //       geometry: new Point(route.getLastCoordinate())
    //     })
    //     const position = startMarker.getGeometry().clone()
    //     const geoMarker = new Feature({
    //       type: 'geoMarker',
    //       geometry: position
    //     })
    //     geoMarker.setProperties({ type: 'geoMarker' }, false)

    //     const styles = {
    //       route: new Style({
    //         stroke: new Stroke({
    //           width: 3,
    //           color: 'red'
    //         })
    //       }),
    //       icon: new Style({
    //         image: new Icon({
    //           offset: [0, 0],
    //           offsetOrigin: 'bottom-right',
    //           src: require('@/assets/img/point.png'),
    //           scale: [0.9, 0.9]
    //         })
    //       }),
    //       geoMarker: new Style({
    //         image: new Icon({
    //           offset: [0, 0],
    //           offsetOrigin: 'bottom-right',
    //           src: require('@/assets/img/point.png'),
    //           scale: [0.5, 0.5]
    //         })
    //       })
    //     }
    //     if (this.vectorLayer) {
    //       this.vectorLayer.setSource(
    //         new VectorSource({
    //           features: [geoMarker, routeFeature]
    //         })
    //       )
    //       vectorLayer = this.vectorLayer
    //     } else {
    //       vectorLayer = new VectorLayer({
    //         source: new VectorSource({
    //           features: [geoMarker, routeFeature]
    //         }),
    //         style: function(feature) {
    //           return styles[feature.get('type')]
    //         }
    //       })
    //     }
    //     this.vectorLayer = vectorLayer
    //     map.addLayer(vectorLayer)
    //     // vectorLayer.on('postrender',changeTrack)
    //     vectorLayer.on('change', changeTrack)
    //     view.fit(route, { padding: [50, 50, 50, 50] })
    //     this.routeLayer = vectorLayer
    //     // startAnimation({vectorLayer,geoMarker})
    //     return {
    //       vectorLayer,
    //       geoMarker,
    //       route,
    //       styles,
    //       position
    //     }
    //   }
    //   if (hisTrackList.length > 1) {
    //     trackInfo = initTrack(hisTrackList)
    //   }
    //   changeTrack = (event) => {
    //     try {
    //       // trackInfo.route.appendCoordinate(coordinate);
    //       const vectorContext = getVectorContext(event)
    //       vectorContext.setStyle(trackInfo.styles.geoMarker)
    //       VectorContext.drawGeometry(trackInfo.position)
    //       vectorContext.drawGeometry(trackInfo.route)
    //       // tell OpenLayers to continue the postrender animation
    //       map.render()
    //     } catch {}
    //   }
    //   this.socket = setInterval(() => {
    //     this.$http.get(`/inspection/getFlightDataByInspectionId?inspectionId=${id}`)
    //       .then((res) => {
    //         const coordinate = fromLonLat([res.data?.data?.lng, res.data?.data?.lat])
    //         const unUseableCoordinate = !coordinate.every((item) => !isNaN(item))
    //         if (unUseableCoordinate) return
    //         // 赋值动态无人机坐标
    //         if (this.btnList[0].flag) {
    //           if (coordinate.length) {
    //             this.trajectoryList.lng = coordinate[0]
    //             this.trajectoryList.lat = coordinate[1]
    //           }
    //         }

    //         this.trackList.push(coordinate)
    //         if (this.trackList.length > 1 && !trackInfo) {
    //           this.initTrack(this.trackList)
    //         }
    //         if (trackInfo) {
    //           trackInfo.route.appendCoordinate(coordinate)
    //           trackInfo.vectorLayer.getSource().changed()
    //           trackInfo.position.setCoordinates(coordinate)
    //         }
    //       })
    //   }, 2000)
    //   const test = (event) => {
    //     const coordinate = toRaw(this.trackList).shift()
    //     if (!coordinate) return
    //     trackInfo.route.appendCoordinate(coordinate)
    //     const vectorContext = getVectorContext(event)
    //     vectorContext.setStyle(trackInfo.styles.geoMarker)
    //     vectorContext.drawGeometry(trackInfo.route)
    //     // tell OpenLayers to continue the postrender animation
    //     map.render()
    //     // if(!animating){
    //     //   // startAnimation(trackInfo);
    //     // }
    //   }
    //   function moveFeature(event) {
    //     const speed = Number(50)
    //     const time = event.frameState.time
    //     const elapsedTime = time - lastTime
    //     distance = (distance + (speed * elapsedTime) / 1e6) % 2
    //     if (distance > 1) {
    //       stopAnimation(trackInfo)
    //     }
    //     lastTime = time

    //     const currentCoordinate = trackInfo.route.getCoordinateAt(
    //       distance > 1 ? 2 - distance : distance
    //     )
    //     trackInfo.position.setCoordinates(currentCoordinate)
    //     const vectorContext = getVectorContext(event)
    //     vectorContext.setStyle(trackInfo.styles.geoMarker)
    //     vectorContext.drawGeometry(trackInfo.position)
    //     // tell OpenLayers to continue the postrender animation
    //     map.render()
    //   }

    //   function stopAnimation(trackInfo) {
    //     const { vectorLayer, geoMarker } = trackInfo
    //     animating = false
    //     // Keep marker at current animation position
    //     geoMarker.setGeometry(trackInfo.position)
    //     vectorLayer.un('postrender', moveFeature)
    //   }
    //   function startAnimation(trackInfo) {
    //     const { vectorLayer, geoMarker } = trackInfo
    //     animating = true
    //     lastTime = Date.now()
    //     vectorLayer.on('postrender', moveFeature)
    //     // hide geoMarker and trigger map render through change event
    //     geoMarker.setGeometry(null)
    //   }
    // }

    onMounted(() => {
      initMap()
    })

    return {
      ...toRefs(data)

    }
  }
}
</script>
<style scoped>
.main_container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
#track {
  width: 100%;
  height: 100%;
}
</style>
