<template>
    <div class="homePage" :style="pageHeight">
        <div class="footer">
            <div class="exitV">
                <div class="time">
                    <span>服务器时间：{{currentTime}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                statusTimer: '',
                currentTime: '',
                bodyHeight: document.documentElement.clientHeight - 60 + 'px',
            }
        },
        created() {

        },
        computed: {
            pageHeight() {
                return {
                    'height': document.documentElement.clientHeight - 115 + 'px'
                }
            }
        },
        mounted() {
            let that = this
            that.statusTimer = setInterval(function () {
                that.currentTime = that.changeDate(new Date())
            }, 1000)
        },
        beforeRouteLeave(to, from, next) {
            next()
            if (this.statusTimer) {
                clearInterval(this.statusTimer);
                this.statusTimer = null;
            }
        },
        methods: {
            changeDate(date) {
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                m = m < 10 ? ('0' + m) : m;
                var d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                var h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                var minute = date.getMinutes();
                minute = minute < 10 ? ('0' + minute) : minute;
                var second = date.getSeconds();
                second = second < 10 ? ('0' + second) : second;
                return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + second
            }
        }
    }
</script>

<style lang="less">
    .homePage {
        .windStstus {
            display: flex;
            align-items: center;
            background: #000;
            margin: 0 10px;
            border: 1px solid #7674d8;
            border-radius: 10px 10px 0 0;
            border-bottom: none;
            height: 40px;

            .everyOne {
                display: flex;
                align-items: center;

                img {
                    width: 21px;
                    height: 21px;
                    margin-left: 18px;
                }

                .statusName {
                    margin-left: 10px;
                    font-size: 14px;
                }

                .statusNum {
                    padding: 0 18px;
                    position: relative;
                    border-right: 1px dashed #fff;
                }

                span {
                    color: #fff;
                }
            }
        }

        .footer {
            padding: 0 10px;
            width: 100%;
            height: 40px;
            position: fixed;
            bottom: 0;

            .exitV {
                display: flex;
                justify-content: space-between;
                line-height: 40px;

                .time {
                    margin-left: 10px;
                    color: #fff;
                }
            }
        }
    }
</style>