<template>
    <div class="container">
        <div class="header">
            <div class="title">研发中心环境实时监测系统</div>
        </div>
        <div class="ct-box">
            <div class="ct-sensor">
                <SensorNumLoop :sensorData="item" v-for="(item, index) in sensor_list" :key="index" />
            </div>
        </div>
        <div class="left-content left-right" ref="leftContentRef">
            <Lr1 :data="avg_temp_humi.four" />
            <Lr2 :deptId="'113'" />
            <Lr3 :public_list="noiseDataList.four.public_noise" :office_list="noiseDataList.four.office_noise" />
            <Lr4 :data="TVOC_CH2O['4f']" />
        </div>
        <div class="right-content left-right" ref="rightContentRef">
            <Lr1 :data="avg_temp_humi.five" />
            <Lr2 :deptId="'114'" />
            <Lr3 :public_list="noiseDataList.five.public_noise" :office_list="noiseDataList.five.office_noise" />
            <Lr4 :data="TVOC_CH2O['5f']" />
        </div>
        <div class="bottom-content" ref="bottomContentRef">

            <ZdScrollBoard ref="devList" :config="zd_config" class="zd-scroll-board" />
        </div>
        <div class="checkboxlist">
            <el-radio-group v-model="radioGroup1" :fill="'#105F88'" size="large">
                <el-radio-button label="四层" value="四层"></el-radio-button>

                <el-radio-button label="五层" value="五层"></el-radio-button>
            </el-radio-group>
        </div>
        <!-- <Sence /> -->
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import Sence from './component/Sence.vue';
import Lr1 from './component/Lr1.vue';
import Lr2 from './component/Lr2.vue';
import Lr3 from './component/Lr3.vue';
import Lr4 from './component/Lr4.vue';
import ZdScrollBoard from "@/components/ZdScrollBoard/index.vue";
import SensorNumLoop from './component/SensorNumLoop.vue';
import useR_D_EnvironmentStore from '@/store/modules/r_d_environment'
import { connectWebsocket, closeWebsocket} from "@/utils/websocket";
import { getSensorByDept } from '@/api/screen/R_D_Environment';


let R_D_EnvironmentStore = useR_D_EnvironmentStore()
let deltaY = ref(0)
let avg_temp_humi = computed(() => {
    return R_D_EnvironmentStore.getLayerData
})
let noiseDataList = computed(() => {
    return R_D_EnvironmentStore.getNoiseData
})
let TVOC_CH2O = reactive({
    '4f': {
        ch2o: [],
        tvoc: []
    },
    '5f': {
        ch2o: [],
        tvoc: []
    }
})
let sensor_list = computed(() => {
    let sensorData = R_D_EnvironmentStore.sensorData
    return [
        {

            component: 'SvgWendu',
            unit: '℃',
            type: 'AirTemp_Reg',
            limit: 40,
            list: sensorData['temp_humi']?.map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.temp,
                    status: sensor.status
                }
            })
        },
        {
            component: 'SvgShidu',
            unit: '%RH',
            type: 'AirHumi_Reg',
            limit: 90,
            list: sensorData['temp_humi']?.map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.humidity,
                    status: sensor.status
                }
            })
        },
        {
            component: 'SvgJiaquan',
            unit: 'mg/m³',
            type: 'CH2O',
            limit: 0.08,
            list: sensorData['TVOC_CH2O']?.filter(sensor => sensor.type === 'CH2O').map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.data,
                    status: sensor.status
                }
            })
        },
        {
            component: 'SvgTVOC',
            unit: 'mg/m³',
            type: 'TVOC',
            limit: 0.5,
            list: sensorData['TVOC_CH2O']?.filter(sensor => sensor.type === 'TVOC').map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.data,
                    status: sensor.status
                }
            })
        },
        {
            component: 'SvgPm25',
            unit: 'mg/m³',
            type: 'HIGH_PM25_Reg',
            limit: 30,
            list: sensorData['dust']?.filter(sensor => sensor.type === 'HIGH_PM25_Reg').map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.data,
                    status: sensor.status
                }
            })
        },
        {
            component: 'SvgPm10',
            unit: 'mg/m³',
            type: 'HIGH_PM10_Reg',
            limit: 30,
            list: sensorData['dust']?.filter(sensor => sensor.type === 'HIGH_PM10_Reg').map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.data,
                    status: sensor.status
                }
            })
        },
        {
            component: 'SvgZaosheng',
            unit: 'dB',
            type: 'Noise_Reg',
            limit: 85,
            list: sensorData['noise']?.map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.data,
                    status: sensor.status
                }
            })
        },
        {
            component: 'SvgYanwu',
            unit: 'mg/m³',
            type: 'Smoke_Reg',
            limit: 100,
            list: sensorData['Smoke']?.map(sensor => {
                return {
                    id: sensor.deviceId,
                    name: sensor.name,
                    value: sensor.data,
                    status: sensor.status
                }
            })
        }
    ]
})
const radioGroup1 = ref('四层')
let zd_config = ref({
    header: ['报警时间', '报警内容', '持续时长', '报警设备'],
    rowNum: 2,
    headerHeight: 50,
    headerBGC: 'transparent',
    oddRowBGC: 'transparent',
    evenRowBGC: 'transparent',
    columnWidth: [179, 179, 179, 179],
    data: [
        ['行1列1', '行1列2', '行1列3', '行1列4'],
        ['行2列1', '行2列2', '行2列3', '行2列4'],
        ['行3列1', '行3列2', '行3列3', '行3列4'],
        ['行4列1', '行4列2', '行4列3', '行4列4'],
    ]
})
function reqSensorByDept() {
    getSensorByDept('113,114').then(res => {
        if (res.code === 200) {
            let sensorData = res.data
            let temp_humi = sensorData.temp_humi
            let TVOC_CH2O = sensorData.TVOC_CH2O
            let temp = []
            temp_humi.map(item => {
                let index = temp.find(item2 => { return item2.deviceId == item.deviceId })
                if (!index) {
                    if (item.type === 'AirHumi_Reg') {
                        temp.push({
                            deviceId: item.deviceId,
                            humidity: item.data,
                            name: item.name,
                            label: item.label,
                            temp: '',
                            deptId: item.deptId,
                            deptName: item.deptName,
                            status: item.status
                        })

                    } else if (item.type === 'AirTemp_Reg') {
                        temp.push({
                            deviceId: item.deviceId,
                            humidity: '',
                            name: item.name,
                            label: item.label,
                            temp: item.data,
                            deptId: item.deptId,
                            deptName: item.deptName,
                            status: item.status
                        })
                    }
                } else {
                    if (item.type === 'AirHumi_Reg') {
                        index.humidity = item.data
                    } else if (item.type === 'AirTemp_Reg') {
                        index.temp = item.data
                    }
                }
            })
            let now = +new Date()
            TVOC_CH2O.map(item => {
                if (item.deptId == '113') {
                    if (item.type === 'CH2O') {
                        TVOC_CH2O['4f'].ch2o.push([now,item.data])
                    } else if (item.type === 'TVOC') {
                        TVOC_CH2O['4f'].tvoc.push([now,item.data])
                    }
                    
                } else if(item.deptId == '114') {
                    if (item.type === 'CH2O') {
                        TVOC_CH2O['5f'].ch2o.push([now,item.data])
                    } else if (item.type === 'TVOC') {
                        TVOC_CH2O['5f'].tvoc.push([now,item.data])
                    }
                }
            })
            sensorData.temp_humi = temp
            R_D_EnvironmentStore.sensorData = sensorData
            // noiseDataList.value = res.data
            // public_noise.value = noiseDataList.value.find(item => item.devName === '公共区域')
            // office_noise.value = noiseDataList.value.filter(item => item.devName !== '公共区域')
        }
    })
}





//socket
function getWebsocket(val) {
    try {
        let data = JSON.parse(val);

        if (data.type == "HUMI_TEMP") {
            let obj = data.msg;
            if (obj.hasOwnProperty('temp')) {
                let index = sensor_list.findIndex(sensor => sensor.type === 'AirTemp_Reg' && sensor.id === obj.temp.devId)
                if (index !== -1) {
                    sensor_list[index].value = obj.temp.value
                    sensor_list[index].status = "true"
                }

            }
            if (obj.hasOwnProperty('humi')) {
                let index = sensor_list.findIndex(sensor => sensor.type === 'AirHumi_Reg' && sensor.id === obj.humi.devId)
                if (index !== -1) {
                    sensor_list[index].value = obj.humi.value
                    sensor_list[index].status = "true"
                }

            }
        }
        if (data.type == "TVOC_CH2O") {
            let obj = data.msg;
            if (obj.hasOwnProperty('CH2O')) {
                let index = sensor_list.findIndex(sensor => sensor.type === 'CH2O' && sensor.id === obj.CH2O.devId)
                if (index !== -1) {
                    sensor_list[index].value = obj.CH2O.value
                    sensor_list[index].status = "true"
                }

            }
            if (obj.hasOwnProperty('TVOC')) {
                let index = sensor_list.findIndex(sensor => sensor.type === 'TVOC' && sensor.id === obj.TVOC.devId)
                if (index !== -1) {
                    sensor_list[index].value = obj.TVOC.value
                    sensor_list[index].status = "true"
                }

            }
        }
        //粉尘
        if (data.type == "dust") {
            let obj = data.msg;


            let index_pm25 = sensor_list.findIndex(sensor => sensor.type === 'HIGH_PM25_Reg' && sensor.id === obj.devId)
            let index_pm10 = sensor_list.findIndex(sensor => sensor.type === 'HIGH_PM10_Reg' && sensor.id === obj.devId)
            if (index_pm25 !== -1) {
                sensor_list[index_pm25].value = obj.pm25
                sensor_list[index_pm25].status = "true"
                dustData.pm25 = obj.pm25
            }
            if (index_pm10 !== -1) {
                sensor_list[index_pm10].value = obj.pm10
                sensor_list[index_pm10].status = "true"
                dustData.pm10 = obj.pm10
            }
        }
        //噪音
        if (data.type === "NOISE") {
            let obj = data.msg;
            let list_index = noiseDataList.value.findIndex(item => item.devId === obj.noise.devId)
            if (list_index !== -1) {
                noiseDataList.value[list_index].data = obj.noise.value
            } else {
                let index = sensor_list.findIndex(sensor => sensor.type === 'Noise_Reg' && sensor.id === obj.noise.devId)
                if (index !== -1) {
                    sensor_list[index].value = obj.noise.value
                    sensor_list[index].status = "true"
                }
            }
        }
    } catch (err) {
        console.log(err);
    }
}
function errWebsocket(val) {
    // console.log(val);
}

onMounted(() => {
    reqSensorByDept()
    window.addEventListener('wheel', function (event) {
        deltaY.value += event.deltaY
        if (deltaY.value <= -500 && deltaY.value >= -1000) {
            this.document.querySelector('.ct-box').style.transform = 'translateY(-200%) translateX(-50%)'
            this.document.querySelector('.left-content').style.transform = 'translateX(-100%)'
            this.document.querySelector('.right-content').style.transform = 'translateX(100%)'
            this.document.querySelector('.bottom-content').style.transform = 'translateY(100%)'
        }
        if (deltaY.value > -500 && deltaY.value < 0) {
            this.document.querySelector('.ct-box').style.transform = 'translateY(0) translateX(-50%)'
            this.document.querySelector('.left-content').style.transform = 'translateX(0)'
            this.document.querySelector('.right-content').style.transform = 'translateX(0)'
            this.document.querySelector('.bottom-content').style.transform = 'translateY(0)'

        }

        // if (deltaY.value >= 0) {
        //     deltaY.value = 0
        // }
    }, { passive: false });
    //connectWebsocket('','',getWebsocket, errWebsocket)
});
</script>

<style lang="scss" scoped>
.container {
    width: 1920px;
    height: 1080px;
    position: relative;
    // display: flex;
    // justify-content: center;
    align-items: center;
    // background-image: url('/src/assets/images/gif-bg.gif');
    background-repeat: no-repeat;
    /* 如果你不想让背景平铺 */
    background-size: cover;
    /* 或者其他你需要的大小设置 */
    background-position: center;

    .header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 72px;
        background-image: url('./image/u796.png');
        z-index: 2;

        .title {
            width: 100%;
            height: 72px;
            font-size: 36px;
            color: #2affff;
            text-align: center;
            line-height: 60px;
            font-weight: 700;
        }
    }

    .ct-box {
        position: absolute;
        top: 100px;
        left: 50%;
        transform: translateX(-50%);
        width: 825px;
        height: 180px;
        display: flex;
        z-index: 2;
        justify-content: space-between;
        transition: transform 1s;

        .ct-sensor {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }
    }

    .left-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 557px;
        height: 1080px;
        box-sizing: border-box;
        padding-top: 72px;
        background-image: url('./image/u801.png'), url('./image/u797.png');
        background-position: center, 0% 78%;
        background-repeat: no-repeat, no-repeat;
        padding-left: 30px;
        transition: transform 1s;
    }

    .left-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 30px;

    }

    .right-content {
        position: absolute;
        top: 0;
        right: 0;
        width: 557px;
        height: 1080px;
        box-sizing: border-box;
        padding-top: 72px;
        background-image: url('./image/u800.png'), url('./image/u798.png');
        background-position: center, 100% 78%;
        background-repeat: no-repeat, no-repeat;
        padding-right: 30px;
        transition: transform 1s;
        align-items: flex-end;
    }

    .bottom-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 1920px;
        height: 184px;
        background-image: url('./image/u799.png'), url('./image/u802.png');
        background-position: bottom, 50% 100%;
        background-repeat: no-repeat, no-repeat;
        transition: transform 1s;

        .zd-scroll-board {
            width: 716px;
            height: 120px, ;
            position: absolute;
            top: 28px;
            left: 50%;
            transform: translateX(-50%);

        }
    }
}

.checkboxlist {
    position: absolute;
    top: 2px;
    right: 60px;
    z-index: 999;

    :deep(.el-checkbox-button__inner) {
        font-size: 18px;
    }
}
</style>
