<template>
    <div class="_energy">
        <layout>
            <template #left>
                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
                    <deviceList :resultData="leftData.IlluminatingDevice" />
                </div>
            </template>
            <template #content>
                <!-- <p>火灾报警</p> -->
            </template>
            <template #right>
                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
                    <running :resultData="fireDisasterData" style="flex: 1;" />
                    <switchAll :resultData="leftData.IlluminatingDevice" style="flex: 1;" />
                    <eventList :resultData="leftData.EventList" style="flex: 1;" />
                </div>
            </template>
        </layout>
    </div>
</template>

<script setup name="Air">
import { getIlluminating } from "@/api/system/illuminating"
import { getEnergy } from "@/api/system/energy"
import { getAccess } from "@/api/system/passageway"
import layout from "@/components/layout_/index.vue";
import deviceList from './modules/deviceList.vue'
import running from './modules/running.vue'
import switchAll from './modules/switchAll.vue'
import eventList from './modules/eventList.vue'

const intervalId = ref(null)
const leftData = ref({})
const MonitorList = ref([])
const fireDisasterData = ref([])
// 生命周期
onMounted(() => {
    intervalId.value = setInterval(getIlluminatingData, 10000);
    getIlluminatingData()
    getAccessData()
    getEnergyData()
});
onUnmounted(() => {
    clearInterval(intervalId.value);
})
function getIlluminatingData() {
    getIlluminating().then((res) => {
        if (res.code == 200) {
            leftData.value = res.data
        }
    })
}
function getAccessData() {
    getAccess().then((res) => {
        if (res.code == 200) {
            MonitorList.value = res.data.DeviceList
        }
    })
}

function getEnergyData() {
    getEnergy().then((res) => {
        if (res.code == 200) {
            fireDisasterData.value = res.data.OnedayPowerConsumption
        }
    })
}
</script>
<style lang="scss">
._energy {
    height: 100%;
}
</style>