<template>
    <div class="meteorologica-header">
        <dv-decoration-8 style="width:15%;height:40px;" :color="['white', 'white']" class="header-decoration__left" />
        <div class="header">
            <span>气象生态环境监测</span>
            <dv-decoration-5 style="width:80%;height:30px;"
                class="header-decoration" :dur="6" :color="['white', 'white']"/>
        </div>
        <div class="timers">
            {{ dateYear }} {{ dateWeek }} {{ dateDay }}
        </div>
        <dv-decoration-8 :reverse="true" style="width:15%;height:40px;" :color="['white', 'white']" class="header-decoration__right" />
        <div class="header-decoration__line"></div>
    </div>
</template>

<script>
import { formatTime } from "@/utils/index.js";

export default {
    name: 'MeteorologicaHeader',

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

    methods: {
        timeFn() {
            this.timing = setInterval(() => {
                this.dateDay = formatTime(new Date(), "HH: mm: ss");
                this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
                this.dateWeek = this.weekday[new Date().getDay()];
            }, 1000);
        },
    },

    mounted() {
        this.timeFn()
    },

    
    beforeDestroy() {
      clearInterval(this.timing);
    }
}
</script>
<style lang="scss">
.meteorologica-header  {
    position: relative;
    width: 100%;
    height: 10%;
    color: #fff;

    .header {
        width: 50%;
        height: 90%;
        position: absolute;
        left: 25%;
        text-align: center;
        font-size: 20px;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        
        .header-decoration {
            position: absolute;
            bottom: 0%;
            left: 10%;
        }
    }
    
    .header-decoration__left {
        position: absolute;
        left: 0;
        top: 0;
    }
    .header-decoration__right {
        position: absolute;
        right: 0;
        top: 0;
    }
    .timers {
        position: absolute;
        right: 20px;
        bottom: 20%;
    }
    .header-decoration__line {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        border-top: 1px dashed #fff;
    }
}
</style>