<template>
    <div class="flex sectionbox ai-c">
        <div class="title">飞行器</div>
        <div class="line"></div>
        <div class="status flex ai-c">
            <div class="pointer"></div>
            <div class="color1">飞行器已连接</div>
        </div>
        <div class="line"></div>
        <div class="descbox cursor">
            <span> N/A </span>
            <div class="hoverbox flex column">
                <div class="flex ai-c jc-c column statusbox">
                    <FileTextOutlined :style="{fontSize: '20px'}" />
                    <div>当前状态正常</div>
                </div>
                <div class="flex jc-sb fz-12">
                    <span>24h 历史告警</span>
                    <span class="cursor beforewarn" @click="openWainInfo">更早告警</span>
                </div>
                <div class="flex ai-c jc-c column statusbox">
                    <FileTextOutlined :style="{fontSize: '20px'}" />
                    <div>暂无历史告警</div>
                </div>
            </div>
        </div>
    </div>
    <div class="flex">
        <div class="leftbox">
            <div class="flex commonbox column ai-c pb-1">
                <img class="img" src="/public/operation/feixingqi.png" />
                <div class="textbox"> {{ props.controlItems.typeId }} </div>
                <div class="textbox"> 飞行器名称: {{ props.controlItems.name }} </div>
                <div class="textbox"> 飞行器SN: <span>{{fxqsn}}</span>
                    <a-button size="small" type="text" class="cursor" @click="copyToClipboard">
                        <template #icon><CopyOutlined /></template>
                    </a-button>  
                </div>
                <div class="textbox"> 电池SN: -- </div>
            </div>
            <!-- <div class="commonbox heightbox flex jc-sb ai-c">
                <div class="fw-b">保养服务</div>
                <div class="textbox cursor" title="距下次常规保养：496航时/326天"> 496航时/326天 <RightOutlined /> </div>
            </div>
            <div class="commonbox heightbox flex jc-sb ai-c">
                <div class="fw-b">行业无忧</div>
                <div class="textbox cursor" title="行业无忧到期日：2026-06-29"> 2026-06-29 <RightOutlined /> </div>
            </div> -->
        </div>
        <div class="flex-1">
            <div class="flex ai-c device-container">
                <div class="device-item flex ai-c column">
                    <div class="color2 fw-b div">{{ props.deviceInfoList[props.controlChildSN]?.wind_speed || '--' }}m/s</div>
                    <div> 累计飞行时长 </div>
                </div>
                <div class="device-item flex ai-c column">
                    <div class="color2 fw-b div">{{ props.deviceInfoList[props.controlChildSN]?.total_flight_sorties || '--' }}次</div>
                    <div> 飞行架次 </div>
                </div>
                <div class="device-item flex ai-c column">
                    <div class="color2 fw-b div"> -- </div>
                    <div> 图传 </div>
                </div>
                <div class="device-item flex ai-c column">
                    <div class="color2 fw-b div">{{ isFixedOptions[props.deviceInfoList[props.controlChildSN]?.position_state?.is_fixed] || '--' }}</div>
                    <div> 搜星状态 </div>
                </div>
            </div>
            <div class="flex middlebox">
                <div class="flex-1 flex column ai-c jc-c">
                    <div class="fw-b valbox">电池</div>
                    <div></div>
                </div>
                <div class="flex-1 flex column ai-c jc-c">
                    <div class="valbox">{{ props.deviceInfoList[props.controlChildSN]?.backup_battery.switch || '--' }}</div>
                    <div>循环次数</div>
                </div>
                <div class="flex-1 flex column ai-c jc-c">
                    <div class="valbox">{{ props.deviceInfoList[props.controlChildSN]?.battery_store_mode || '--' }}</div>
                    <div>高电量存储</div>
                </div>
                <div class="flex-1 flex column ai-c jc-c">
                    <div class="valbox">{{ props.deviceInfoList[props.controlChildSN]?.backup_battery.voltage || '--' }}</div>
                    <div>电压</div>
                </div>
                <div class="flex-1 flex column ai-c jc-c">
                    <div class="valbox">{{ props.deviceInfoList[props.controlChildSN]?.backup_battery.temperature || '--' }}</div>
                    <div>温度</div>
                </div>
                <div class="flex-1 flex column ai-c jc-c">
                    <div class="valbox"> -- </div>
                    <div>电量</div>
                </div>
            </div>
            <div class="flex wrap jc-sb ml-1 mt-1 mr-1">
                <div class="flex ai-c jc-sb feixingqibox">
                    <div>飞行器夜航灯</div>
                    <div class="fw-b color2">{{ nightLightsStateOptions[props.deviceInfoList[props.controlChildSN]?.night_lights_state] || '--' }}</div>
                </div>
                <div class="flex ai-c jc-sb feixingqibox">
                    <div class="flex ai-c">
                        <span>备降转移高</span>
                        <div class="iconsbox cursor">
                            <InfoCircleOutlined />
                            <div class="hoverbox">
                                <div>备降转移高（20 - 100m）是飞行器从机场上方飞向备降点时相对机场的高度</div>
                                <img class="img" src="/public/operation/bgimg1.png" />
                            </div>
                        </div>
                    </div>
                    <div class="fw-b color2">{{ props.deviceInfoList[props.controlSN]?.alternate_land_point?.safe_land_height || '--' }}</div>
                </div>
                <div class="flex ai-c jc-sb feixingqibox">
                    <div class="flex ai-c">
                        <span>限高</span>
                        <div class="iconsbox cursor">
                            <InfoCircleOutlined />
                            <div class="hoverbox">
                                <div>限高是约束飞行器相对机场的最大作业高度，限高范围（20 - 1500m）</div>
                            </div>
                        </div>
                    </div>
                    <div class="fw-b color2">{{ props.deviceInfoList[props.controlSN]?.height_limit || '--' }}米</div>
                </div>
                <div class="flex ai-c jc-sb feixingqibox">
                    <div class="flex ai-c">
                        <span>限远</span>
                        <div class="iconsbox cursor">
                            <InfoCircleOutlined />
                            <div class="hoverbox">
                                <div>限远（15 - 8000m）是约束飞行器相对机场的最大作业距离</div>
                            </div>
                        </div>
                    </div>
                    <div class="fw-b color2">关闭</div>
                </div>
                <div class="flex ai-c jc-sb feixingqibox">
                    <div class="flex ai-c">
                        <span>避障</span>
                        <div class="iconsbox cursor">
                            <InfoCircleOutlined />
                            <div class="hoverbox">
                                <div>飞行器的避障工作状态显示，可以快速开启/关闭飞行器避障</div>
                            </div>
                        </div>
                    </div>
                    <div class="fw-b color2">{{ (
                        props.deviceInfoList[props.controlChildSN]?.obstacle_avoidance?.horizon ||
                        props.deviceInfoList[props.controlChildSN]?.obstacle_avoidance?.upside ||
                        props.deviceInfoList[props.controlChildSN]?.obstacle_avoidance?.downside
                        )? '开启': '关闭' }}
                    </div>
                </div>
                <div class="flex ai-c jc-sb feixingqibox">
                    <div class="flex ai-c">
                        <span>运行模式</span>
                        <div class="iconsbox cursor">
                            <InfoCircleOutlined />
                            <div class="hoverbox">
                                <div>运行模式即飞行器电池充电管理模式，请根据您实际作业场景选择运行模式</div>
                            </div>
                        </div>
                    </div>
                    <div class="fw-b color2">
                        {{ childModeCodeOptions[props.deviceInfoList[props.controlChildSN]?.mode_code] || '--' }}
                        <!-- <EditOutlined class="cursor" :style="{color: '#2d8cf0'}" /> -->
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, defineProps, onMounted, watch, nextTick } from "vue"
import { RightOutlined, InfoCircleOutlined, CopyOutlined, FileTextOutlined, EditOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { modeCodeOptions,  isFixedOptions, nightLightsStateOptions, childModeCodeOptions } from './util'
const props = defineProps(['deviceInfoList', 'controlSN', 'controlChildSN', 'controlItems'])
const emits = defineEmits(['openWainInfo'])
const fxqsn = props.controlChildSN

const copyToClipboard = () => {
    try {
        navigator.clipboard.writeText(fxqsn.value);
        message.success('复制成功！');
    } catch (err) {
        message.error('复制失败，请重试');
    }
}
const openWainInfo = () =>{
    emits('openWainInfo')
}
</script>

<style lang="scss" scoped>
.cursor{
    cursor: pointer;
}
.flex{
    display: flex;
}
.flex-1{
    flex: 1;
}
.column{
    flex-direction: column
}
.wrap{
    flex-wrap: wrap;
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sb{
    justify-content: space-between
}
.pb-1{
    padding-bottom: 15px;
}
.ml-1{
    margin-left: 20px;
}
.mt-1{
    margin-top: 10px;
}
.mr-1{
    margin-right: 30px;
}
.fz-12{
    font-size: 12px;
}
.line{
    width: 1px;
    height: 20px;
    background: #e8e8e8;
    margin-left: 8px;
}
.color1{
    color:#595959;
}
.color2{
    color: rgba(0,0,0,.85);
}
.fw-b{
    font-weight: 600;
}
.sectionbox{
    height: 60px;
    .title{
        min-width: 42px;
        font-weight: 600;
    }
    .status{
        margin-right: 28px;
        .pointer{
            margin: 0 8px;
            width: 12px;
            height: 12px;
            border-radius: 12px;
            background: #0DED57;
        }
    }
    .descbox{
        margin-left: 8px;
        width: 200px;
        height: 20px;
        line-height: 20px;
        background: #bfbfbf;
        color: #fff;
        padding-left: 10px;
        position: relative;
        &:hover .hoverbox{
            display: block;
        }
        .hoverbox{
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
            padding: 12px;
            color: #515a6e;
            background: #fff;
            width: 204px;
            position: absolute;
            left: 50%;
            top: 25px;
            margin-left: -102px;
            line-height: 1.5;
            z-index: 2;
            cursor: default;
            display: none;
            .statusbox{
                padding: 16px 0;
            }
            .beforewarn{
                color: #2d8cf0;
            }
            &::before {
                content: ""; /* 必须要有内容 */
                position: absolute;
                top: -5px; /* 向上偏移以使其位于容器上方 */
                left: 13px; /* 水平居中 */
                width: 0;
                height: 0;
                border-left: 10px solid transparent; /* 左透明边框 */
                border-right: 10px solid transparent; /* 右透明边框 */
                border-bottom: 10px solid white; /* 底部边框为三角形的高度和颜色 */
            }
        }
    }
}
.leftbox{
    width: 260px;
    .heightbox{
        height: 40px;
        padding: 0 5px;
    }
    .commonbox{
        border-bottom: 1px solid #e8e8e8;
        .img{
            width: 88px;
            height: 88px;
            margin-bottom: 8px;
        }
        .textbox{
            font-size: 12px;
            color: rgba(0,0,0,.45);
            text-align: center;
            line-height: 20px;
        }
    }
}
.device-container{
    height: 86px;
    border-bottom: 1px solid #e8e8e8;
    .device-item{
        width: 25%;
        color: rgba(0,0,0,.45);
        .div{
            line-height: 20px;
        }
    }
}
.middlebox{
    color: rgba(0,0,0,.45);
    height: 50px;
    margin-top: 15px;
    .valbox{
        line-height: 20px;
    }
}
.feixingqibox{
    color: rgba(0,0,0,.45);
    height: 36px;
    background: #f7f9fa;
    border-radius: 2px;
    padding: 8px;
    width: 48%;
    margin-top: 8px;
    .iconsbox{
        margin-left: 8px;
        position: relative;
        &:hover .hoverbox {
            display: block;
        }
        .hoverbox{
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
            padding: 6px 12px;
            color: #515a6e;
            background: #fff;
            width: 250px;
            position: absolute;
            left: 50%;
            top: 22px;
            margin-left: -125px;
            line-height: 1.5;
            z-index: 2;
            display: none;
            &::before {
                content: ""; /* 必须要有内容 */
                position: absolute;
                top: -5px; /* 向上偏移以使其位于容器上方 */
                left: 50%; /* 水平居中 */
                transform: translateX(-50%); /* 根据需要调整以完全居中 */
                width: 0;
                height: 0;
                border-left: 10px solid transparent; /* 左透明边框 */
                border-right: 10px solid transparent; /* 右透明边框 */
                border-bottom: 10px solid white; /* 底部边框为三角形的高度和颜色 */
            }
            .img{
                width: 200px;
                margin-top: 10px;
            }
        }
    }
}
</style>
  