<template>
    <div class="horizontalScreen">
        <div class="bg">
            <img
                class="bgUp"
                src="@/assets/image/horImg/background_up.png"
            />
            <img
                class="bgBuild"
                src="@/assets/image/horImg/background.png"
            />
        </div>
        <div class="container">
            <div class="hor-head">
                <pageHead    @toplay="toplay" @tostop="tostop"  @nextpage="nextpage" @lastpage="lastpage"/>
            </div>
            <div
                class="hor-content firstScreen flexBetween"
                v-if="nowPage == 1"
            >
                <div class="content-left">
                    <NowData screenType="hor" />
                    <div class="content-left-cont horizontalClass flexBetween">
                        <div class="bottom-left">
                            <airSwitchHor></airSwitchHor>
                            <!-- <airSwitchVer></airSwitchVer> -->
                        </div>
                        <div class="bottom-right">
                            <TemChart screenType="hor"></TemChart>
                        </div>
                    </div>
                </div>
                <div class="content-right">
                    <LastMonthData screenType="hor"></LastMonthData>
                </div>
            </div>
            <div
                class="hor-content"
                v-if="nowPage == 2"
            >
                <HorFloorSpace
                    screenType="hor"
                    :showPing="nowPage"
                    @donetowpage="doneTowPage"
                    ref="floorSpace"
                ></HorFloorSpace>
            </div>
            <div
                class="hor-content threeScreen"
                v-if="nowPage == 3"
            >
                <div class="topCont flexBetween">
                    <div class="threeLeft">
                        <LastAllEnergy screenType="hor"></LastAllEnergy>
                    </div>
                    <div class="threeRight">
                        <LastSaveEnergy screenType="hor"></LastSaveEnergy>
                    </div>
                </div>
                <div class="bottomCont">
                    <lastEnergyChart screenType="hor"></lastEnergyChart>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { ref, reactive, toRefs, onMounted, computed ,nextTick} from "vue";
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";

import { storeToRefs } from "pinia";
import useProjectStore from "@/store/useProjectStore";

export default {
    components: {
        pageHead: pageHead,
        NowData: NowData,
        LastMonthData: LastMonthData,
        airSwitchVer: airSwitchVer,
        TemChart: TemChart,
        HorFloorSpace: HorFloorSpace,
        LastAllEnergy: LastAllEnergy,
        lastEnergyChart: lastEnergyChart,
        airSwitchHor: airSwitchHor,
        LastSaveEnergy: LastSaveEnergy,
    },
    setup() {
        const floorSpace = ref();
        const projectStore = useProjectStore();
        var showAllPage = computed(() => {
            console.log(
                "lastAllEnergy",
                projectStore.lastAllEnergy.energyTotal
            );
            if (
                projectStore.lastAllEnergy.energyTotal === undefined &&
                projectStore.lastAllEnergy.energyCompare === undefined
            ) {
                return 2;
            } else {
                return 3;
            }
        });
        // projectStore.$subscribe((mutation, state) => {
        //     console.log(
        //         "projectStore--state1",
        //         state,
        //         state.lastAllEnergy.energySaving
        //     );
        // });

        const allData = reactive({
            nowPage: 1,
            timeoutsign:null,
            //showAllPage: 3,
            toplay(){
                //todo
                if(allData.nowPage==2){
                    floorSpace.value&&floorSpace.value.toplay();//第二屏动画播放
                }else{
                    allData.timePageShow(500);
                }
            },
            tostop(){
                //todo
                if(allData.nowPage==2){
                    floorSpace.value&&floorSpace.value.tostop();//第二屏动画暂停
                }
                clearTimeout(allData.timeoutsign);
            },
            nextpage(){
                clearTimeout(allData.timeoutsign);
                if (allData.nowPage == 3) {
                        allData.nowPage = 1;
                        !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时，预订下一次的切屏
                        return;
                }
                if (allData.nowPage == 1) {
                    allData.nowPage = 2;
                    return;
                }
                if (allData.nowPage == 2) { 
                    if (showAllPage.value == 3) {
                        allData.nowPage = 3;
                    } else if (showAllPage.value == 2) {
                        allData.nowPage = 1;
                    }
                    !projectStore.stopSign&&allData.timePageShow(7000);//预订下一次的切屏
                }
            },
            lastpage(){
                clearTimeout(allData.timeoutsign);
                if (allData.nowPage == 3) {
                        allData.nowPage = 2;
                        return;
                }
                if (allData.nowPage == 2) {
                    allData.nowPage = 1;
                    !projectStore.stopSign&&allData.timePageShow(7000);//3屏变1屏时，预订下一次的切屏
                    return;
                }
                if (allData.nowPage == 1) { 
                    if (showAllPage.value == 3) {
                        allData.nowPage = 3;
                        !projectStore.stopSign&&allData.timePageShow(7000);//1屏变3屏时，预订下一次的切屏
                    } else if (showAllPage.value == 2) {
                        allData.nowPage = 2;
                    }
                }

            },
            doneTowPage() {
                if(projectStore.stopSign){ 
                    return;
                }
                //第二屏刷新结束 通知
                allData.timePageShow(500);
            },
            timePageShow(time) {
                allData.timeoutsign = setTimeout(() => {
             
                    if(projectStore.stopSign){ 
                        //clearTimeout(allData.timeoutsign);
                        return;
                    }
                    if (allData.nowPage == 3) {
                        allData.nowPage = 1;
                        //console.log('allData.nowPage3',allData.nowPage,time);
                        allData.timePageShow(7000);//3屏变1屏时，预订下一次的切屏
                        return;
                    }
                    if (allData.nowPage == 1) {
                        allData.nowPage = 2;
                        console.log('allData.nowPage1',allData.nowPage,time);
                        return;
                    }
                    if (allData.nowPage == 2) { 
                        if (showAllPage.value == 3) {
                            allData.nowPage = 3;
                        } else if (showAllPage.value == 2) {
                            allData.nowPage = 1;
                        }
                        console.log('allData.nowPage2',allData.nowPage,time);
                        allData.timePageShow(7000);//2屏变3屏 或 2屏变1屏时，预订下一次的切屏
                    }
                  
                }, time);
            },



        });
        onMounted(() => {
            //console.log("horiscreen-mounted");
            allData.timePageShow(7000);

        });
        return {
            ...toRefs(allData),floorSpace
        };
    },
};
</script>

<style scoped lang="scss">
.horizontalScreen {
    padding: 40px;
    height: 100%;
    overflow: hidden;
    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: 0%;
            left: 0;
            width: 120%;
            height: 120%;
            // height: 1420PX;//不想自动转换成rem的px 只需要将px大写 PX就可以了
            z-index: -4;
            animation: mymove 40s linear infinite alternate;
            -webkit-animation: mymove 40s linear infinite alternate;
        }
        @keyframes mymove {
            from {
                left: 0px;
            }
            to {
                left: -20%;
            }
        }
        img {
        }
    }
    .hor-head {
        height: 134px;
        box-sizing: border-box;
    }
    .hor-content {
        height: calc(100% - 134px);
    }
    .firstScreen {
        box-sizing: border-box;

        .content-left {
            width: calc(100% - 303px);
            height: 100%;
        }
        .content-right {
            width: 303px;
            height: 100%;
        }
        .content-left-cont {
            height: 52%;
            .bottom-left {
                width: 36%;
                height: 100%;
                background: rgba(100, 108, 130, 0.06);
                backdrop-filter: blur(20px);
                border-top-left-radius: 20px;
                border-bottom-left-radius: 20px;
            }
            .bottom-right {
                width: 64%;
                height: 100%;
                background: rgba(100, 108, 130, 0.06);
                backdrop-filter: blur(20px);
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
            }
        }
    }
    .flexBetween {
        display: flex;
        justify-content: space-between;
    }
}
.threeScreen {
    .topCont {
        height: 56%;
        .threeLeft {
            position: relative;
            height: 100%;
            width: 40%;
            box-sizing: border-box;
            padding-right: 25px;
            .left-content {
                text-align: center;
                height: 390px;
                width: 100%;
                margin-top: 20px;
                position: relative;
                display: flex;
                justify-content: center;
                align-items: center;
                .lastbg {
                    position: absolute;
                }
            }
        }
        .threeRight {
            position: relative;
            height: 100%;
            width: 60%;
        }
    }
    .bottomCont {
        height: 44%;
        padding-top: 24px;
        box-sizing: border-box;
    }
}
</style>