<template>
  <div>
    <div style="width: 100%; height: 100vh">
      <Map :airRoute="airRoute" @flyToThere="flyToThere" />
    </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> -->
    <!-- 负载控制 -->
    <div v-if="loadControlVisible">
      <LoadControl @changeLoadControl="changeLoadControl" :msgData="msgData" />
    </div>
    <!-- 飞行控制 -->
    <div v-if="flightControlVisible">
      <FlightControl
        @changeFlightControl="changeFlightControl"
        @clickTakeOff="clickTakeOff"
        @clickFlyTo="clickFlyTo"
      />
    </div>
    <!-- 一键起飞表单 -->
    <div v-if="takeOffFormVisible">
      <TakeOffForm @changeTakeOffForm="changeTakeOffForm" :locationVal="locationVal" />
    </div>
    <!-- 指点飞行表单 -->

    <div v-if="flyToFormVisible">
      <FlyToForm @changeFlyToForm="changeFlyToForm" :locationVal="locationVal" />
    </div>
    <div class="AirportLive" v-if="airportLiveVisible" v-drag>
      <AirportLive :msgData="msgData" />
    </div>
    <div
      class="LivePreview"
      v-if="livePreviewVisible"
      :style="{ bottom: airportLiveVisible ? '300px' : '20px' }"
      v-drag
    >
      <LivePreview :msgData="msgData" :uavLive="uavLive" />
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, onBeforeUnmount } 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';

  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;
    EventBus.emit('obtainTheLocation', locationVal.value);
  };
  onMounted(() => {
    destroyConnection();
    createConnection();
    setTimeout(() => {
      changeSelect();
    }, 1000);
  });
  onBeforeUnmount(() => {
    destroyConnection();
  });
  const changeSelectValue = ref();
  // 机场直播
  const airportLiveVisible = ref(true);
  // 无人机直播
  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 = () => {
    console.log('clickTakeOff');
    takeOffFormVisible.value = true;
  };
  const clickFlyTo = () => {
    flyToFormVisible.value = true;
  };
  const changeTakeOffForm = () => {
    takeOffFormVisible.value = false;
    setTimeout(() => {
      uavLive.value = true;
      livePreviewVisible.value = true;
    }, 2000);
  };
  const loadLiveStreaming = () => {
    livePreviewVisible.value = !livePreviewVisible.value;
  };
  const changeFlyToForm = () => {
    flyToFormVisible.value = false;
  };
  const msgData = ref();
  const changeSelect = async (value?: any) => {
    console.log(value);
    changeSelectValue.value = value;
    const topicUrl = 'thing/product/8UUXN5400A079H/osd';
    // 订阅
    clientSubscribe(topicUrl, { qos: 0 });
    // 接收消息
    getClient().on('message', (topic, message) => {
      const rs = JSON.parse(message);
      if (rs) {
        msgData.value = {
          topic: topic,
          message: rs,
        };
      }
    });
  };
</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 {
    position: absolute;
    right: 10px;
    bottom: 20px;
  }
</style>
