<template>
    <div class="container">
        <div class="header">
            <div class="title">研发中心环境实时监测系统</div>
        </div>
        <div class="left-content left-right" ref="leftContentRef">
            <Lr1 :data="avg_temp_humi.four" />
            <Lr2 :data="humi"/>
            <Lr3 />
            <Lr4 />
        </div>
        <div class="right-content left-right" ref="rightContentRef"></div>
        <div class="bottom-content" ref="bottomContentRef"></div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from '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';

let deltaY = ref(0)
let avg_temp_humi = reactive({
    four: {
        title: '研发中心四楼',
        temp: 25.5,
        humi: 60
    },
    five: {
        title: '研发中心五楼',
        temp: 25.5,
        humi: 60
    }
})

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": "温湿度下限值"
    }
})


onMounted(() => {
    window.addEventListener('wheel', function (event) {
        deltaY.value += event.deltaY
        if (deltaY.value <= -500 && deltaY.value >= -1000) {

            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('.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');

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

    .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: 38px;
        transition: transform 1s;
    }

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