<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/jichang.png" />
                <div class="textbox"> {{props.controlItems.typeId }} </div>
                <div class="textbox"> 机场名称: {{props.controlItems.name }} </div>
                <div class="textbox"> 主控SN: <span>{{zksn}}</span>
                    <a-button size="small" type="text" class="cursor" @click="copyToClipboard">
                        <template #icon><CopyOutlined /></template>
                    </a-button> 
                </div>
                <div class="textbox"> 铭牌SN: <span>{{mpsn}}</span>
                    <a-button size="small" type="text" class="cursor" @click="copyToClipboard1">
                        <template #icon><CopyOutlined /></template>
                    </a-button> 
                </div>
            </div>
            <!-- <div class="commonbox heightbox flex jc-sb ai-c">
                <div class="fw-b">保养服务</div>
                <div class="textbox cursor" title="距下次基础保养：144天"> 144天 <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 flex wrap">
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${(props.deviceInfoList[props.controlSN]?.acc_time / 60 / 60 / 24).toFixed(1)}天` || '--' }}</div>
                <div> 累计运行时长 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${props.deviceInfoList[props.controlSN]?.job_number}次` || '--' }}</div>
                <div> 作业架次 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div"> 
                    {{ `${(props.deviceInfoList[props.controlSN]?.position_state?.gps_number + props.deviceInfoList[props.controlSN]?.position_state?.rtk_number)}个` || '--' }}
                </div>
                <div> 机场搜星 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ sourceTypeOptions[props.deviceInfoList[props.controlSN]?.rtcm_info?.source_type] || '--'}}</div>
                <div> 标定状态 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${(props.deviceInfoList[props.controlSN].working_voltage / 1000).toFixed(1)}V` || '--'}}</div>
                <div> 供电电压 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div"> <GlobalOutlined />
                    {{ qualityOptions[props.deviceInfoList[props.controlSN]?.network_state?.quality] || '--'}}
                </div>
                <div> 网络 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ isConfiguredOptions[props.deviceInfoList[props.controlSN]?.alternate_land_point?.is_configured] || '--'}}</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">{{ airConditionerStateOptions[props.deviceInfoList[props.controlSN]?.air_conditioner?.air_conditioner_state] || '--'}}</div>
                <div> 空调状态 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${(props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].voltage / 1000).toFixed(1)}V` || '--' }}</div>
                <div> 蓄电池电压 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${props.deviceInfoList[props.controlSN]?.drone_battery_maintenance_info?.batteries[0].temperature}℃` || '--' }}</div>
                <div> 蓄电池温度 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${props.deviceInfoList[props.controlSN]?.temperature}℃` || '--' }}</div>
                <div> 舱内温度 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${props.deviceInfoList[props.controlSN]?.humidity}%RH` || '--' }}</div>
                <div> 舱内湿度 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${props.deviceInfoList[props.controlSN]?.environment_temperature}℃` || '--' }}</div>
                <div> 舱外温度 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ rainfallOptions[props.deviceInfoList[props.controlSN]?.rainfall] || '--' }}</div>
                <div> 雨量 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div">{{ `${props.deviceInfoList[props.controlSN]?.wind_speed}m/s` || '--' }}</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"> -- </div>
                <div> PoE 输出接口 </div>
            </div>
            <div class="device-item flex ai-c column">
                <div class="color2 fw-b div"> -- </div>
                <div> PoE 输出功率 </div>
            </div>
        </div>
    </div>

</template>

<script setup lang="ts">
import { ref, defineProps, onMounted, watch, nextTick } from "vue"
import { RightOutlined, DingtalkOutlined, GlobalOutlined, CopyOutlined,FileTextOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { airConditionerStateOptions, silentModeOptions, sourceTypeOptions, qualityOptions, isConfiguredOptions, rainfallOptions } from './util'
const props = defineProps(['deviceInfoList', 'controlSN', 'controlItems'])
const emits = defineEmits(['openWainInfo'])

const zksn = props.controlItems.sn
const mpsn = props.controlItems.gateWay

const copyToClipboard = () => {
    try {
        navigator.clipboard.writeText(zksn.value);
        message.success('复制成功！');
    } catch (err) {
        message.error('复制失败，请重试');
    }
}
const copyToClipboard1 = () => {
    try {
        navigator.clipboard.writeText(mpsn.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;
}
.wrap{
    flex-wrap: wrap
}
.column{
    flex-direction: column
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.jc-sb{
    justify-content: space-between
}
.pb-1{
    padding-bottom: 15px;
}
.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: 120px;
            height: 120px;
            margin-bottom: 8px;
        }
        .textbox{
            font-size: 12px;
            color: rgba(0,0,0,.45);
            text-align: center;
            line-height: 20px;
        }
    }
}
.device-item{
    width: 25%;
    height: 80px;
    color: rgba(0,0,0,.45);
    .div{
        line-height: 20px;
    }
}
</style>
  