<template>
  <div class="airport-information">
    <div class="title"
      >无人机信息：<span>
        <template
          v-if="uavInformation.sub_device && uavInformation.sub_device.device_online_status == 1"
          >已开机</template
        >
        <template v-else>已关机</template>
      </span></div
    >
    <div class="content">
      <div class="content-title">
        {{ time }}
        <!-- <span>临近或已接近夜晚</span> -->
      </div>
      <div class="content-item">
        <div class="item-div" title="飞行器上 Dongle 数量">
          <img src="@/assets/images/flightoperation/project.png" alt="" />
          {{ uavInformation.wireless_link ? uavInformation.wireless_link.dongle_number : 0 }}
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <!-- <div class="item-div">
          <img src="@/assets/images/flightoperation/arrow.png" alt="" />
          0%
        </div> -->
        <div class="item-div" title="电量百分比">
          <img src="@/assets/images/flightoperation/electricity.png" alt="" />
          {{
            uavInformation.drone_battery_maintenance_info
              ? uavInformation.drone_battery_maintenance_info.capacity_percent
              : 0
          }}
        </div>
      </div>
      <div class="content-item">
        <div class="item-div" title="SDR 链路连接状态">
          <img src="@/assets/images/flightoperation/sdr.png" alt="" />
          <!-- sdr_link_state -->
          <template
            v-if="uavInformation.wireless_link && uavInformation.wireless_link.sdr_link_state == 1"
            >连接</template
          >
          <template v-else>断开</template>
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div" title="4G 链路连接状态">
          <img src="@/assets/images/flightoperation/4g.png" alt="" />
          <template
            v-if="
              uavInformation.wireless_link && uavInformation.wireless_link['4g_link_state'] == 1
            "
            >连接</template
          >
          <template v-else>断开</template>
        </div>
      </div>
      <!-- sdr_freq_band sdr_quality 4g_freq_band 4g_quality -->
      <div class="content-item">
        <div class="item-div" title="SDR 信号质量">
          <img src="@/assets/images/flightoperation/sdr.png" alt="" />
          {{ uavInformation.wireless_link ? uavInformation.wireless_link.sdr_quality : 0 }}
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div" title="总体 4G 信号质量">
          <img src="@/assets/images/flightoperation/4g.png" alt="" />
          {{ uavInformation.wireless_link ? uavInformation.wireless_link['4g_quality'] : 0 }}
        </div>
      </div>
      <div class="content-item">
        <div class="item-div" title="SDR 频段">
          <img src="@/assets/images/flightoperation/sdr.png" alt="" />
          {{ uavInformation.wireless_link ? uavInformation.wireless_link.sdr_freq_band : 0 }}
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div" title="4G 频段">
          <img src="@/assets/images/flightoperation/4g.png" alt="" />
          {{ uavInformation.wireless_link ? uavInformation.wireless_link['4g_freq_band'] : 0 }}
        </div>
      </div>
      <div class="content-edit">
        经度
        <div>
          <a-input v-model:value="uavLocation.longitude" readonly />
          <!-- <EditOutlined style="color: #0a99eb; cursor: pointer" /> -->
        </div>
      </div>
      <div class="content-edit">
        维度
        <div>
          <a-input v-model:value="uavLocation.latitude" readonly />
        </div>
      </div>
      <div class="content-edit">
        高度
        <div>
          <a-input v-model:value="uavLocation.height" readonly />
          <!-- <EditOutlined style="color: #0a99eb; cursor: pointer" /> -->
        </div>
      </div>
      <!-- <div class="content-edit">
        限远
        <div>
          <a-input v-model:value="data.limitedRange" />
          <EditOutlined style="color: #0a99eb; cursor: pointer" />
        </div>
      </div> -->
      <!-- <div class="content-edit">
        避障
        <div>
          <a-input v-model:value="data.obstacleAvoidance" />
          <EditOutlined style="color: #0a99eb; cursor: pointer" />
        </div>
      </div> -->
      <div class="content-button">
        <a-button type="primary" style="background: #3a57e8" @click="emits('changeFlightControl')"
          >飞行控制</a-button
        >
        <a-button type="primary" style="background: #0a99eb" @click="emits('changeLoadControl')"
          >云台相机控制</a-button
        >
      </div>
      <div class="content-button">
        <a-button type="primary" style="background: #3a57e8; width: 100%" @click="liveStreaming"
          >负载直播</a-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref, watch, onMounted } from 'vue';
  import { CopyOutlined, EditOutlined } from '@ant-design/icons-vue';
  import { timestampToFormattedDate } from '@/utils/index';
  import { airPortStore } from '@/store/modules/airport';
  import { buildGUID } from '@/utils/uuid';
  import { servicesTopic, services_replyTopic, errorName } from '@/utils/debugging/remote';
  import { getClient } from '@/utils/mqtt';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();
  const airPortStoreVal = airPortStore();
  const airPort = airPortStoreVal.getAirport;
  const uav = airPortStoreVal.getUAV;
  const live_info = airPortStoreVal.getLiveInfo;
  const liveCode = ref('6');
  const emits = defineEmits(['changeLoadControl', 'changeFlightControl', 'loadLiveStreaming']);
  const props = defineProps({
    msgData: Object,
    uavTrack: Object,
  });
  const data = reactive({
    navigationLight: '关闭',
    altitude: '70m',
    heightPermitted: '100m',
    limitedRange: '500m',
    obstacleAvoidance: '500m',
  });
  const uavLocation = ref({
    longitude: 0,
    latitude: 0,
    height: 0,
  });
  const uavInformation = ref({
    sub_device: {
      // 飞行器状态
      device_online_status: 0,
    },
    drone_battery_maintenance_info: {
      // 电池剩余电量
      capacity_percent: 0,
    },
    wireless_link: {
      // 飞行器上 Dongle 数量
      dongle_number: 0,
      sdr_quality: 0,
      '4g_quality': 0,
      '4g_uav_quality': 0,
      '4g_gnd_quality': 0,
      remain_upload: 0,
      sdr_link_state: 0,
      sdr_freq_band: 0,
    },
  });
  const time = ref(timestampToFormattedDate(new Date().getTime()));
  watch(
    () => props.msgData,
    (val) => {
      if (val.topic == 'thing/product/' + airPort.sn + '/osd') {
        if (val.message.data.sub_device) {
          uavInformation.value.sub_device = val.message.data.sub_device;
          time.value = timestampToFormattedDate(val.message.timestamp);
        }
        if (val.message.data.drone_battery_maintenance_info) {
          uavInformation.value.drone_battery_maintenance_info =
            val.message.data.drone_battery_maintenance_info;
          time.value = timestampToFormattedDate(val.message.timestamp);
        }
        if (val.message.data.wireless_link) {
          uavInformation.value.wireless_link = val.message.data.wireless_link;
          time.value = timestampToFormattedDate(val.message.timestamp);
        }
      }
    },
  );
  watch(
    () => props.uavTrack,
    (val) => {
      uavLocation.value.longitude = val.longitude.toFixed(6);
      uavLocation.value.latitude = val.latitude.toFixed(6);
      uavLocation.value.height = val.height.toFixed(2);
    },
  );
  const startTid = buildGUID();
  const liveStreaming = () => {
    createMessage.info('正在开启负载直播，请稍后');
    const querys = {
      bid: buildGUID(),
      method: 'live_start_push',
      tid: startTid,
      timestamp: new Date().getTime(),
      data: {
        url_type: 1, // 0 = 自适应；如需 RTMP 改为 1；GB28181 为 3；WebRTC 为 4
        url: live_info.rtmp + liveCode.value,
        video_id: uav.video_id,
        video_quality: 3, // 0=自适应，1=流畅，2=标清，3=高清，4=超清
      },
    };
    console.log(querys);
    servicesTopic(querys);
    services_replyTopic();
  };
  onMounted(() => {
    setTimeout(() => {
      getClient().on('message', (topic, message) => {
        const rs = JSON.parse(message);
        if (rs.method == 'live_start_push' && rs.tid == startTid) {
          console.log(rs);
          if (rs.data.result == 0) {
            createMessage.success('无人机开始直播成功');
            emits('loadLiveStreaming', uavInformation.value.sub_device.device_online_status);
          } else if (rs.data.result == 513003) {
            createMessage.success('无人机直播已开启');
            emits('loadLiveStreaming', uavInformation.value.sub_device.device_online_status);
          } else {
            createMessage.error('开始直播失败，' + errorName(rs.data.result));
          }
        }
      });
    }, 1000);
  });
</script>
<style lang="less" scoped>
  .airport-information {
    position: absolute;
    top: 360px;
    left: 0;
    z-index: 999;
    width: 260px;
    padding: 10px;
    background: #0d0e15;
    margin: 10px 0 0 10px;
    box-shadow:
      0px 10px 30px 0px rgba(0, 0, 6, 0.15),
      inset 0px 0px 36px 0px rgba(58, 87, 232, 0.73);
    border-radius: 6px;
    backdrop-filter: blur(3px);
    color: #fff;
    .title {
      width: 100%;
      padding: 10px 0;
      box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
      border-bottom: 1px solid #4e5778;
      span {
        color: #3a57e8;
      }
    }
    .content-title {
      font-size: 14px;
      padding: 10px 0;
      span {
        font-size: 12px;
      }
    }
    .content-item {
      display: flex;
      align-items: center;
      border-bottom: 1px solid #4e5778;
      padding: 10px 0;
      .item-div {
        width: 49%;
        cursor: pointer;
        img {
          width: 20px;
        }
      }
    }
    .content-button {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .content-edit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #4e5778;
      margin-top: 10px;
      padding: 2px 10px;
      border-radius: 4px;
      font-size: 12px;
      input {
        background: none;
        border: none;
        width: 160px;
        text-align: right;
        color: #fff;
        font-size: 12px;
      }
    }
  }
</style>
