<template>
  <div class="takeoff-information">
    <div class="title"
      >指点飞行
      <div @click="emits('changeFlyToForm')">
        <CloseOutlined />
      </div>
    </div>
    <div class="content">
      <div class="content-edit">
        目标点纬度
        <div style="display: flex; flex-direction: column; align-items: center">
          <a-input v-model:value="data.points[0].latitude" readonly />
          <span style="margin-top: 4px; font-size: 12px; color: #f2762d">地图右键选择目标点</span>
        </div>
      </div>
      <div class="content-edit">
        目标点经度
        <div>
          <a-input v-model:value="data.points[0].longitude" readonly />
        </div>
      </div>
      <div class="content-edit">
        目标点高度
        <div>
          <a-input v-model:value="data.points[0].height" />
        </div>
      </div>
      <div class="content-button">
        <a-button
          type="primary"
          style="background: #0a99eb; width: 40%"
          @click="emits('changeFlyToForm')"
          >关闭</a-button
        >
        <a-button type="primary" style="background: #3a57e8; width: 40%" @click="takeOff"
          >起飞</a-button
        >
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { reactive, ref, watch, onMounted } from 'vue';
  import { EnvironmentOutlined, EditOutlined } from '@ant-design/icons-vue';
  import { buildGUID, uuid } from '@/utils/uuid';
  import { servicesTopicReize, services_replyTopicReize } from '@/utils/debugging/events';
  import { servicesTopic, services_replyTopic } from '@/utils/debugging/remote';
  import { vDrag } from '@/utils/drag';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { Map } from '../index';
  import { EventBus } from '@/utils/eventBus';

  const emits = defineEmits(['changeFlyToForm']);
  const props = defineProps({
    msgData: Object,
  });

  const data = reactive({
    fly_to_id: buildGUID(),
    max_speed: 10,
    points: [
      {
        latitude: 35.134615,
        longitude: 118.296676,
        height: 115,
      },
    ],
  });
  const takeOff = () => {
    const querys = {
      bid: buildGUID(),
      data: data,
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      method: 'fly_to_point',
    };
    console.log(querys);
    // 新的
    // servicesTopicReize(querys);
    // services_replyTopicReize();
    // 老的
    servicesTopic(querys);
    services_replyTopic();
    setTimeout(() => {
      emits('changeFlyToForm');
    }, 1000);
  };
  onMounted(() => {
    // 定位到某个经纬度
    EventBus.on('obtainTheLocation', (val: any) => {
      data.points[0].latitude = val.lat;
      data.points[0].longitude = val.lng;
    });
  });
</script>
<style lang="less" scoped>
  .takeoff-information {
    position: absolute;
    top: 120px;
    left: 300px;
    z-index: 999;
    width: 460px;
    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;
      display: flex;
      justify-content: space-between;
      align-items: center;
      span {
        cursor: pointer;
      }
    }
    .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;
    }
    .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;
        width: 260px;
        text-align: right;
        color: #fff;
        font-size: 12px;
      }
      ::v-deep .ant-input-number,
      .ant-input-number-group-wrapper {
        background: none;
        width: 260px !important;
        text-align: right;
        color: #fff;
        font-size: 12px;
      }
      ::v-deep .ant-input-number-group-wrapper {
        input {
          background: none;
          width: 260px !important;
          text-align: right;
          color: #fff;
          font-size: 12px;
        }
      }
      ::v-deep .ant-select-selector {
        background: none;
        width: 260px;
        text-align: right;
        color: #fff;
        font-size: 12px;
      }
    }
  }
</style>
