<template>
    <div class="inspection">
        <layout>
            <template #left>
                <div class="left_spection">
                    <div class="flex_spection" style="height: 100%;">
                        <HeadlineTag value="设备列表"></HeadlineTag>
                        <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
                            <el-input v-model="input" placeholder="按设备名称搜索" />
                        </div>
                        <div style="height: calc(100% - 85px);"
                            v-if="leftData.DeviceList && leftData.DeviceList.length > 0">
                            <equipment :resultData="leftData.DeviceList"></equipment>
                        </div>
                        <div style="height: calc(100% - 160px);" v-else>
                            <Empty :bottom="true"></Empty>
                        </div>
                        <!-- <div style="height: calc(100% - 160px);">
                                <Empty></Empty>
                            </div>
                            <div class="center_in">
                                <pagination :total="total" v-model:page="queryParams.pageNum"
                                    v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
                                    @pagination="getList" />
                            </div> -->
                    </div>
                </div>
            </template>
            <template #right>
                <div class="right_spection">
                    <div class="operation_spection">
                        <HeadlineTag type="right" value="设备运行统计"></HeadlineTag>
                        <div class="box_arch">
                            <div class="image_tubbiness">
                                <div class="work_num">{{ leftData.DeviceCount || 0 }}</div>
                                <div class="work_title">设备总数</div>
                            </div>
                            <div class="right_content">
                                <div class="work_week">
                                    <div class="color_line_xj" style="background-color: rgb(21, 213, 21);"></div>
                                    <span>正常状态:</span>{{ leftData.RunState || 0 }}
                                </div>
                                <div class="work_week">
                                    <div class="color_line_xj" style="background-color: rgb(196, 127, 19);"></div>
                                    <span>停止状态:</span>{{ leftData.StopState || 0 }}
                                </div>
                                <div class="work_week">
                                    <div class="color_line_xj" style="background-color: rgb(195, 56, 56);"></div>
                                    <span>故障状态:</span>{{ leftData.FaultState || 0 }}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="flex_spection" style="height: 33%;">
                        <HeadlineTag type="right" value="设备群控"></HeadlineTag>
                        <div class="box_arch">
                            <groupControl :resultData="leftData.DeviceList"
                                v-if="leftData.DeviceList && leftData.DeviceList.length > 0"></groupControl>
                            <Empty :bottom="true" v-else></Empty>
                        </div>
                    </div>
                    <div class="flex_spection" style="height: 33%;">
                        <HeadlineTag type="right" value="运行事件"></HeadlineTag>
                        <div class="box_arch">
                            <incident :resultData="leftData.DeviceList"
                                v-if="leftData.DeviceList && leftData.DeviceList.length > 0"></incident>
                            <Empty :bottom="true" v-else></Empty>
                        </div>
                    </div>
                </div>
            </template>
        </layout>
    </div>
</template>

<script setup>
import { getIntell } from "@/api/system/building"
import layout from "@/components/layout_/index.vue";
import HeadlineTag from '@/components/HeadlineTag'
import Empty from '@/components/Empty'
import waterdrop from '@/components/waterdrop'
import equipment from './equipment.vue'
import groupControl from './groupControl.vue'
import incident from './incident.vue'
const total = ref(0);
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
});
const input = ref('')
const intervalId = ref(null)
const leftData = ref({})
function getIntellData() {
    getIntell().then((res) => {
        if (res.code == 200) {
            leftData.value = res.data
        }
    })
}
// 生命周期
onMounted(() => {
    intervalId.value = setInterval(getIntellData, 10000);
    getIntellData()
});
onUnmounted(() => {
    clearInterval(intervalId.value);
})
</script>

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

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

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

.box_arch_point {
    height: calc(100% - 40px);
}

.operation_spection {
    height: 30%;
    flex: none;
    color: #fff;
}

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

.box_arch {
    display: flex;
    align-items: center;
    height: calc(100% - 40px);
}

.image_tubbiness {
    position: relative;
    flex: none;
    width: 200px;
    height: 85%;
    background: url("@/assets/images/tubbiness.png");
    background-size: 80% 80%;
    background-position: center center;
    background-repeat: no-repeat;

    .work_num {
        position: absolute;
        top: 32%;
        left: 0;
        right: 0;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
        background-image: -webkit-linear-gradient(top, rgb(89 178 255) 10%, rgb(229, 232, 236));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;

        span {
            font-size: 14px;
            color: rgb(158, 174, 195);
        }
    }

    .work_title {
        position: absolute;
        bottom: 20%;
        left: 0px;
        right: 0px;
        text-align: center;
    }
}

.right_content {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    .work_week {
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: bold;
        color: #fff;

        span {
            padding-right: 10px;
            font-size: 16px;
            color: rgb(214, 218, 222);
        }
    }
}

.color_line_xj {
    width: 6px;
    height: 6px;
    margin-right: 10px;
}
</style>
<style lang="scss" scoped>
.point_box :deep(.el-input__wrapper) {
    background-color: transparent !important;
    box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
}

.point_box :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409EFF inset !important;
}

.point_box :deep(.el-input__inner) {
    color: #ffffff !important;
}
</style>