<template>
    <div class="verticalWrap">
        <div class="bg">
            <img
                class="bgUp"
                src="@/assets/image/horImg/background_up_ver.png"
            />
            <img
                class="bgBuild"
                src="@/assets/image/horImg/background.png"
            />
        </div>
        <div class="container">
            <div class="hor-head">
                <pageHead />
            </div>
            <div
                class="hor-content"
                v-if="nowPage == 1"
            >
                <NowData screenType="ver"></NowData>
                <airSwitchVer></airSwitchVer>
                <TemChart screenType="ver"></TemChart>
                <LastMonthData screenType="ver"></LastMonthData>
            </div>
            <div
                class="hor-content"
                v-if="nowPage == 2"
            >
                <HorFloorSpace
                    screenType="ver"
                    :showPing="nowPage"
                    @donetowpage="doneTowPage"
                ></HorFloorSpace>
            </div>
            <div
                class="hor-content"
                v-if="nowPage == 3"
            >
                <LastAllEnergy screenType="ver"></LastAllEnergy>
                <LastSaveEnergy screenType="ver"></LastSaveEnergy>
                <lastEnergyChart
                    screenType="ver"
                    :showPing="nowPage"
                    @donethreepage="doneThreePage"
                ></lastEnergyChart>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { ref, defineComponent, reactive, toRefs, watch, onMounted } from "vue";
import { storeToRefs } from "pinia";
import useProjectStore from "@/store/useProjectStore";

import pageHead from "@/components/pageHead.vue";
import NowData from "@/components/NowData.vue";
import LastMonthData from "@/components/LastMonthData.vue";
import airSwitchVer from "@/components/airSwitchVer.vue";
import airSwitchHor from "@/components/airSwitchHor.vue";
import TemChart from "@/components/TemChart.vue";
import LastAllEnergy from "@/components/LastAllEnergy.vue";
import LastSaveEnergy from "@/components/LastSaveEnergy.vue";
import HorFloorSpace from "@/components/HorFloorSpace.vue";
import lastEnergyChart from "@/components/lastEnergyChart.vue";

export default defineComponent({
    components: {
        pageHead: pageHead,
        NowData: NowData,
        LastMonthData: LastMonthData,
        airSwitchVer: airSwitchVer,
        TemChart: TemChart,
        HorFloorSpace: HorFloorSpace,
        LastAllEnergy: LastAllEnergy,
        lastEnergyChart: lastEnergyChart,
        airSwitchHor: airSwitchHor,
        LastSaveEnergy: LastSaveEnergy,
    },
    setup() {
        const allData = reactive({
            nowPage: 1,
            showAllPage: 3,
            doneThreePage() {
                //第三屏刷新结束 通知
                allData.nowPage = 1;
                allData.timePageShow(); //1屏变2屏
            },
            doneTowPage() {
                //第二屏刷新结束 通知
                if (allData.showAllPage == 3) {
                    allData.nowPage = 3;
                } else if (allData.showAllPage == 2) {
                    allData.nowPage = 1;
                    allData.timePageShow(); //1屏变2屏
                }
            },
            timePageShow() {
                var timeoutsign = setTimeout(() => {
                    allData.nowPage = allData.nowPage + 1;
                    // if (allData.nowPage == 4) {
                    //     allData.nowPage = 1;
                    // }
                }, 6000);
            },
        });

        onMounted(() => {
            allData.timePageShow();
        });
        return { ...toRefs(allData) };
    },
});
</script>

<style scoped lang="scss">
.verticalWrap {
    padding: 40px 40px 100px;
    overflow: hidden;
    height: 100%;
    min-height: 1280px; //todo
    box-sizing: border-box;
    scrollbar-width: none;
    position: relative;
    .container {
        height: 100%;
    }
    .bg {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        right: 0;
        bottom: 0;
        overflow: hidden;
        .bgUp {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
        }
        .bgBuild {
            position: absolute;
            top: -10%;
            left: 0;
            width: 120%;
            height: 100%;
            z-index: -4;
            animation: mymove 20s linear infinite alternate;
            -webkit-animation: mymove 20s linear infinite alternate;
        }
        @keyframes mymove {
            from {
                left: 0px;
            }
            to {
                left: -20%;
            }
        }
        img {
            // width: 100%;
            // height: 100%;
        }
    }
    .hor-head {
        height: 150px;
        box-sizing: border-box;
    }
    .hor-content {
        height: calc(100% - 150px);
    }
}
</style>
