<template>
    <div class="flex jc-sb ai-c controlcontainer">
        <div class="flex ai-c">
            <span class="mr-1 fw-b color2">远程调试</span>
            <a-switch :checked="props.deviceInfoList[props.controlSN].mode_code == 2" @change="openDebug"/>
        </div>
    </div>
    <div class="sectionbox flex column">
        <div class="videocontainer flex ai-c">
            <div class="mr-1 fw-b color2">机场控制</div>
            <a-button size="small" class="ml-4 cursor">
                <template #icon><VideoCameraOutlined /></template>
                <span class="fz-12">直播</span>
            </a-button>
        </div>
        <div class="flex wrap sectioncontainer">
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <TranslationOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            modeCodeOptions[props.deviceInfoList[props.controlSN].mode_code]
                          }}</span>
                        <span class="fz-12 color3">机场系统</span>
                    </div>
                </div>
                <a-button @click="changeState('device_reboot')" :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">重启</a-button>
            </div>
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <InsertRowAboveOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            getCoverState(props.deviceInfoList[props.controlSN].cover_state)
                          }}</span>
                        <span class="fz-12 color3">舱盖</span>
                    </div>
                </div>
                <a-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 class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <CloudDownloadOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22"><div class="show-span">
                            {{
                              props.deviceInfoList[props.controlSN].air_conditioner && airConditionerStateOptions[props.deviceInfoList[props.controlSN].air_conditioner.air_conditioner_state]
                            }}
                          </div></span>
                        <span class="fz-12 color3">空调</span>
                    </div>
                </div>
                <a-button 
                    v-if="props.deviceInfoList[props.controlSN]?.air_conditioner.air_conditioner_state != 0"                   
                    @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 >开启</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 class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <AudioMutedOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            silentModeOptions[props.deviceInfoList[props.controlSN].silent_mode]
                          }}</span>
                        <span class="fz-12 color3">静音模式</span>
                    </div>
                </div>
                <a-button                    
                    @click=""
                    :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
                    {{props.deviceInfoList[props.controlSN].silent_mode == 0? '开启': '关闭'}}
                </a-button>
            </div>
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <AlertOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            alarmStateOptions[props.deviceInfoList[props.controlSN].alarm_state]
                          }}</span>
                        <span class="fz-12 color3">机场声光报警</span>
                    </div>
                </div>
                <a-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 class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <FileProtectOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">
                            {{
                                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`
                              }}
                        </span>
                        <span class="fz-12 color3">机场存储</span>
                    </div>
                </div>
                <a-button                   
                    @click="changeState('device_format')"
                    :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
                    格式化
                </a-button>
            </div>
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <ControlOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">--</span>
                        <span class="fz-12 color3">机场增强图传</span>
                    </div>
                </div>
                <a-button                    
                    @click=""
                    :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
                    设置
                </a-button>
            </div>
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <VerifiedOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">解禁证书</span>
                        <span class="fz-12 color3">限飞解禁证书</span>
                    </div>
                </div>
                <a-button                   
                    @click=""
                    :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
                    设置
                </a-button>
            </div>
        </div>  
    </div>
    <div class="sectionbox flex column border-t">
        <div class="videocontainer flex ai-c">
            <div class="mr-1 fw-b color2">飞行器控制</div>
        </div>
        <div class="flex wrap sectioncontainer">
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <PoweroffOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            deviceOnlineStatusOptions[props.deviceInfoList[props.controlSN]?.sub_device?.device_online_status] || '--'
                          }}</span>
                        <span class="fz-12 color3">飞行器电源</span>
                    </div>
                </div>
                <a-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 class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <ApiOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            droneChargeStateOptions[props.deviceInfoList[props.controlSN]?.drone_charge_state?.state] || '--'
                          }}</span>
                        <span class="fz-12 color3">飞行器充电</span>
                    </div>
                </div>
                <a-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 class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <Icon icon="mdi:signal-4g" style="font-size: 21px;"/>
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            fourgLinkStateOptions[props.deviceInfoList[props.controlSN]?.wireless_link?.['4g_link_state']] || '--'
                          }}</span>
                        <span class="fz-12 color3">增强图传</span>
                    </div>
                </div>
                <a-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 class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <FileSyncOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22"> -- </span>
                        <span class="fz-12 color3">飞行器存储</span>
                    </div>
                </div>
                <a-button                    
                    @click="changeDeviceState('drone_format')"
                    :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
                    格式化
                </a-button>
            </div>
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <InteractionOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">{{
                            linkWorkmodeOptions[props.deviceInfoList[props.controlSN]?.wireless_link?.link_workmode] || '--'
                          }}</span>
                        <span class="fz-12 color3">飞行器增强图传</span>
                    </div>
                </div>
                <a-button         
                    @click=""
                    :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">
                    设置
                </a-button>
            </div>
        </div>
    </div>
    <div class="sectionbox flex column border-t">
        <div class="videocontainer flex ai-c">
            <div class="mr-1 fw-b color2 flex">
                <span>中继站控制</span>
                <div class="iconsbox cursor">
                    <InfoCircleOutlined />
                    <div class="hoverconatiner">
                        <div class="hoverbox flex">
                            <img class="img" src="/public/operation/bgimg2.png" />
                            <div>可通过中继发出的远程接入信号，远程连接中继，满足复杂场景下飞行器的图传要求</div>
                        </div>
                    </div>                    
                </div>
            </div>
        </div>
        <div class="flex wrap sectioncontainer">
            <div class="sectonsitem flex ai-c jc-sb">
                <div class="flex ai-c">
                    <LinkOutlined />
                    <div class="flex column ml-1">
                        <span class="fw-b color1 lineh22">未连接</span>
                        <span class="fz-12 color3">连接状态</span>
                    </div>
                </div>
                <a-button :disabled="props.deviceInfoList[props.controlSN].mode_code != 2">远程连接</a-button>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from "vue"
import Icon from '@/components/Icon/Icon.vue';
import { 
    VideoCameraOutlined,
    TranslationOutlined,
    InsertRowAboveOutlined,
    CloudDownloadOutlined,
    AudioMutedOutlined,
    AlertOutlined,
    FileProtectOutlined,
    ControlOutlined,
    VerifiedOutlined, 
    PoweroffOutlined,
    ApiOutlined,
    FileSyncOutlined,
    InteractionOutlined,
    LinkOutlined,
    InfoCircleOutlined
} from '@ant-design/icons-vue';
import { clientPublish } from '@/utils/mqtt'
import { buildGUID } from '@/utils/uuid';
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'])

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>
.cursor{
    cursor: pointer;
}
.flex{
    display: flex;
}
.wrap{
    flex-wrap: wrap
}
.column{
    flex-direction: column
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sb{
    justify-content: space-between;
}
.jc-sa{
    justify-content: space-around;
}
.ml-4{
    margin-left: 40px;
}
.ml-1{
    margin-left: 6px;
}
.mr-1{
    margin-right: 10px;
}
.mr-2{
    margin-right: 20px;
}
.fz-12{
    font-size: 12px;
}
.color1{
    color:#595959;
}
.color2{
    color: rgba(0,0,0,.85);
}
.color3{
    color: rgba(0,0,0,.45);
}
.fw-b{
    font-weight: 600;
}
.border-t{
    border-top: 1px solid #e8e8e8;
}
.controlcontainer{
    height: 54px;
    border-bottom: 1px solid #e8e8e8;
    padding: 0 16px;
}
.sectionbox{
    padding-bottom: 16px;
    .videocontainer{
        height: 46px;
        margin: 0 16px;
        .iconsbox{
            margin-left: 8px;
            position: relative;
            &:hover .hoverconatiner {
                display: block;
            }
            .hoverconatiner{
                display: none;
                .hoverbox{
                    box-shadow: 0 2px 8px rgba(0,0,0,.15);
                    padding: 6px 12px;
                    color: #515a6e;
                    background: #fff;
                    width: 400px;
                    position: absolute;
                    left: 50%;
                    top: -118px;
                    margin-left: -100px;
                    line-height: 1.5;
                    font-weight: 100;
                    z-index: 2;
                    &::before {
                        content: ""; /* 必须要有内容 */
                        position: absolute;
                        top: 105px; /* 向上偏移以使其位于容器上方 */
                        left: 25%; /* 水平居中 */
                        transform: translateX(-50%); /* 根据需要调整以完全居中 */
                        width: 0;
                        height: 0;
                        border-left: 10px solid transparent; /* 左透明边框 */
                        border-right: 10px solid transparent; /* 右透明边框 */
                        border-top: 10px solid #fff; /* 底部边框为三角形的高度和颜色 */
                    }
                    .img{
                        width: 156px;
                        height: 95px;
                        margin-right: 8px;
                    }
                }
            }
            
        }
    }
    .sectonsitem{
        width: 32%;
        padding: 0 8px;
        height: 58px;
        border-radius: 2px;
        background: #f7f9fa;
        margin-bottom: 8px;
        margin-right: 1%;
        .lineh22{
            line-height: 22px;
        }
    }
}
.sectioncontainer{
    padding-left: 15px;
    margin-top: 8px;
}
</style>
  