<template>
  <div style="margin-bottom: 10px;">
    <div style="display: flex;align-items: center;">
      <span style="margin-right: 10px;">远程调试</span>
      <a-switch :checked="props.deviceInfoList[props.controlSN].mode_code == 2" @change="openDebug"/>
    </div>
  </div>
  <div style="margin-bottom: 10px;">机场控制</div>
  <div style="margin-bottom: 20px;">
    <div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
      <div style="display: flex;align-items: center;">
        <div style="width: 21px;height: 21px;background-color: red;margin-right: 8px;"></div>
        <div>
          <div style="line-height: 22px;">{{getCoverState(props.deviceInfoList[props.controlSN].cover_state)}}</div>
          <div style="line-height: 22px;">舱盖</div>
        </div>
      </div>
      <div style="display: flex;align-items: center;">
        <a-button style="width: 70px;height: 30px;" @click="openCoverState" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}</a-button>
      </div>
    </div>
  </div>
  <div style="margin-bottom: 10px;">飞行器控制</div>
  <div>
    <div style="width: 252px;height: 58px;background-color: #f7f9fa;padding-left: 8px;padding-right: 8px;display: flex;justify-content: space-between;">
      <div style="display: flex;align-items: center;">
        <div style="width: 21px;height: 21px;background-color: red;margin-right: 8px;"></div>
        <div>
          <div style="line-height: 22px;">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? "关机": "开机"}}</div>
          <div style="line-height: 22px;">飞行器电源</div>
        </div>
      </div>
      <div style="display: flex;align-items: center;">
        <a-button style="width: 70px;height: 30px;" @click="openDeviceOnline" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">{{props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? '开机': '关机'}}</a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue"
import { clientPublish } from '@/utils/mqtt'
import { buildGUID } from '@/utils/uuid';
const props = defineProps(['deviceInfoList', 'controlSN'])

const openDebug = () => {
  let publishUrl = `thing/product/${props.controlSN}/services`
  let params = {
    method: props.deviceInfoList[props.controlSN].mode_code == 2? 'debug_mode_close': 'debug_mode_open',
    data: null,
  };
  clientPublish(publishUrl,params)
}
const getCoverState = (value) => {
  const options = {
    0: '关闭',
    1: '打开',
    2: '半开',
    3: '舱盖状态异常'
  }
  return options[value]
}
const openCoverState = () => {
  let publishUrl = `thing/product/${props.controlSN}/services`
  let params = {
    method: props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close',
    bid: buildGUID(),
    tid: buildGUID(),
    timestamp: new Date().getTime(),
    data: null,
  };
  clientPublish(publishUrl,params)
}
const openDeviceOnline = () => {
  let publishUrl = `thing/product/${props.controlSN}/services`
  let params = {
    method: props.deviceInfoList[props.controlSN].sub_device.device_online_status == 0? 'drone_open': 'drone_close',
    bid: buildGUID(),
    tid: buildGUID(),
    timestamp: new Date().getTime(),
    data: null,
  };
  clientPublish(publishUrl,params)
}
</script>

<style lang="scss" scoped></style>
