<template>
  <div class="airport-information">
    <div class="title">无人机信息：<span>未连接</span></div>
    <div class="content">
      <div class="content-title">
        2025-06-27 00:00:00
        <span>临近或已接近夜晚</span>
      </div>
      <div class="content-item">
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          2.6m/s
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          35.3℃
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          2.6m/s
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          35.3℃
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          2.6m/s
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          35.3℃
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          2.6m/s
        </div>
        <a-divider type="vertical" style="border-color: #4e5778" />
        <div class="item-div">
          <CopyOutlined style="color: #fff; font-size: 14px" />
          35.3℃
        </div>
      </div>
      <div class="content-edit">
        飞行器夜航灯
        <div>
          <a-input v-model:value="data.navigationLight" />
          <EditOutlined style="color: #0a99eb; cursor: pointer" />
        </div>
      </div>
      <div class="content-edit">
        备降转移高度
        <div>
          <a-input v-model:value="data.altitude" readonly />
        </div>
      </div>
      <div class="content-edit">
        限高
        <div>
          <a-input v-model:value="data.heightPermitted" />
          <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">飞行控制</a-button>
        <a-button type="primary" style="background: #0a99eb">负载控制</a-button>
      </div>
      <div class="content-button">
        <a-button type="primary" style="background: #3a57e8; width: 100%">负载直播</a-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref, watch } from 'vue';
  import { CopyOutlined, EditOutlined } from '@ant-design/icons-vue';
  import { timestampToFormattedDate } from '@/utils/index';

  const props = defineProps({
    uavAllVal: Object,
  });
  const data = reactive({
    navigationLight: '关闭',
    altitude: '70m',
    heightPermitted: '100m',
    limitedRange: '500m',
    obstacleAvoidance: '500m',
  });
  const time = ref(timestampToFormattedDate(new Date().getTime()));
  watch(
    () => props.uavAllVal,
    (val) => {
      console.log(val);
      time.value = timestampToFormattedDate(val.timestamp);
    },
  );
</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;
    opacity: 0.9;
    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;
      opacity: 0.5;
      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%;
      }
    }
    .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: 100px;
        text-align: right;
        color: #fff;
        font-size: 12px;
      }
    }
  }
</style>
