<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 :data="humi" />
            <Lr3 :public_list="public_noise" :office_list="office_noise" />
            <Lr4 />
        </div>
        <div class="right-content left-right" ref="rightContentRef">            
            <Lr1 :data="avg_temp_humi.five" />
            <Lr2 :data="humi" />
            <Lr3 :public_list="public_noise" :office_list="office_noise" />
            <Lr4 />
        </div>
        <div class="bottom-content" ref="bottomContentRef">
            
          <ZdScrollBoard ref="devList" :config="zd_config" class="zd-scroll-board"/>
        </div>

        <Sence />
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } 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 { getNoiseData, getTopData, getSensorDateHourByType } from '@/api/screen/R_D_Environment';


let deltaY = ref(0)
let avg_temp_humi = reactive({
    four: {
        title: '研发中心四楼',
        temp: 25.5,
        humi: 60
    },
    five: {
        title: '研发中心五楼',
        temp: 25.5,
        humi: 60
    }
})
let noiseDataList = ref()
let public_noise = ref({})
let office_noise = ref([])
let humi = ref({
    "Humiture": [
        {
            "devId": "eb98cb70-158f-11ee-b4df-a9653aef169c",
            "name": "服装军团",
            "temp": "15.4",
            "humidity": "14.6",
            "status": true
        },
        {
            "devId": "50633690-158f-11ee-b4df-a9653aef169c",
            "name": "家纺军团",
            "temp": "16.3",
            "humidity": "54.1",
            "status": false
        },
        {
            "devId": "e07dee00-158f-11ee-b4df-a9653aef169c",
            "name": "医防军团",
            "temp": "15.2",
            "humidity": "12.3",
            "status": true
        },
        {
            "devId": "5b01df20-158f-11ee-b4df-a9653aef169c",
            "name": "配套中心",
            "temp": "11.4",
            "humidity": "20",
            "status": true
        },
        {
            "devId": "c524cfd0-4bb2-11ee-864d-e941de71fb47",
            "name": "东气泵房",
            "temp": "26.9",
            "humidity": "10",
            "status": true
        },
        {
            "devId": "e7868a00-4bb2-11ee-864d-e941de71fb47",
            "name": "西气泵房",
            "temp": "34.4",
            "humidity": "6",
            "status": true
        },
        {
            "devId": "7cd36740-158f-11ee-b4df-a9653aef169c",
            "name": "东莞分公司",
            "temp": "27.7",
            "humidity": "38.9",
            "status": false
        },
        {
            "devId": "c502b660-158f-11ee-b4df-a9653aef169c",
            "name": "东莞分公司",
            "temp": "29.5",
            "humidity": "56.3",
            "status": false
        },
        {
            "devId": "57d4bbc0-1bc9-11ee-93b4-8d0afc6a8fe9",
            "name": "微工厂",
            "temp": "14.7",
            "humidity": "17.1",
            "status": false
        }
    ],
    "top": {
        "temp": 45,
        "humidity": 75,
        "name": "温湿度上限值"
    },
    "bottom": {
        "temp": -15,
        "humidity": 15,
        "name": "温湿度下限值"
    }
})
let sensor_list = reactive([
    {

        component: 'SvgWendu',
        unit: '℃',
        type: 'AirTemp_Reg',
        limit: 40,
        list: [
            {

                id: '',
                name: '温度1',
                value: 20,
                status: "true"
            },
            {
                id: '',
                name: '温度2',
                value: 20,
                status: "true"
            }
        ]
    },
    {
        component: 'SvgShidu',
        unit: '%RH',
        type: 'AirHumi_Reg',
        limit: 90,
        list: [
            {

                id: '',
                name: '湿度1',
                value: 20,
                status: "true"
            },
            {
                id: '',
                name: '湿度2',
                value: 100,
                status: "true"
            }
        ]
    },
    {
        component: 'SvgJiaquan',
        unit: 'mg/m³',
        type: 'CH2O',
        limit: 0.08,
        list: [
            {

                id: '',
                name: '甲醛1',
                value: 20,
                status: "true"
            },
            {
                id: '',
                name: '甲醛2',
                value: 20,
                status: "true"
            }
        ]
    },
    {
        component: 'SvgTVOC',
        unit: 'mg/m³',
        type: 'TVOC',
        limit: 0.5,
        list: [
            {

                id: '',
                name: 'TVOC1',
                value: 20,
                status: "true"
            },
            {
                id: '',
                name: 'TVOC2',
                value: 20,
                status: "true"
            }
        ]
    },
    {
        component: 'SvgPm25',
        unit: 'mg/m³',
        type: 'HIGH_PM25_Reg',
        limit: 30,
        list: [
            {

                id: '',
                name: 'PM2.51',
                value: 20,
                status: "false"
            },
            {
                id: '',
                name: 'PM2.52',
                value: 20,
                status: "true"
            }
        ]
    },
    {
        component: 'SvgPm10',
        unit: 'mg/m³',
        type: 'HIGH_PM10_Reg',
        limit: 30,
        list: [
            {

                id: '',
                name: 'PM101',
                value: 20,
                status: "true"
            },
            {
                id: '',
                name: 'PM102',
                value: 20,
                status: "true"
            }
        ]
    },
    {
        component: 'SvgZaosheng',
        unit: 'dB',
        type: 'Noise_Reg',
        limit: 85,
        list: [
            {

                id: '',
                name: '噪音1',
                value: 20,
                status: "true"
            },
            {
                id: '',
                name: '噪音2',
                value: 20,
                status: "true"
            }
        ]
    },
    {
        component: 'SvgYanwu',
        unit: 'mg/m³',
        type: 'Smoke_Reg',
        limit: 100,
        list: [
            {

                id: '',
                name: '烟雾1',
                value: 20,
                status: "true"
            },
            {
                id: '',
                name: '烟雾2',
                value: 20,
                status: "true"
            }
        ]
    }
])

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 getNoiseDataList() {
    noiseDataList.value = [
        {
            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e488",
            "devName": "公共区域",
            "label": "noise-7",
            "place": null,
            "data": 19,
            "status": 0
        },
        {
            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e489",
            "devName": "办公区6",
            "label": "noise-6",
            "place": null,
            "data": 90,
            "status": 0
        },
        {
            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e490",
            "devName": "办公区5",
            "label": "noise-5",
            "place": null,
            "data": 22,
            "status": 0
        },
        {
            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
            "devName": "办公区4",
            "label": "noise-4",
            "place": null,
            "data": 22,
            "status": 0
        },
        {
            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e491",
            "devName": "办公区3",
            "label": "noise-3",
            "place": null,
            "data": 21,
            "status": 0
        },
        {
            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e492",
            "devName": "办公区2",
            "label": "noise-2",
            "place": null,
            "data": 24,
            "status": 0
        },
        {
            "devId": "48a2ec70-a60c-11ef-91f3-abd609c7e493",
            "devName": "办公区1",
            "label": "noise-1",
            "place": null,
            "data": 25,
            "status": 0
        },
    ]
    public_noise.value = noiseDataList.value.find(item => item.devName === '公共区域')
    office_noise.value = noiseDataList.value.filter(item => item.devName !== '公共区域')
}




// 获取顶部数据
// function getTopDataList() {
//   getTopData().then(res => {
//     if (res.code === 200) {
//       res.data.forEach(item => {
//         let index = sensor_list.findIndex(sensor => sensor.type === item.type)
//         sensor_list[index].value = item.data
//         sensor_list[index].id = item.id
//         sensor_list[index].status = item.status
//         sensor_list[index].limit = item.limit
//         if (item.type === 'HIGH_PM25_Reg') {
//           dustData.pm25 = item.data
//         } else if (item.type === 'HIGH_PM10_Reg') {
//           dustData.pm10 = item.data

//         }

//       })
//     }
//   })
// }

onMounted(() => {
    getNoiseDataList()
    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 });
});
</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%);
            
        }
    }
}
</style>
