<template>
  <div class="setting-control-title">机场</div>
  <div class="setting-control-list" style="gap: 0px;">
    <div class="show-info-item">
      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN]?.acc_time / 60 / 60 / 24).toFixed(1)}天` || '--' }}</div>
      <div class="info-label">累计运行时长</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.job_number}次` || '--' }}</div>
      <div class="info-label">作业架次</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN]?.position_state?.gps_number + props.deviceInfoList[props.controlSN]?.position_state?.rtk_number)}个` || '--' }}</div>
      <div class="info-label">机场搜星</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ sourceTypeOptions[props.deviceInfoList[props.controlSN]?.rtcm_info?.source_type] || '--'}}</div>
      <div class="info-label">标定状态</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN].working_voltage / 1000).toFixed(1)}V` || '--'}}</div>
      <div class="info-label">供电电压</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ qualityOptions[props.deviceInfoList[props.controlSN]?.network_state?.quality] || '--'}}</div>
      <div class="info-label">网络</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ isConfiguredOptions[props.deviceInfoList[props.controlSN]?.alternate_land_point?.is_configured] || '--'}}</div>
      <div class="info-label">备降点</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">--</div>
      <div class="info-label">进离场航线</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ airConditionerStateOptions[props.deviceInfoList[props.controlSN]?.air_conditioner?.air_conditioner_state] || '--'}}</div>
      <div class="info-label">空调状态</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${(props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].voltage / 1000).toFixed(1)}V` || '--' }}</div>
      <div class="info-label">蓄电池电压</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].temperature}℃` || '--' }}</div>
      <div class="info-label">蓄电池温度</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.temperature}℃` || '--' }}</div>
      <div class="info-label">舱内温度</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.humidity}%RH` || '--' }}</div>
      <div class="info-label">舱内湿度</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.environment_temperature}℃` || '--' }}</div>
      <div class="info-label">舱外温度</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ rainfallOptions[props.deviceInfoList[props.controlSN]?.rainfall] || '--' }}</div>
      <div class="info-label">雨量</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ `${props.deviceInfoList[props.controlSN]?.wind_speed}m/s` || '--' }}</div>
      <div class="info-label">风速</div>
    </div>
  </div>
  <div class="setting-control-title">飞行器</div>
  <div class="setting-control-list" style="gap: 0px;">
    <div class="show-info-item">
      <div class="info-value">{{ props.deviceInfoList[props.controlChildSN]?.wind_speed || '--' }}m/s</div>
      <div class="info-label">累计飞行时长</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ props.deviceInfoList[props.controlChildSN]?.total_flight_sorties || '--' }}次</div>
      <div class="info-label">飞行架次</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">--</div>
      <div class="info-label">图传</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ isFixedOptions[props.deviceInfoList[props.controlChildSN]?.position_state?.is_fixed] || '--' }}</div>
      <div class="info-label">搜星状态</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ nightLightsStateOptions[props.deviceInfoList[props.controlChildSN]?.night_lights_state] || '--' }}</div>
      <div class="info-label">飞行器夜航灯</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ props.deviceInfoList[props.controlSN]?.alternate_land_point?.safe_land_height || '--' }}</div>
      <div class="info-label">备降转移高度</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ props.deviceInfoList[props.controlSN]?.height_limit || '--' }}米</div>
      <div class="info-label">限高</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">--</div>
      <div class="info-label">限远</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ (
        props.deviceInfoList[props.controlChildSN]?.obstacle_avoidance?.horizon ||
        props.deviceInfoList[props.controlChildSN]?.obstacle_avoidance?.upside ||
        props.deviceInfoList[props.controlChildSN]?.obstacle_avoidance?.downside
        )? '开启': '关闭' }}</div>
      <div class="info-label">避障</div>
    </div>
    <div class="show-info-item">
      <div class="info-value">{{ childModeCodeOptions[props.deviceInfoList[props.controlChildSN]?.mode_code] || '--' }}</div>
      <div class="info-label">运行模式</div>
    </div>
  </div>
  <div class="open-control-div">
    <div class="control-content">
      <span class="open-title">远程调试</span>
      <a-switch :checked="props.deviceInfoList[props.controlSN].mode_code == 2" @change="openDebug"/>
    </div>
  </div>
  <div class="setting-control-title">机场控制</div>
  <div class="setting-control-list">
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="tabler:drone" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              modeCodeOptions[props.deviceInfoList[props.controlSN].mode_code]
            }}
          </div>
          <div class="show-span">机场系统</div>
        </div>
      </div>
      <div class="button-div">
        <a-button class="control-button" @click="changeState('device_reboot')" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">重启</a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="tabler:capture" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              getCoverState(props.deviceInfoList[props.controlSN].cover_state)
            }}
          </div>
          <div class="show-span">舱盖</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click="changeState(props.deviceInfoList[props.controlSN].cover_state == 0? 'cover_open': 'cover_close')"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          {{props.deviceInfoList[props.controlSN].cover_state == 0? '打开': '关闭'}}
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="streamline:travel-hotel-air-conditioner-heating-ac-air-hvac-cool-cooling-cold-hot-conditioning" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              props.deviceInfoList[props.controlSN].air_conditioner && airConditionerStateOptions[props.deviceInfoList[props.controlSN].air_conditioner.air_conditioner_state]
            }}
          </div>
          <div class="show-span">空调</div>
        </div>
      </div>
      <div class="button-div">
        <a-button 
          v-if="props.deviceInfoList[props.controlSN]?.air_conditioner.air_conditioner_state != 0"
          class="control-button"
          @click="changeState('air_conditioner_mode_switch',0)"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          停止
        </a-button>
        <a-dropdown v-else placement="bottom" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          <a-button class="control-button">开启</a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="changeState('air_conditioner_mode_switch',1)">制冷</a-menu-item>
              <a-menu-item @click="changeState('air_conditioner_mode_switch',2)">制热</a-menu-item>
              <a-menu-item @click="changeState('air_conditioner_mode_switch',3)">除湿</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="material-symbols:volume-off" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              silentModeOptions[props.deviceInfoList[props.controlSN].silent_mode]
            }}
          </div>
          <div class="show-span">静音模式</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click=""
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          {{props.deviceInfoList[props.controlSN].silent_mode == 0? '开启': '关闭'}}
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="mdi:alarm-light-outline" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              alarmStateOptions[props.deviceInfoList[props.controlSN].alarm_state]
            }}
          </div>
          <div class="show-span">机场声光报警</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click="changeState('alarm_state_switch',props.deviceInfoList[props.controlSN].alarm_state == 0? 1: 0)"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          {{props.deviceInfoList[props.controlSN].alarm_state == 0? '开启': '关闭'}}
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              props.deviceInfoList[props.controlSN].storage && 
                `${(props.deviceInfoList[props.controlSN].storage.used / 1000 / 1024).toFixed(1)}/${(props.deviceInfoList[props.controlSN].storage.total / 1000 / 1024).toFixed(1)}GB`
            }}
          </div>
          <div class="show-span">机场存储</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click="changeState('device_format')"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          格式化
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="icon-park-outline:storage-card-one" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">--</div>
          <div class="show-span">机场增强图传</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click=""
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          设置
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="carbon:certificate-check" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">解禁证书</div>
          <div class="show-span">限飞解禁证书</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click=""
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          设置
        </a-button>
      </div>
    </div>
  </div>
  <div class="setting-control-title">飞行器控制</div>
  <div class="setting-control-list">
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="material-symbols:power-settings-new" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              deviceOnlineStatusOptions[props.deviceInfoList[props.controlSN]?.sub_device?.device_online_status] || '--'
            }}
          </div>
          <div class="show-span">飞行器电源</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click="changeDeviceState(props.deviceInfoList[props.controlSN]?.sub_device?.device_online_status == 0? 'drone_open': 'drone_close')"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          {{props.deviceInfoList[props.controlSN]?.sub_device?.device_online_status == 0? '开机': '关机'}}
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="mdi:battery-high" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              droneChargeStateOptions[props.deviceInfoList[props.controlSN]?.drone_charge_state?.state] || '--'
            }}
          </div>
          <div class="show-span">飞行器充电</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click="changeDeviceState(props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? 'charge_open': 'charge_close')"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          {{props.deviceInfoList[props.controlSN]?.drone_charge_state?.state == 0? '充电': '停止'}}
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="mdi:signal-4g" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              fourgLinkStateOptions[props.deviceInfoList[props.controlSN]?.wireless_link?.['4g_link_state']] || '--'
            }}
          </div>
          <div class="show-span">增强图传</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click="changeDeviceState('sdr_workmode_switch',props.deviceInfoList[props.controlSN]?.wireless_link?.['4g_link_state'] == 0? 1: 0, 'link_workmode')"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          {{props.deviceInfoList[props.controlSN]?.wireless_link?.['4g_link_state'] == 0? '开启': '关闭'}}
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="icon-park-twotone:storage-card-two" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            --
          </div>
          <div class="show-span">飞行器存储</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click="changeDeviceState('drone_format')"
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          格式化
        </a-button>
      </div>
    </div>
    <div class="control-item">
      <div class="info-div">
        <div class="icon">
          <Icon icon="ph:sim-card-duotone" style="font-size: 21px;"/>
        </div>
        <div>
          <div class="show-span">
            {{
              linkWorkmodeOptions[props.deviceInfoList[props.controlSN]?.wireless_link?.link_workmode] || '--'
            }}
          </div>
          <div class="show-span">飞行器增强图传</div>
        </div>
      </div>
      <div class="button-div">
        <a-button
          class="control-button"
          @click=""
          :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
          设置
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue"
import { clientPublish } from '@/utils/mqtt'
import { buildGUID } from '@/utils/uuid';
import Icon from '@/components/Icon/Icon.vue';
import { modeCodeOptions, deviceOnlineStatusOptions, coverStateOptions, airConditionerStateOptions, silentModeOptions,
   alarmStateOptions, droneChargeStateOptions, fourgLinkStateOptions, linkWorkmodeOptions, sourceTypeOptions, qualityOptions,
   isConfiguredOptions, rainfallOptions, isFixedOptions, nightLightsStateOptions, childModeCodeOptions } from './util'
const props = defineProps(['deviceInfoList', 'controlSN', 'controlChildSN'])
console.log(props.deviceInfoList,props.controlChildSN)

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 changeState = (method,action?) => {
  let publishUrl = `thing/product/${props.controlSN}/services`
  let params = {
    method: method,
    bid: buildGUID(),
    tid: buildGUID(),
    timestamp: new Date().getTime(),
    data: action? { action }: null,
  };
  clientPublish(publishUrl,params)
}
const changeDeviceState = (method, action?, type?) => {
  let publishUrl = `thing/product/${props.controlSN}/services`
  let params = {
    method,
    bid: buildGUID(),
    tid: buildGUID(),
    timestamp: new Date().getTime(),
    data: type? { [type]: action }: action? { action }: null,
  };
  clientPublish(publishUrl,params)
}
</script>

<style lang="scss" scoped>
.open-control-div{
  margin-bottom: 10px;
  .control-content{
    display: flex;
    align-items: center;
    .open-title{
      margin-right: 10px;
    }
  }
}
.setting-control-title{
  margin-bottom: 10px;
}
.setting-control-list{
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  .control-item{
    width: 252px;
    height: 58px;
    background-color: #f7f9fa;
    padding-left: 8px;
    padding-right: 8px;
    display: flex;
    justify-content: space-between;
  }
  .info-div{
    display: flex;
    align-items: center;
    .icon{
      width: 21px;
      height: 21px;
      margin-right: 8px;
    }
    .show-span{
      line-height: 22px;
    }
  }
  .button-div{
    display: flex;
    align-items: center;
    .control-button{
      width: 70px;
      height: 30px;
    }
  }
  .show-info-item{
    width: 190px;
    height: 79px;
    .info-value{
      display: flex;
      justify-content: center;
      font-size: 14px;
      font-weight: 600;
      line-height: 20px;
    }
    .info-label{
      display: flex;
      justify-content: center;
      font-size: 14px;
      line-height: 20px;
      color: rgba(0,0,0,0.8);
    }
  }
}
</style>
