<template>
  <div>
    <div class="map-container">
      <div class="map-container-content">
        <Map
          :airRoute="airRoute"
          @flyToThere="flyToThere"
          :airPort="airPort"
          :uavTrack="uavTrack"
        />
      </div>
    </div>
    <SelectComponent @selectChange="changeSelect" />
    <AirportInformation
      @changeLive="changeAirportLive"
      @changeRemote="changeRemote"
      :msgData="msgData"
      v-if="changeSelectValue"
    />
    <UAVInformation
      :msgData="msgData"
      :uavTrack="uavTrack"
      @changeLoadControl="changeLoadControl"
      @changeFlightControl="changeFlightControl"
      @loadLiveStreaming="loadLiveStreaming"
      v-if="changeSelectValue"
    />
    <!-- 远程调试 -->
    <!-- <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"
      :uavStatus="uavStatus"
      :airportLiveVisible="airportLiveVisible"
      @loadLiveStreaming="livePreviewVisible = false"
      @changeCameraType="changeCameraType"
    />
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, onBeforeUnmount, reactive, watch, computed } 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({});
  const connected = ref(false);
  const connectCallback = () => {
    connected.value = true;
  };
  const topicUrl = computed(() => {
    return 'thing/product/' + airPortInfo.sn + '/osd'
  })
  const topicUAVUrl = computed(() => {
    return 'thing/product/' + UAVinfo.sn + '/osd'
  })
  onMounted(() => {
    destroyConnection();
    createConnection(connectCallback);
    setTimeout(() => {
      // 接收消息
      getClient().on('message', (topic, message) => {
        const rs = JSON.parse(message);
        if (rs) {
          msgData.value = {
            topic: topic,
            message: rs,
          };

          if (topic == topicUAVUrl.value) {
            if (rs.data.latitude && rs.data.longitude) {
              uavTrack.value = rs.data;
            }
          } else if (topic == topicUrl.value) {
            if (rs.data.latitude && rs.data.longitude) {
              airPort.value.latitude = rs.data.latitude;
              airPort.value.longitude = rs.data.longitude;
            }
            if (rs.data.sub_device) {
              uavStatus.value = rs.data.sub_device.device_online_status;
            }
          }
        }
      });
    }, 1000);
  });
  watch(
    () => connected.value,
    (value) => {
      if (value) {
        console.log('start');
        changeSelect();
      }
    },
  );
  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;
    //   }, 5000);
    // }
  };
  const uavStatus = ref();
  const loadLiveStreaming = (val) => {
    livePreviewVisible.value = !livePreviewVisible.value;
    uavStatus.value = val;
  };
  const changeFlyToForm = () => {
    flyToFormVisible.value = false;
  };
  const cameraType = ref('wide');
  const changeCameraType = (value: any) => {
    cameraType.value = value;
  };
  const msgData = ref({});
  const changeSelect = async (value?: any) => {
    // createConnection(connectCallback);
    // 页面初始化
    // 机场直播
    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 });
  };
</script>
<style lang="less" scoped>
  .map-container {
    width: calc(100vw - 252px);
    height: calc(90vh - 28px);
  }
  .map-container-content {
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    position: relative;
    top: -40px;
    left: -40px;
  }
  .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>
