<template>
    <div class="headerAll">
        <div class="header">
            <span class="left-header">
            <p style="text-align: center;font-size: 28px;font-weight: bold;color: #fff;line-height: 98px;">912</p>
        </span>
            <span class="center">
            <span class="title">工程综合监管系统</span>
            <span class="time">当前时间：&nbsp;&nbsp;{{this.time}}</span>
        </span>
            <span class="right">
            <span class="tohome">
                <img src="./img/toHome.png">
                <span class="font">综合展现</span>
            </span>
            <span class="user">
                <span class="admin">
                    <img src="./img/admin.png">
                    <span class="font">管理员</span>
                </span>
                <span class="line"></span>
                <span class="logout">退出</span>
            </span>
        </span>
        </div>
        <div style="height: 40px;background: #fff;">
            <p class="list">
                <span v-for="(item,index) of sidebar" class="listVal" @click="jump(item.path,index)">{{item.name}}</span>
            </p>
        </div>
    </div>

</template>

<script>
import {mapGetters} from 'vuex';
export default {
    data () {
        return {
            time: '',
            sidebar: []
        }
    },
    created() {
    },
    mounted(){
        let that = this;
        setInterval(function () {
            that.timeDayFilter()
        },1000)
    },
    methods: {
        // 时间
        timeDayFilter () {
            let date = new Date();
            let seperator1 = '-';
            let seperator2 = ':';
            let month = date.getMonth() + 1; // 月
            let strDate = date.getDate(); // 日
            let h = date.getHours(); // 时
            let m = date.getMinutes(); // 分
            let s = date.getSeconds(); // 秒
            if (month >= 1 && month <= 9) {
                month = '0' + month;
            }
            if (strDate >= 0 && strDate <= 9) {
                strDate = '0' + strDate;
            }
            if (date.getHours() >= 0 && date.getHours() <= 9) {
                h = '0' + date.getHours();
            }
            if (date.getMinutes() >= 0 && date.getMinutes() <= 9) {
                m = '0' + date.getMinutes();
            }
            if (date.getSeconds() >= 0 && date.getSeconds() <= 9) {
                s = '0' + date.getSeconds();
            }
            this.time = date.getFullYear() + seperator1 + month + seperator1 + strDate
                + ' ' + h + seperator2 + m + seperator2 + s;
        },
        // 跳转
        jump(path,index){
            this.$router.push({name: path});
            let arr = this.$store.getters.getSidebar;
            this.$store.commit('changeSidebar', arr.slice(0,index + 1));
        }
    },
    computed: {
        ...mapGetters(['getSidebar'])
    },
    components: {
    },
    watch: {
        'getSidebar': {
            handler: function (val) {
                console.log(val);
                this.sidebar = val;
            },
            deep: true
        }
    }
}
</script>
<style scoped>
    @import './header.css';
</style>
