<template>
  <div>
    <div style="width: 100%; height: calc(100vh - 80px)">
      <Map></Map>
    </div>
    <SelectComponent @selectChange="changeSelect" />
    <AirportInformation @changeLive="changeAirportLive" :airportAllVal="airportAllVal" />
    <UAVInformation :uavAllVal="uavAllVal" />
    <div class="AirportLive" v-if="airportLiveVisible">
      <AirportLive />
    </div>
    <div
      class="LivePreview"
      v-if="livePreviewVisible"
      :style="{ bottom: airportLiveVisible ? '300px' : '20px' }"
    >
      <LivePreview />
    </div>
    <!-- <div class="flightoperation-container">
      
    </div> -->
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import {
    SelectComponent,
    AirportInformation,
    UAVInformation,
    AirportLive,
    LivePreview,
    Map,
  } from './index';
  import { useMessage } from '@/hooks/web/useMessage';
  import { getClient, createConnection } from '@/utils/mqtt';
  import { buildGUID } from '@/utils/uuid';

  const { createMessage } = useMessage();
  const airportAllVal = ref();
  const uavAllVal = ref();
  onMounted(() => {
    createConnection();
  });
  const changeSelectValue = ref();
  const airportLiveVisible = ref(false);
  const livePreviewVisible = ref(true);
  const changeAirportLive = () => {
    airportLiveVisible.value = !airportLiveVisible.value;
  };
  const changeSelect = (value: any) => {
    console.log(value);
    changeSelectValue.value = value;
    const topic = 'thing/product/8UUXN5400A079H/osd';
    // const topic = 'thing/product/8UUXN5400A079H/requests';
    // const topic = 'thing/product/8UUXN5400A079H/events';
    getClient().subscribe(topic, { qos: 0 }, (error, res) => {
      if (error) {
        createConnection();
        return;
      }
      // 开启定时器接收数据
      const timer = window.setInterval(() => {
        if (getClient() != null) {
          // Received
          getClient().on('message', (topic, message, packet) => {
            const rs = JSON.parse(message);
            console.log(rs);
            airportAllVal.value = rs;
            if (!rs.data.wind_speed) {
            } else {
              // 机场信息
            }
            // 无人机信息
            // uavAllVal.value =
          });
        } else {
          console.log('开启定时器接收数据2');
        }
      }, 5000);
    });
  };
</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>
