<template>
  <div class="takeoff-information">
    <div class="title"
      >一键起飞
      <div @click="emits('changeTakeOffForm')">
        <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.target_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.target_longitude" readonly />
        </div>
      </div>
      <div class="content-edit">
        目标点高度
        <div>
          <a-input v-model:value="data.target_height" />
        </div>
      </div>
      <div class="content-edit">
        安全起飞高度
        <div>
          <a-input v-model:value="data.security_takeoff_height" />
        </div>
      </div>
      <div class="content-edit">
        返航模式
        <div>
          <a-select v-model:value="data.rth_mode" :options="rth_modeOptions" />
        </div>
      </div>
      <div class="content-edit">
        返航高度
        <div>
          <a-input v-model:value="data.rth_altitude" />
        </div>
      </div>
      <div class="content-edit">
        遥控器失控动作
        <div>
          <a-select v-model:value="data.rc_lost_action" :options="rc_lost_actionOptions" />
        </div>
      </div>
      <div class="content-edit">
        指点飞行失控动作
        <div>
          <a-select
            v-model:value="data.commander_mode_lost_action"
            :options="commander_mode_lost_actionOptions"
          />
        </div>
      </div>
      <div class="content-edit">
        指点飞行模式
        <div>
          <a-select
            v-model:value="data.commander_flight_mode"
            :options="commander_flight_modeOptions"
          />
        </div>
      </div>
      <div class="content-edit">
        指点飞行高度
        <div>
          <a-input v-model:value="data.commander_flight_height" />
        </div>
      </div>

      <div class="content-button">
        <a-button
          type="primary"
          style="background: #0a99eb; width: 40%"
          @click="emits('changeTakeOffForm')"
          >关闭</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 { timestampToFormattedDate } from '@/utils/index';
  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(['changeTakeOffForm']);
  const props = defineProps({
    msgData: Object,
  });
  const data = reactive({
    flight_id: uuid(14, 14),
    target_latitude: 35.134615,
    target_longitude: 118.296676,
    target_height: 115,
    security_takeoff_height: 100,
    rth_altitude: 115,
    rth_mode: 1,
    max_speed: 10,
    commander_flight_mode: 1,
    rc_lost_action: 2,
    commander_mode_lost_action: 1,
    commander_flight_height: 115.0,
    flight_safety_advance_check: 1,
    // simulate_mission: {
    //   is_enable: 1, // 是否开启模拟任务{"0":"不开启","1":"开启"}
    //   latitude: 35.143567, // 模拟器纬度
    //   longitude: 118.305623, // 模拟器经度
    // },
  });
  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()));
  const rth_modeOptions = ref([
    { label: '智能高度', value: 0 },
    { label: '设定高度', value: 1 },
  ]);
  const rc_lost_actionOptions = ref([
    { label: '悬停', value: 0 },
    { label: '着陆(降落)', value: 1 },
    { label: '返航', value: 2 },
  ]);
  const commander_mode_lost_actionOptions = ref([
    { label: '继续执行指点飞行任务', value: 0 },
    { label: '退出指点飞行任务，执行普通失控行为', value: 1 },
  ]);
  const commander_flight_modeOptions = ref([
    { label: '智能高度飞行', value: 0 },
    { label: '设定高度飞行', value: 1 },
  ]);
  watch(
    () => props.msgData,
    (val) => {
      if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
        if (
          val.message.data.sub_device ||
          val.message.data.drone_battery_maintenance_info ||
          val.message.data.wireless_link
        ) {
          // console.log(val);
          uavInformation.value = val.message.data;
          time.value = timestampToFormattedDate(val.message.timestamp);
        }
      }
    },
  );
  const takeOff = () => {
    const querys = {
      bid: buildGUID(),
      data: data,
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      method: 'takeoff_to_point',
    };
    console.log(querys);
    // 新的
    // servicesTopicReize(querys);
    // services_replyTopicReize();
    // 老的
    servicesTopic(querys);
    services_replyTopic();
    setTimeout(() => {
      emits('changeTakeOffForm');
    }, 1000);
  };
  onMounted(() => {
    // 定位到某个经纬度
    EventBus.on('obtainTheLocation', (val: any) => {
      data.target_latitude = val.lat;
      data.target_longitude = val.lng;
    });
  });
</script>
<style lang="less" scoped>
  .takeoff-information {
    display: flex;
    flex-direction: column;
    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>
