<template>
    <!-- 使用双飞翼布局, 兼容低版本浏览器 -->
    <div class="header-main">
        <div class="header-content">
            <span class="title-name">{{ title || '' }}</span>
        </div>
        <div class="right">
            <div class="right-content">
                <span class="current-date">{{ currDate }}</span>
                <span class="current-time">{{ currTime }}</span>
            </div>
        </div>
    </div>
</template>

<script>
let timer = null

export default {
    name: 'Header',

    props: {
        title: {
            type: String,
            default: ''
        }
    },

    data () {
        return {
            currDate: '', // 当前日期, 如: 2021年03月21日
            currTime: '' // 当前时间, 如: 14:12:45
        }
    },

    mounted () {
        this.getCurrTime()
    },

    beforeDestroy () {
        clearTimeout(timer)
        timer = null
    },

    methods: {
        /**
         * @method getCurrTime 获取当前时间
         */
        getCurrTime () {
            const date = new Date()
            const year = date.getFullYear()
            const month = date.getMonth() + 1
            const day = date.getDate()
            const hour = date.getHours()
            const minute = date.getMinutes()
            const second = date.getSeconds()
            const fullDate = year + '/' + month + '/' + day
            const fullTime = this.utils.zeroPadding(hour) + ':' + this.utils.zeroPadding(minute) + ':' + this.utils.zeroPadding(second)

            this.currDate = fullDate
            this.currTime = fullTime
            timer = setTimeout(this.getCurrTime, 1000)
        }
    }
}
</script>

<style lang="less" scoped>
@headerHeight: 67px;

.header-main {
    position: relative;
    width: 100%;
    height: @headerHeight;

    .header-content {
        width: 1169px;
        margin-right: auto;
        margin-left: auto;
        line-height: @headerHeight;
        text-align: center;
        letter-spacing: 3px;
        text-indent: 20px;
        background: url('./images/header-bg.png') no-repeat center top;
    }

    .title-name {
        font-size: 34px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FFFFFF;
        background: linear-gradient(0deg, #FFFFFF 0%, #609FF2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .right {
        position: absolute;
        top: 50%;
        right: 32px;
        transform: translateY(-50%);
        font-size: 22px;
        font-family: CenturyGothic;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 71px;
    }
}
</style>
