<!--
 * @Author: daidai
 * @Date: 2022-01-12 14:23:32
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-09-09 14:47:24
 * @FilePath: \web-pc\src\pages\big-screen\view\home.vue
-->
<template>
    <div class="app">
        <!-- <div id="index" ref="appRef" class="index_home" :class="{ pageisScale: isScale }"> -->
        <ScaleScreen :width="1920" :height="1080" class="scale-wrap" :selfAdaption="true" ref="parentDom">
            <div class="bg">
                <dv-loading v-if="data.loading">Loading...</dv-loading>
                <div v-else class="host-body">
                    <!-- 头部 s -->
                    <div class="d-flex jc-center title_wrap">
                        <div class="zuojuxing"></div>
                        <div class="youjuxing"></div>
                        <div class="guang"></div>
                        <div class="d-flex jc-center">
                            <div class="title">
                                <span class="title-text">加油机在线平台</span>
                            </div>
                        </div>
                        <div class="timers">
                            {{ data.dateYear }} {{ data.dateWeek }} {{ data.dateDay }}
                            <i class="blq-icon-shezhi02" style="margin-left: 10px" @click="showSetting"></i>
                        </div>
                    </div>
                    <!-- 头部 e-->
                    <!-- 内容  s-->
                    <index></index>
                    <!-- 内容 e -->
                </div>
            </div>
            <!--  <Setting ref="setting" /> -->
        </ScaleScreen>
        <!-- </div> -->
    </div>

</template>

<script setup>
import { onBeforeUnmount, onMounted, reactive } from 'vue';
import { NextLoading } from '/@/utils/loading';
import {formatTime} from '/@/utils/newDeviceVision/index.js';
import ScaleScreen from "./components/scale-screen/scale-screen.vue";
import index from "/@/views/admin/visualization/newDeviceVision/indexs/index.vue";
import Setting from "./setting.vue";


onMounted(() => {
    NextLoading.done()
    timeFn();
    cancelLoading();
})

// -- 钩子函数，被销毁前
onBeforeUnmount(() => {
    // -- 在使用setInterval函数时，使用clearInterval来停止执行
    clearInterval(data.timing);
})

const data = reactive({
    timing: null,
    loading: true,
    dateDay: null,
    dateYear: null,
    dateWeek: null,
    weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
})

const showSetting = (() => {
    // -- 使用子组件setting中的init方法
    Setting.init();
})

const timeFn = (() => {
    // -- setInterval定时器，每秒执行一次。
    data.timing = setInterval(() => {
        formatTime()
        data.dateDay = formatTime(new Date(), "HH: mm: ss");
        data.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        data.dateWeek = data.weekday[new Date().getDay()];
    }, 1000);
})

const cancelLoading = (() => {
    // -- setTimeout定时器。
    let timer = setTimeout(() => {
        data.loading = false;
        clearTimeout(timer);
    }, 500);
})

//     // -- 定义过滤器
//     filters: {
//         numsFilter(msg) {
//             return msg || 0;
//         },
//     },




// import index from "/@/views/admin/visualization/newDeviceVision/indexs/index.vue"
// export default {
//     components: { Setting, ScaleScreen, index },

// };



</script>

<style lang="scss">
#app {
    width: 100vw;
    height: 100vh;
    background-color: black
}

// @import '/src/theme/newDeviceVison/css/public.scss';
@import "/src/theme/newDeviceVision/index.scss";
@import "/src/theme/newDeviceVision/home.scss";
</style>