<template>
  <div>
    <div style="width: calc(100vw - 226px); height: calc(100vh - 20px)">
      <Map :airRoute="airRoute" @flyToThere="flyToThere" :airPort="airPort" :uavTrack="uavTrack" />
    </div>
    <SelectComponent @selectChange="changeSelect" />
    <AirportInformation
      @changeLive="changeAirportLive"
      @changeRemote="changeRemote"
      :msgData="msgData"
    />
    <UAVInformation
      :msgData="msgData"
      @changeLoadControl="changeLoadControl"
      @changeFlightControl="changeFlightControl"
      @loadLiveStreaming="loadLiveStreaming"
    />
    <!-- 远程调试 -->
    <!-- <div v-if="remoteVisible">
      <RemoteDebugging @changeRemote="changeRemote" :msgData="msgData" />
    </div> -->
    <!-- 负载控制 -->
    <LoadControl
      v-if="loadControlVisible"
      @changeLoadControl="changeLoadControl"
      :msgData="msgData"
      :cameraType="cameraType"
    />
    <!-- 飞行控制 -->
    <FlightControl
      @changeFlightControl="changeFlightControl"
      @clickTakeOff="clickTakeOff"
      @clickFlyTo="clickFlyTo"
      v-if="flightControlVisible"
    />
    <!-- 一键起飞表单 -->
    <TakeOffForm
      v-if="takeOffFormVisible"
      @changeTakeOffForm="changeTakeOffForm"
      :locationVal="locationVal"
    />
    <!-- 指点飞行表单 -->

    <FlyToForm
      v-if="flyToFormVisible"
      @changeFlyToForm="changeFlyToForm"
      :locationVal="locationVal"
    />
    <AirportLive
      :msgData="msgData"
      v-if="airportLiveVisible"
      @changeAirportLive="airportLiveVisible = false"
    />
    <LivePreview
      v-if="livePreviewVisible"
      :msgData="msgData"
      :uavLive="uavLive"
      :airportLiveVisible="airportLiveVisible"
      @loadLiveStreaming="livePreviewVisible = false"
      @changeCameraType="changeCameraType"
    />
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, onBeforeUnmount, reactive } from 'vue';
  import {
    SelectComponent,
    AirportInformation,
    UAVInformation,
    AirportLive,
    LivePreview,
    Map,
    RemoteDebugging,
    LoadControl,
    FlightControl,
    TakeOffForm,
    FlyToForm,
  } from './index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getClient, createConnection, clientSubscribe, destroyConnection } from '@/utils/mqtt';
  import { buildGUID } from '@/utils/uuid';
  import { vDrag } from '@/utils/drag';
  import { EventBus } from '@/utils/eventBus';
  import { drcUpTopic } from '@/utils/debugging/remote';
  import { airPortStore } from '@/store/modules/airport';

  const airPortStoreVal = airPortStore();
  const airPortInfo = airPortStoreVal.getAirport;
  const UAVinfo = airPortStoreVal.getUAV;
  const { createMessage } = useMessage();
  const airRoute = ref({
    airLineType: null,
    airType: null,
    airModel: null,
    name: null,
  });
  const locationVal: any = ref({});
  const flyToThere = (e) => {
    console.log(e);
    locationVal.value.lat = e._lat;
    locationVal.value.lng = e._lng;
    locationVal.value.alt = e._alt;
    EventBus.emit('obtainTheLocation', locationVal.value);
  };
  const airPort = ref({
    latitude: null,
    longitude: null,
  });
  const uavTrack = ref({});
  onMounted(() => {
    destroyConnection();
    createConnection();
    setTimeout(() => {
      changeSelect();
    }, 1000);
  });
  onBeforeUnmount(() => {
    destroyConnection();
  });
  const changeSelectValue = ref();
  // 机场直播
  const airportLiveVisible = ref(false);
  // 无人机直播
  const livePreviewVisible = ref(false);
  // 远程调试
  const remoteVisible = ref(false);
  // 负载控制
  const loadControlVisible = ref(false);
  // 飞行控制
  const flightControlVisible = ref(false);
  // 一键起飞表单
  const takeOffFormVisible = ref(false);
  // 指点飞行表单
  const flyToFormVisible = ref(false);
  // 一键起飞后开启无人机直播
  const uavLive = ref(false);
  const changeAirportLive = () => {
    airportLiveVisible.value = !airportLiveVisible.value;
  };
  const changeRemote = () => {
    remoteVisible.value = !remoteVisible.value;
  };
  const changeLoadControl = () => {
    loadControlVisible.value = !loadControlVisible.value;
  };
  const changeFlightControl = () => {
    flightControlVisible.value = !flightControlVisible.value;
  };
  const clickTakeOff = () => {
    takeOffFormVisible.value = true;
  };
  const clickFlyTo = () => {
    flyToFormVisible.value = true;
  };
  const changeTakeOffForm = (val) => {
    takeOffFormVisible.value = false;
    if (!val) {
      setTimeout(() => {
        uavLive.value = true;
        livePreviewVisible.value = true;
      }, 2000);
    }
  };
  const loadLiveStreaming = () => {
    livePreviewVisible.value = !livePreviewVisible.value;
  };
  const changeFlyToForm = () => {
    flyToFormVisible.value = false;
  };
  const cameraType = ref('wide');
  const changeCameraType = (value: any) => {
    console.log(value);
    cameraType.value = value;
  };
  const msgData = ref();
  const changeSelect = async (value?: any) => {
    // 页面初始化
    // 机场直播
    airportLiveVisible.value = false;
    // 无人机直播
    livePreviewVisible.value = false;
    // 远程调试
    remoteVisible.value = false;
    // 负载控制
    loadControlVisible.value = false;
    // 飞行控制
    flightControlVisible.value = false;
    // 一键起飞表单
    takeOffFormVisible.value = false;
    // 指点飞行表单
    flyToFormVisible.value = false;
    // 一键起飞后开启无人机直播
    uavLive.value = false;
    changeSelectValue.value = value;
    const topicUrl = 'thing/product/' + airPortInfo.sn + '/osd';
    // 订阅机场消息
    clientSubscribe(topicUrl, { qos: 0 });
    const topicUAVUrl = 'thing/product/' + UAVinfo.sn + '/osd';
    // 订阅飞行器消息
    clientSubscribe(topicUAVUrl, { qos: 0 });

    // 接收消息
    getClient().on('message', (topic, message) => {
      const rs = JSON.parse(message);
      if (rs) {
        msgData.value = {
          topic: topic,
          message: rs,
        };
        if (rs.data.latitude && rs.data.longitude) {
          airPort.value.latitude = rs.data.latitude;
          airPort.value.longitude = rs.data.longitude;
        }
        // relative_alternate_land_point 都是0
        // self_converge_coordinate 飞不飞没什么变化
        // alternate_land_point 都是0
        if (topic == topicUAVUrl) {
          if (rs.data.latitude && rs.data.longitude) {
            uavTrack.value = rs.data;
          }
        }
      }
    });
  };
</script>
<style lang="less" scoped>
  .flightoperation-container {
    position: absolute;
    top: 0;
    left: 0;
  }
  .flightoperation-top {
    display: flex;
  }
  .select-item {
    width: 160px;
    height: 38px;
    margin-left: 10px;
    background: #3a57e8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    cursor: pointer;
    ::v-deep .ant-select-selector {
      background: #3a57e8;
      border: none;
      color: #fff;
      .ant-select-selection-placeholder {
        color: #fff;
      }
    }
    ::v-deep .ant-select-arrow {
      color: #fff;
    }
  }
  .select-item:nth-child(2) {
    background: #08b1ba;
    ::v-deep .ant-select-selector {
      background: #08b1ba;
    }
  }
  .select-item:nth-child(3) {
    background: #1aa053;
    ::v-deep .ant-select-selector {
      background: #1aa053;
    }
  }
  .AirportLive {
    position: absolute;
    right: 10px;
    bottom: 20px;
  }
  .LivePreview {
    width: 100%;
    position: absolute;
    right: 10px;
    bottom: 20px;
  }
</style>
