<template>
    <div class='menu'>
        <div class='home' @click='$emit("update:modelNum", 0)'>福建三明万达广场</div>
        <div>
            <div
                v-for='(item, index) in list'
                :key='index'
                :class='{ "is-active": item.state }'
                @click='clickEventAcitve(item, index)'
            >{{ item.name }}</div>
        </div>
        <div class='home-right'>
            <img class='img1' src='../assets/imgs/favorites.svg' alt />
            <img class='img2' src='../assets/imgs/file.svg' alt />
            <img class='img3' src='../assets/imgs/clock.svg' alt />
            <span>{{times}}</span>
        </div>
    </div>
</template>

<script>
import { formatTime } from '@/utils/format.js'
export default {
    props: ['modelNum'],
    data() {
        return {
            list: [
                { name: '首页', state: false, route: 'first' },
                { name: '项目概况', state: false, route: 'overview' },
                { name: '楼层功能', state: false, route: 'floorFunc' }, //楼层功能
                { name: '设备设施', state: false, route: 'equipment' }, //设备设施
                { name: '其他事项', state: false, route: 'other' }, //其他
                { name: '分析 | 报表', state: false, route: 'analysis' }
            ],
            times: `${new Date().getFullYear()}.${formatTime(new Date().getMonth() + 1)}.${formatTime(new Date().getDate())} ${formatTime(
                new Date().getHours()
            )}:${formatTime(new Date().getMinutes())}`
        }
    },
    computed: {},
    created() {},
    mounted() {},
    watch: {
        modelNum(val) {
            this.list = this.list.map((item, index) => {
                if (val == index + 1) {
                    item.state = true
                } else {
                    item.state = false
                }
                return item
            })
        }
    },
    methods: {
        clickEventAcitve(item) {
            this.list.forEach(ele => {
                ele.state = false
            })
            item.state = true
            this.$router.push({ path: `/home/${item.route}` })
        }
    },
    components: {}
}
</script>

<style scoped lang="less">
.menu {
    min-width: 1366px;
    height: 48px;
    color: #1f2429;
    font-size: 16px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
    .home {
        width: 430px;
        height: 48px;
        font-size: 20px;
        line-height: 48px;
        text-align: center;
        cursor: pointer;
        color: #ffffff;
        float: left;
        margin-right: 83px;
        background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
    }
    & > div:nth-of-type(2) {
        & > div {
            line-height: 48px;
            text-align: center;
            //background: url('../assets/images/topbar1.png') no-repeat;
            float: left;
            width: 88px;
            height: 48px;
            cursor: pointer;
            transition: all 0.2s;
        }
        .is-active {
            // background: url('../assets/images/topbar2.png') no-repeat;
            color: #025baa;
            background: linear-gradient(180deg, rgba(2, 91, 170, 1) 0%, rgba(2, 91, 170, 0) 100%);
        }
    }
    .home-right {
        float: right;
        margin-right: 20px;
        line-height: 48px;
        color: #646c73;
        font-size: 14px;
        img {
            margin-right: 16px;
        }
    }
}
</style>
