<template>
  <div class="h-100">
    <map-box ref="mapbox" @map-ready="onMapReady">
      <template #content>
        <div v-show="mapReady">
          <Statistics :planes="planeList" />
        </div>
      </template>
    </map-box>
  </div>
</template>

<script>
import MapBox from '@/components/MapBox'
import { waitForMapCanvasReady } from '@/utils'
import Statistics from '@/components/Statistics'

export default {
  name: 'Home',
  data () {
    return {
      mapReady: false// 地图加载完成后 回调时 设置此值  让地图组件插槽内容 滞后显示
    }
  },
  components: {
    MapBox,
    Statistics
  },
  computed: {
    planeList () {
      return this.$store.state.airList
    },
    // 过滤出所有飞机状态列表s
    planeStatus () {
      return this.planeList.map(plane => plane.planeState)
    },
    /**
   * @description: 所有飞机的历史定位数组集合，每个元素是一架飞机的 position 数组
   */
    planePositions () {
      return this.planeList.map(plane => {
        const posArr = plane.planeState?.position
        return Array.isArray(posArr) ? posArr : []
      })
    },
    /**
     * @description: 派生出与“图标选择”强相关的轻量状态，供独立 watcher 监控
     * offline: 是否离线；run: 载重是否超过阈值（>300）
     */
    planeIconStates () {
      return this.planeList.map(plane => {
        const s = plane.planeState || {}
        return {
          offline: s.online === false,
          run: !!s.hasGoods
        }
      })
    },
    /**
     * @description: 侧边栏显隐
     */
    isCollapse () {
      return this.$store.state.app.isCollapse
    }
  },
  methods: {
    // 地图组件回调地图加载完成后 执行
    onMapReady () {
      this.mapReady = true // 标记地图加载完成
      this.makePlanes(this.planeList)
    },
    /**
     * @description: 创建飞机图标
     */
    makePlanes (planes) {
      this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
      planes.forEach((plane, index) => { // 创建所有飞机
        let planeDefaultLonLat
        if (localStorage.getItem(plane.name) !== null) { // 从本地缓存 拿飞机得初始位置
          planeDefaultLonLat = JSON.parse(localStorage.getItem(plane.name))
          plane.lon = planeDefaultLonLat.lon
          plane.lat = planeDefaultLonLat.lat
        } else {
          // 缺省 给经纬度 小数点后随机第五位 即有个10米左右的随机距离
          plane.lon = 100 + Number((Math.random() * 0.01).toFixed(5))
          plane.lat = 40 + Number((Math.random() * 0.01).toFixed(5))
        }
        this.$refs.mapbox.makePlane(plane, index)
      })
    }
  },
  mounted () {
  },
  watch: {
    /**
     * @description: 飞机列表更新时候 更新地图
     */
    planeList: {
      async handler () {
        try {
          // 等待地图画布准备好
          await waitForMapCanvasReady(this.$refs.mapbox.map)
          // 画布准备好后执行你自己的逻辑
          this.onMapReady()
        } catch (err) {
          console.debug('等待地图画布准备超时', err)
        }
      },
      immediate: true
    },
    // 实时更新所有状态 到对应飞机弹出框
    planeStatus: {
      handler (val) {
        val.forEach((stateObj, index) => {
          stateObj.name = this.planeList[index].name // 保留飞机名称
          this.$refs.mapbox.updatePopupContent(stateObj, index)
        })
      },
      deep: true
    },
    // 实时更新所有飞机位置 和轨迹
    planePositions: {
      handler (allPositions) {
        // allPositions 是一个数组，每个元素是该飞机的 position 数组
        allPositions.forEach((positions, idx) => {
          const n = positions.length
          if (n > 2) {
            const [lon, lat] = positions[n - 1]
            // 定期存储 (例如每100次) 当前飞机的位置
            const key = `swarm_plane_${this.planeList[idx].name}`
            // 初始化本地计数器
            if (!this._storeCount) this._storeCount = {}
            const cnt = (this._storeCount[key] = (this._storeCount[key] || 0) + 1)
            if (cnt % 100 === 1) {
              localStorage.setItem(key, JSON.stringify({ lon, lat }))
            }

            // 更新 MapBox 中第 idx 架飞机的位置与轨迹
            this.$refs.mapbox.setPlaneLonLat({ lon, lat }, idx, positions)
          }
        })
      },
      deep: true
    },
    // 专门监听轻量图标状态，必要时才更新图标，避免不必要的 DOM 操作
    planeIconStates: {
      handler (val, oldVal) {
        val.forEach((iconState, index) => {
          const prev = Array.isArray(oldVal) ? oldVal[index] : undefined
          const changed = !prev || prev.offline !== iconState.offline || prev.run !== iconState.run
          if (changed) {
            // 使用原始 planeState 作为数据源更新图标
            const stateObj = this.planeList[index].planeState || {}
            this.$refs.mapbox.updatePlaneIcon(stateObj, index)
          }
        })
      },
      deep: true
    },
    /**
     * @description: 侧边栏缩进有变化时 地图重新自适应
     */
    isCollapse: {
      handler (val) {
        if (val) {
          setTimeout(() => {
            this.$nextTick(() => {
              this.$refs.mapbox.handleResize()
            })
          }, 500)
        }
      },
      deep: true
    }
  },
  destroyed () {
  }
}
</script>

<style></style>
