<template>
    <div class="menu-list">
        <div
            class="menu-item"
            :class="{
                active: $route.name === 'home' && (chooseMenu === index || item.active),
                more: item.name.length > 6,
            }"
            @mouseover="item.active = true"
            @mouseout="item.active = false"
            v-for="(item, index) in menus"
            :key="index"
            @click="changeMenu(index)"
        >
            <span> {{ item.name }}</span>

            <img
                :src="$route.name === 'home' && (chooseMenu === index || item.active) ? item.preImg : item.img"
                alt=""
            />
        </div>
    </div>
</template>

<script>
import menuOptions from '../mixins/menuOptions';
export default {
    name: 'Navmenu',
    mixins: [menuOptions],
    methods: {
        changeMenu(name) {
            this.$store.commit('updateChooseMenu', name);
            if (this.$route.name !== 'home') {
                this.$router.push('/home');
            }
        },
    },
};
</script>
<style lang="less" scoped>
.menu-list {
    display: flex;
    justify-content: center;

    .menu-item {
        width: 140px;
        height: 72px;
        position: relative;
        cursor: pointer;

        img {
            position: absolute;
            top: 0;
            z-index: 1;
        }

        span {
            position: absolute;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            white-space: nowrap;
            z-index: 2;
        }

        &.more {
            span {
                width: 120px;
                text-align: center;
                font-size: 14px;
                white-space: inherit;
            }
        }

        &:nth-child(n + 3) {
            img {
                right: 0;
            }
        }
        &:nth-child(3 - n) {
            img {
                left: 0;
            }
        }

        &:first-child {
            img {
                left: -10px;
            }
            span {
                left: 60%;
            }
        }

        &:nth-child(2) {
            img {
                left: -1px;
            }
            span {
                left: 55%;
            }
        }

        &:nth-child(5) {
            span {
                left: 45%;
            }
        }
        &:nth-child(6) {
            span {
                left: 44%;
            }
        }

        &:last-child {
            img {
                right: -10px;
            }
            span {
                left: 40%;
            }
        }
    }
}
</style>
