<template>
    <div class="titlesbox">所属项目：<span class="cursor">{{ `${props.controlItems.workSpaceName}` || '--' }}</span></div>
    <div class="contentBox">
        <JiChang :deviceInfoList="props.deviceInfoList" :controlSN="props.controlSN" :controlItems="props.controlItems" @openWainInfo="openWainInfo" />
    </div>
    <div class="contentBox">
        <FeiXingQi :deviceInfoList="props.deviceInfoList" :controlSN="props.controlSN" 
            :controlChildSN="props.controlChildSN" :controlItems="props.controlItems.uavList[0]"  @openWainInfo="openWainInfo" />
    </div>
    <div class="contentBox">
        <YuanChengTiaoShi :deviceInfoList="props.deviceInfoList" :controlSN="props.controlSN" :controlChildSN="props.controlChildSN" />
    </div>

</template>

<script setup lang="ts">
import { defineProps } from "vue"
import JiChang from './widget/JiChang.vue'
import FeiXingQi from './widget/FeiXingQi.vue'
import YuanChengTiaoShi from './widget/YuanChengTiaoShi.vue'
const emits = defineEmits(['openWainInfo'])
const props = defineProps(['deviceInfoList', 'controlSN', 'controlChildSN', 'controlItems'])
console.log('deviceInfoList', props.deviceInfoList)
const openWainInfo = () =>{
    emits('openWainInfo')
}

</script>

<style lang="scss" scoped>
.cursor{
    cursor: pointer;
}
.flex{
    display: flex;
}
.ai-c{
    align-items: center;
}
.jc-c{
    justify-content: center;
}
.titlesbox{
    position: absolute;
    left: 110px;
    top: 20px;
    color:#595959;
    span{
        color: #2d8cf0;
    }
}
.contentBox{
    border-radius: 2px;
    margin-bottom: 16px;
    background: #fff;
    padding: 8px 0 24px 8px;
}

</style>
  