<template>
    <div class="guard_flow">
        <layout>
            <template #left>
                <div class="left_guard_flow">
                    <div style="height: 500px;">
                        <HeadlineTag value="门禁设备"></HeadlineTag>
                        <div class="box_arch">
                            <equipment :resultData="leftData"></equipment>
                        </div>
                    </div>
                    <div class="flex_spection">
                        <HeadlineTag value="非法侵入统计"></HeadlineTag>
                        <div class="box_arch" style="pointer-events: none;">
                            <inbreak :resultData="leftData"></inbreak>
                        </div>
                    </div>
                </div>
            </template>
            <template #right>
                <div class="right_guard_flow">
                    <div class="flex_spection">
                        <HeadlineTag type="right" value="今日出勤统计"></HeadlineTag>
                        <div class="box_arch">
                            <passable :resultData="leftData"></passable>
                        </div>
                    </div>
                    <div class="flex_spection">
                        <HeadlineTag type="right" value="出入记录统计"></HeadlineTag>
                        <div class="box_arch">
                            <alleyway :resultData="leftData"></alleyway>
                        </div>
                    </div>
                    <div class="flex_spection" style="height: 33%;">
                        <HeadlineTag type="right" value="实时告警与通知"></HeadlineTag>
                        <div class="box_arch">
                            <inform :resultData="leftData.devices"
                                v-if="leftData.devices && leftData.devices.length > 0"></inform>
                            <Empty :bottom="true" v-else></Empty>
                        </div>
                    </div>
                </div>
            </template>
        </layout>
    </div>
</template>

<script setup>
import { getAccess } from "@/api/system/access"
import layout from "@/components/layout_/index.vue";
import HeadlineTag from '@/components/HeadlineTag'
import alleyway from './alleyway'
import equipment from './equipment'
import inbreak from './inbreak'
import passable from './passable'
import inform from './inform'
import Empty from '@/components/Empty'
const route = useRoute()

// 生命周期
onMounted(() => {
    // getAccessData()
});
onUnmounted(() => {
    clearInterval(intervalId.value);
})
const intervalId = ref(null)
const leftData = ref({})
function getAccessData() {
    clearInterval(intervalId.value);
    getAccess().then((res) => {
        if (res.code == 200) {
            leftData.value = res.data
            if (route.path == '/system/entranceguard') {
                intervalId.value = setInterval(getAccessData, 10000);
            } else {
                clearInterval(intervalId.value);
            }
        }
    }).catch((err) => {
        if (route.path == '/system/entranceguard') {
            intervalId.value = null
            getAccessData()
        }
    });
}
</script>

<style scoped lang="scss">
.guard_flow {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.left_guard_flow {
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.right_guard_flow {
    position: absolute;
    right: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.flex_spection {
    flex: 1;
    color: #fff;
}

.box_arch {
    width: 100%;
    height: calc(100% - 40px);
}
</style>