<template>
  <div class="home-page">
    <div style="width: 100%;height: calc(100vh - 80px);">
      <Map :airLineForm="airLineForm" @mapOnLoad="mapOnLoad" :homeAirport="airPort" @clickAirPort="clickAirPort" @changeAirportLive="changeAirportLive" @changeUAVLive="changeUAVLive"/>
    </div>
    <div ref="leftComponentRef" style="position: absolute;top: 0px;left: 0px;">
      <!-- 项目列表 -->
      <ProjectList :map="map" v-model:activeProject="activeProject" :airPort="airPort" :connect="connect"/>
      <!-- 基本信息 -->
      <Info />
    </div>
    <div ref="rightComponentRef" style="position: absolute;top: 0px;right: 0px;">
      <!-- 智慧巡检 -->
      <Inspection />
      <!-- 成果动态 -->
      <Result />
    </div>
    <AirportLive
      :msgData="msgData"
      v-if="airportLiveVisible"
      @changeAirportLive="airportLiveVisible = false"
    />
    <LivePreview
      v-if="livePreviewVisible"
      :msgData="msgData"
      :airportLiveVisible="airportLiveVisible"
      @loadLiveStreaming="livePreviewVisible = false"
    />
  </div>
</template>

<script setup lang="ts">
import Map from '@/views/demo/workmanagement/workplan/components/map.vue'
// import Map from './Map/index.vue'
import ProjectList from './ProjectList/index.vue'
import Info from './Info/index.vue'
import Inspection from './Inspection/index.vue'
import Result from './Result/index.vue'
import { ref, onMounted, onBeforeUnmount, } from "vue"
import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
import { useRouter } from 'vue-router';
import { AirportLive, LivePreview } from '@/views/demo/workmanagement/flightoperation/index'

const router = useRouter();
const airLineForm = ref({});
const airPort = ref({
  latitude: null,
  longitude: null,
  mode_code: null,
});
const activeProject = ref('')
const DESIGN_WIDTH = 1912
const DESIGN_HEIGHT = 962
const leftComponentRef = ref<HTMLElement | null>(null)
const rightComponentRef = ref<HTMLElement | null>(null)
const map = ref()
const connect = ref(false)
const msgData = ref({});
const airportLiveVisible = ref(false);
const livePreviewVisible = ref(false);

const clickAirPort = () => {
  sessionStorage.setItem('homeToFlightId', activeProject.value);
  router.push({
    path: '/workmanagement/flightoperation',
  });
}
function updateScale() {
  const scaleX = window.innerWidth / DESIGN_WIDTH
  const scaleY = window.innerHeight / DESIGN_HEIGHT
  const scale = Math.min(scaleX, scaleY)

  const left = leftComponentRef.value
  const right = rightComponentRef.value
  if (left) {
    left.style.transform = `scale(${scale}) translate(-50%, -50%)`
  }
  if (right) {
    right.style.transform = `scale(${scale}) translate(-50%, -50%)`
  }
}
const connectionCallback = () => {
  connect.value = true
  getClient().on('message', (topic, msg) => {
    if (topic.endsWith("osd")) {
      const rs = JSON.parse(msg)
      if (rs.data.latitude && rs.data.longitude) {
        airPort.value.latitude = rs.data.latitude;
        airPort.value.longitude = rs.data.longitude;
        airPort.value.mode_code = rs.data.mode_code;
      }
    }
  });
}
onMounted(() => {
  createConnection(connectionCallback)
  updateScale()
  window.addEventListener('resize', updateScale)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', updateScale)
  destroyConnection()
})
const mapOnLoad = (value) => {
  map.value = value
}
const changeAirportLive = (type) => {
  airportLiveVisible.value = type
}
const changeUAVLive = (type) => {
  livePreviewVisible.value = type
}
</script>

<style lang="scss" scoped>
.home-page{
  position: relative;
  width: 100%;
  height: 100%;
}

</style>