<template>
    <div class="_energy">
        <layout>
            <template #left>
                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
                    <consume :resultData="leftData" style="height: 35%;" />
                    <running :resultData="MonitorList" style="flex: 1;" />
                    <!-- <carbonEmission :resultData="leftData" style="flex: 1;" /> -->
                </div>
            </template>
            <template #content>
                <!-- <p>视频</p> -->
            </template>
            <template #right>
                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
                    <sameDay :resultData="leftData" style="height: 35%;" />
                    <eventList :resultData="MonitorNms" style="flex: 1;" />
                </div>
            </template>
        </layout>
    </div>
</template>

<script setup name="Role">
import { getHikvision } from "@/api/system/monitor"
import layout from "@/components/layout_/index.vue";
import consume from './modules/consume.vue'
import running from './modules/running.vue'
import carbonEmission from './modules/carbonEmission.vue'
import sameDay from './modules/sameDay.vue'
import eventList from './modules/eventList.vue'

const route = useRoute()
const intervalId = ref(null)
const leftData = ref({})

const MonitorList = ref([{
    cameraName: '人脸枪击监控-1',
    cameraTypeName: '枪击',
    Id: 'on'
}, {
    cameraName: '消防室动环半球监控01',
    cameraTypeName: '半球',
    Id: 'on'
}, {
    cameraName: '消防室动环半球监控02',
    cameraTypeName: '半球',
    Id: '1'
}, {
    cameraName: '屋顶北球机',
    cameraTypeName: '球机',
    Id: 'on'
}, {
    cameraName: '屋顶西球机',
    cameraTypeName: '球机',
    Id: 'on'
}, {
    cameraName: '泵房大门枪击',
    cameraTypeName: '枪击',
    Id: '1'
}, {
    cameraName: '泵房西南角球机',
    cameraTypeName: '半球',
    Id: '1'
}, {
    cameraName: '泵房东南角球机',
    cameraTypeName: '球机',
    Id: 'on'
}, {
    cameraName: '泵房北墙球机',
    cameraTypeName: '球机',
    Id: 'on'
}, {
    cameraName: '泵房大门枪击',
    cameraTypeName: '枪击',
    Id: '1'
}, {
    cameraName: '室外大门口半球',
    cameraTypeName: '半球',
    Id: '1'
}, {
    cameraName: '水井外全景球机',
    cameraTypeName: '球机',
    Id: 'on'
}, {
    cameraName: '水井东南角球机',
    cameraTypeName: '球机',
    Id: 'on'
}, {
    cameraName: '水井西南角枪击',
    cameraTypeName: '枪击',
    Id: '1'
}])
const MonitorNms = ref([{
    Name: '人脸枪击监控-1',
    InspectResult: 0,
    Id: 'on'
}, {
    Name: '消防室动环半球监控01',
    InspectResult: 1,
    Id: 'on'
}, {
    Name: '消防室动环半球监控02',
    InspectResult: 5,
    Id: '1'
}, {
    Name: '屋顶北球机',
    InspectResult: 1,
    Id: 'on'
}, {
    Name: '屋顶西球机',
    InspectResult: 1,
    Id: 'on'
}, {
    Name: '泵房大门枪击',
    InspectResult: 1,
    Id: '1'
}, {
    Name: '泵房西南角球机',
    InspectResult: 3,
    Id: '1'
}, {
    Name: '泵房东南角球机',
    InspectResult: 5,
    Id: 'on'
}, {
    Name: '泵房北墙球机',
    InspectResult: 4,
    Id: 'on'
}, {
    Name: '泵房大门枪击',
    InspectResult: 1,
    Id: '1'
}, {
    Name: '室外大门口半球',
    InspectResult: 3,
    Id: '1'
}, {
    Name: '水井外全景球机',
    InspectResult: 2,
    Id: 'on'
}, {
    Name: '水井东南角球机',
    InspectResult: 6,
    Id: 'on'
}, {
    Name: '水井西南角枪击',
    InspectResult: 6,
    Id: '1'
}])
// 生命周期
onMounted(() => {
    // getHikvisionData()
});
onUnmounted(() => {
    clearInterval(intervalId.value);
})
function getHikvisionData() {
    clearInterval(intervalId.value);
    getHikvision().then((res) => {
        if (res.code == 200) {
            leftData.value = res.data
            if (route.path == '/system/video') {
                intervalId.value = setInterval(() => {
                    getHikvisionData()
                    clearInterval(intervalId.value);
                }, 10000);
            } else {
                clearInterval(intervalId.value);
                intervalId.value = null
            }
        }
    }).catch(() => {
        if (route.path == '/system/video') {
            intervalId.value = null
            getHikvisionData()
        }
    })
}
</script>
<style lang="scss">
._energy {
    height: 100%;
}
</style>