<template>
  <div class="remote-debugging" v-if="airportVal" v-drag>
    <div class="title">
      <span>
        远程调试
        <a-switch v-model:checked="checked" @change="changeMode" />
      </span>
      <div @click="emits('changeRemote')">
        <CloseOutlined />
      </div>
    </div>
    <div class="content">
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/cover.png" alt="" />
          <div class="item-text">
            <span>{{
              cover_stateOptions[airportVal.cover_state]
                ? cover_stateOptions[airportVal.cover_state]
                : '关闭'
            }}</span>
            <i>舱盖</i>
          </div>
          <a-button @click="servicesRemote('cover_open')">开启</a-button>
        </div>
        <div class="item-div">
          <img src="@/assets/images/flightoperation/push_od.png" alt="" />
          <div class="item-text">
            <span>关闭</span>
            <i>推杆</i>
          </div>
          <a-button>开启</a-button>
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/voltage.png" alt="" />
          <div class="item-text">
            <span>空闲中</span>
            <i>机场系统</i>
          </div>
          <a-button>重启</a-button>
        </div>
        <div class="item-div">
          <img src="@/assets/images/flightoperation/4g.png" alt="" />
          <div class="item-text">
            <span>关闭</span>
            <i>增强图传</i>
          </div>
          <a-button>开启</a-button>
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/shut_down.png" alt="" />
          <div class="item-text">
            <span>关机</span>
            <i>飞行器电源</i>
          </div>
          <a-button>开机</a-button>
        </div>
        <div class="item-div">
          <img src="@/assets/images/flightoperation/charging.png" alt="" />
          <div class="item-text">
            <span>空闲</span>
            <i>飞行器充电</i>
          </div>
          <a-button>开启</a-button>
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/conditioner.png" alt="" />
          <div class="item-text">
            <span>空闲中</span>
            <i>空调模式</i>
          </div>
          <a-button>切换</a-button>
        </div>
        <div class="item-div">
          <img src="@/assets/images/flightoperation/storage.png" alt="" />
          <div class="item-text">
            <span>空闲中</span>
            <i>机场存储</i>
          </div>
          <a-button>格式化</a-button>
        </div>
      </div>
      <div class="content-item">
        <div class="item-div">
          <img src="@/assets/images/flightoperation/alarm.png" alt="" />
          <div class="item-text">
            <span>关闭</span>
            <i>声光报警</i>
          </div>
          <a-button>开启</a-button>
        </div>
        <div class="item-div">
          <img src="@/assets/images/flightoperation/battery.png" alt="" />
          <div class="item-text">
            <span>待命模式</span>
            <i>电池模式</i>
          </div>
          <a-button>计划</a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, ref, watch } from 'vue';
  import { getClient, createConnection } from '@/utils/mqtt';
  import { CloseOutlined } from '@ant-design/icons-vue';
  import { vDrag } from '@/utils/drag';
  import {
    servicesTopic,
    services_replyTopic,
    cover_opensStatus,
    cover_stateOptions,
    debug_mode_openOptions,
  } from '@/utils/debugging/remote';
  import { buildGUID } from '@/utils/uuid';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage } = useMessage();

  const emits = defineEmits(['changeRemote']);
  const props = defineProps({
    msgData: Object,
  });
  console.log(props);
  const checked = ref(false);
  const airportVal: any = ref({
    cover_state: 0,
  });
  watch(
    () => props.msgData,
    (val) => {
      if (val.topic == 'thing/product/8UUXN5400A079H/osd') {
        // console.log(val);
        airportVal.value.cover_state = val.message.data.cover_state;
      }
      if (val.topic == 'thing/product/8UUXN5400A079H/services_reply') {
        console.log(val);
        if (val.message.method == 'debug_mode_open') {
          createMessage.info(debug_mode_openOptions[val.message.data.output.status]);
        } else if (val.message.method == 'cover_open') {
          createMessage.info(cover_opensStatus[val.message.data.output.status]);
        }
      }
    },
  );
  const servicesRemote = (method: string) => {
    const querys = {
      method,
      bid: buildGUID(),
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      data: null,
    };
    console.log(querys);
    servicesTopic(querys);
  };
  const changeMode = (val) => {
    console.log(val);
    const querys = {
      method: 'debug_mode_open',
      bid: buildGUID(),
      tid: buildGUID(),
      timestamp: new Date().getTime(),
      data: null,
    };
    if (val) {
      querys.method = 'debug_mode_open';
    } else {
      querys.method = 'debug_mode_close';
    }
    servicesTopic(querys);
    services_replyTopic();
  };
  onMounted(() => {});
</script>
<style lang="less" scoped>
  .remote-debugging {
    position: absolute;
    top: 100px;
    left: 300px;
    width: 360px;
    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;
      display: flex;
      align-items: center;
      justify-content: space-between;
      div {
        cursor: pointer;
      }
    }
    .content-title {
      font-size: 14px;
      padding: 10px 0;
      span {
        font-size: 12px;
      }
    }
    .content-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #4e5778;
      padding: 10px 0;
      .item-div {
        width: 48%;
        display: flex;
        align-items: center;
        justify-content: space-around;
        box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
        border-radius: 2px;
        border: 1px solid #3b4154;
        img {
          width: 20px;
        }
        .item-text {
          width: 60px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          span {
            font-size: 12px;
            width: 60px;
            padding: 4px 0;
          }
          i {
            width: 60px;
            padding: 4px 0;
            font-size: 10px;
            display: block;
            border-top: 1px solid #4e5778;
            font-style: normal;
          }
        }
        button {
          text-align: center;
          background: none;
          height: 20px;
          padding: 0 4px;
          font-size: 12px;
          box-shadow: 0px 10px 30px 0px rgba(0, 0, 6, 0.15);
          border-radius: 2px;
          border: 1px solid #3b4154;
          color: #fff;
        }
      }
    }
    .content-button {
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
</style>
