<template>
    <div class="navbar-warp" ref="navbarRef" :style="navbarWarpStyle">
        <div class="nav-list">
            <li v-for="(item, index) in navList" @mouseenter.stop="onMouseover(item)"
                @mouseleave.stop="onMouseout(item)" class="item">
                <router-link :to="item.url" tag="a" class="nav-level-1">
                    {{ item.name }}
                    <span class="default" :class="{ 'active': item.show }"></span>
                </router-link>
                <Transition name="slide-fade">
                    <ul v-show="item.show" class="warp">
                        <li v-for="items in item.children">
                            <div class="cate">
                                <router-link :to="items.url || '/'" tag="a">
                                    {{ items.name }}
                                </router-link>
                            </div>
                            <div class="nav-level-2">
                                <div v-if="items.children && items.children?.length > 0">
                                    <router-link :to="level2.url || '/'" tag="a" v-for="level2 in items.children"
                                        class="level-2">
                                        {{ level2.name }}
                                    </router-link>
                                </div>
                            </div>
                        </li>
                    </ul>
                </Transition>
            </li>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { NavBar, useNavigationBar } from './hooks/useNavigationBar';

interface Props {
    /**
     * 背景颜色
     */
    navBg?: string
    /**
     * 导航菜单数据
     */
    navList: NavBar[]
}
// withDefaults ==> 用于辅助defineProps设置默认值
const props = withDefaults(defineProps<Props>(), {
    navBg: "#222222"
})
// 基础处理
const { navbarRef, updateOffset, navbarWarpStyle, onMouseover, onMouseout } = useNavigationBar(props)
</script>
<style scoped lang='scss'>
$base-color: #ffffff;
$base-bg: var(--base-bg);
$base-bg-item: var(--base-bg);
$base-bg-active: #1890ff;

.navbar-warp {
    position: relative;
    width: 100%;
    background-color: $base-bg;

    .nav-list {

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        a {
            text-decoration: none;
            color: $base-color;
        }

        li.item {
            list-style-type: none;
            display: inline-flex;
            text-align: center;
            position: relative;

            .nav-level-1 {
                position: relative;
                min-width: 120px;
                height: 54px;
                line-height: 54px;
                border: 1px solid $base-color;
                background-color: $base-bg-item;
                border-width: 0 0 0 0;
                font-size: 18px;
                font-weight: bold;

                .default {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    height: 3px;
                    background-color: $base-bg-active;
                    width: 0%;
                    transition: width 300ms ease-in-out;

                    &.active {
                        width: 100%;
                    }
                }
            }

            a:hover {
                color: $base-color;
            }

            .warp {
                position: absolute;
                display: flex;
                flex-wrap: wrap;
                top: 54px;
                // left: 0;
                width: 660px;
                overflow: hidden;
                background: #FCFCFC;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2);
                border-radius: 6px;
                z-index: 1999;

                >li {
                    width: 50%;
                    text-align: left;

                    .cate {
                        padding: 10px;
                        font-size: 15px;
                        font-weight: 600;
                        border-bottom: 1px dashed #e5e5e5;

                        a {
                            color: #3A3D42;
                        }
                    }

                    .nav-level-2 {
                        min-height: 13px;
                        padding: 10px;
                        padding-right: 0;
                        font-size: 13px;

                        .level-2 {
                            display: inline-block;
                            white-space: nowrap;
                            padding-right: 10px;
                            line-height: 1.6;
                            color: #3A3D42;

                            &:hover {
                                color: $base-bg-active;
                            }
                        }
                    }
                }
            }
        }
    }
}

.slide-fade-enter-active {
    transition: all 300ms;
}

.slide-fade-leave-active {
    transition: all 200ms;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    transform: translateY(20px);
    opacity: 0;
}</style>