<template>
    <div class="navbar"
         :class="{'open':isOpen, 'show':model === 'index' && scrollY !== 0}"
    >
        <div class="navbar-wrapper">
            <router-link to="/">
                <a class="logo"></a>
            </router-link>

            <div class="navbar-item-wrapper motion" @mouseenter="handelMouseOver"
                 @mouseleave.stop="handelMouseOut">
                <div class="navbar-item" v-for="item in navbarList">
                    <router-link :to="item.path">
                        <a class="navbar-item-link" @mouseenter.stop="handelLineOver"
                           @mouseleave.stop="handelLineOut">
                            {{item.meta.title}}
                            <span class="line motion"></span>
                        </a>
                    </router-link>
<!--                    <dl class="navbar-item-detail-wrapper">-->
<!--                        <dd v-for="ii in item.children">-->
<!--                            <router-link :to="ii.path">-->
<!--                                <a>{{ii.meta.title}}</a>-->
<!--                            </router-link>-->
<!--                        </dd>-->
<!--                    </dl>-->
                </div>

            </div>
<!--            <div class="header-bg motion">-->
<!--                <div class="write-bg"></div>-->
<!--            </div>-->
        </div>
        <slot name="bg-content"></slot>
        <div class="shadow"></div>
    </div>
</template>

<script>
  export default {
    name: 'navbar',
    props: {
      // navbar模式 (default | index)
      model: {
        type: String,
        default: 'default'
      },
      // navbar的list
      navbarList: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        isOpen: false,
        time: 0,
        scrollY: 0
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        //添加鼠标滚动监听事件
        window.addEventListener('scroll', this.handelScroll)
      },
      handelScroll() {
        // 页面滚动距顶部距离
        this.scrollY = window.pageYOffset || document.documentElement.scrollTop ||
          document.body.scrollTop
      },
      //控制鼠标悬停出现dl
      handelMouseOver(e) {
        e.preventDefault()
        clearTimeout(this.time)
        this.isOpen = true

      },
      handelMouseOut(e) {
        e.preventDefault()
        let that = this
        this.time = setTimeout(function() {
          that.isOpen = false
        }, 300)
      },
      //控制鼠标悬停底部动画
      handelLineOver(e) {
        e.currentTarget.querySelector('span.line').classList.add('show')
      },
      handelLineOut(e) {
        e.currentTarget.querySelector('span.line').classList.remove('show')
      }
    }
  }
</script>

<style lang="less" scoped>
    @import url('./navbar.less');
</style>
