<template>
  <div class="airport-information" v-if="airportVal">
    <div class="title"
      >机场信息：<span v-if="airportVal.mode_code">
        <template v-if="airportVal.mode_code == 0">作业准备中</template>
        <template v-else-if="airportVal.mode_code == 1">飞行作业中</template>
        <template v-else-if="airportVal.mode_code == 2">作业后状态恢复</template>
        <template v-else-if="airportVal.mode_code == 3">自定义飞行区更新中</template>
        <template v-else-if="airportVal.mode_code == 4">地形障碍物更新中</template>
        <template v-else-if="airportVal.mode_code == 5">任务空闲</template>
        <template v-else-if="airportVal.mode_code == 255">飞行器异常</template>
        <template v-else-if="airportVal.mode_code == 256">未知状态</template>
      </span>
      <span v-else>未知状态</span>
    </div>
    <div class="content">
      <div class="content-title">
        {{ time }}
        <!-- 获取不到摄像头的内容 -->
        <!-- <span>机场摄像头未开</span> -->
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/wind_speed.png" alt="" />
          {{ airportVal.wind_speed }}m/s
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div">
          <img src="@/assets/images/flightoperation/environment_temperature.png" alt="" />
          {{ airportVal.environment_temperature }}℃
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/temperature.png" alt="" />
          {{ airportVal.temperature }}℃
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div">
          <img src="@/assets/images/flightoperation/rainfall.png" alt="" />
          <template v-if="airportVal.rainfall == 0">无降雨</template>
          <template v-else-if="airportVal.rainfall == 1">小雨</template>
          <template v-else-if="airportVal.rainfall == 2">中雨</template>
          <template v-else-if="airportVal.rainfall == 3">大雨</template>
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/rate.png" alt="" />
          {{ airportVal.network_state ? airportVal.network_state.rate : '0' }}KB/s
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div">
          <img src="@/assets/images/flightoperation/drone_in_dock.png" alt="" />
          {{ airportVal.drone_in_dock == 0 ? '舱外' : '舱内' }}
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/voltage.png" alt="" />
          {{ airportVal.drone_charge_state ? airportVal.drone_charge_state.capacity_percent : 0 }} %
        </div>
      </div>
      <!-- <div class="content-button">
        <a-button type="primary" style="background: #3a57e8" @click="emits('changeLive')"
          >机场直播</a-button
        >
        <a-button type="primary" style="background: #0a99eb" @click="emits('changeRemote')"
          >远程调试</a-button
        >
      </div> -->
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { getClient, createConnection } from '@/utils/mqtt';
  import { timestampToFormattedDate } from '@/utils/index';

  const emits = defineEmits(['changeLive', 'changeRemote']);
  const props = defineProps({
    msgData: Object,
  });
  console.log(props);
  const airportVal: any = ref({
    mode_code: 0,
    wind_speed: 0,
    environment_temperature: 0,
    temperature: 0,
    rainfall: 0,
    network_state: {
      rate: 0,
    },
    drone_in_dock: 0,
    drone_charge_state: {
      capacity_percent: 0,
    },
  });
  const time = ref(timestampToFormattedDate(new Date().getTime()));
  watch(
    () => props.msgData,
    (val) => {
      // network_state网络状态
      if (val.topic == 'thing/product/8UUXN5400A079H/osd' && val.message.data.network_state) {
        // console.log(val);
        airportVal.value = val.message.data;
        time.value = timestampToFormattedDate(val.message.timestamp);
      }
    },
  );
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .airport-information {
    position: absolute;
    top: 50px;
    left: 0;
    width: 260px;
    padding: 10px 20px;
    margin: 10px 0 0 10px;
    background: #0d0e15;
    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: #f2762d;
      }
    }
    .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%;
        img {
          width: 20px;
        }
      }
    }
    .content-button {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
