<template>
  <header :class="isHome ? '' : 'top-nav-seize'">
    <div class="top-nav">
      <div class="top-nav-container">
        <div class="top-nav-icon-wrap">
          <img v-if="logo" :src="logo" class="top-nav-logo" alt="logo">
          <div class="top-nav-icon-title" />
        </div>
        <el-menu :default-active="activeIndex" class="top-nav-menu" mode="horizontal" @select="handleSelect">
          <el-menu-item index="Home">首页</el-menu-item>
          <el-menu-item v-if="managementRouteName" :index="managementRouteName">管理后台</el-menu-item>
        </el-menu>
        <div class="top-nav-user-wrap">
          <img :src="require('@/assets/img/default-avatar.png')" class="avatar" alt="头像">
          <el-dropdown :hide-on-click="false" @command="handleCommand">
            <span class="el-dropdown-link">
              Hi, {{ name }} <i class="el-icon-arrow-down el-icon--right" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- <el-dropdown-item command="update-password">修改密码</el-dropdown-item> -->
              <el-dropdown-item command="exit-login">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
import { mapGetters } from 'vuex'
import asyncRoutes from '@/router/asyncRoutes'

export default {
  name: 'TopNav',
  data() {
    const isHome = this.$route.name === 'HomePage'
    return {
      // logo
      logo: this.$store.getters.logo,
      // 当前激活的索引
      activeIndex: '',
      // 是否展示白底黑字(首页滚动超过60px也会展示白底黑字)
      showBlack: !isHome,
      // 管理后台地址
      managementRouteName: '',
      // 导航条背景色
      navBgColor: `rgba(255, 255, 255, ${isHome ? 0 : 1})`
    }
  },
  computed: {
    ...mapGetters(['avatar', 'name', 'addRoutes']),
    /**
     * 判断当前是否是首页
     */
    isHome() {
      // 处理一次页面滚动方法，相当于监听路由切换
      this.pageScroll()
      return this.$route.name === 'HomePage'
    }
  },
  mounted() {
    const { name } = this.$route
    // 动态路由
    asyncRoutes.forEach((route, index) => {
      // 如果当前第一级目录是选中状态
      if (route.name === name) {
        this.activeIndex = route.name
      }
      // 如果孩子节点中有当前激活的菜单项
      if (route.children && route.children.length > 0) {
        // 遍历孩子节点
        route.children.forEach(child => {
          // 如果当前是激活的菜单
          if (child.name === name) {
            this.activeIndex = route.name
          }
        })
      }
    })
    // 获取当前管理后台的路径
    if (this.addRoutes && this.addRoutes.length > 0) {
      this.addRoutes.forEach(route => {
        // 如果当前是管理页面
        if (['Management', 'Search', 'Audit'].includes(route.name) && route.children && route.children.length > 0 && !this.managementRouteName) {
          this.managementRouteName = route.children[0].name
        }
      })
    }
  },
  destroyed() {
    window.onscroll = null
  },
  methods: {
    /**
     * 页面滚动方法
     */
    pageScroll() {
      // 滑动到顶部的距离
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      // 当前路由名称
      const { name } = this.$route
      // 如果是首页
      const isNotHome = name !== 'HomePage'
      // 当前滚动距离大于30，展示黑底白字
      this.showBlack = isNotHome ? true : scrollTop > 30
      // 背景色的透明度
      this.navBgColor = `rgba(255, 255, 255, ${(isNotHome || scrollTop > 60) ? 1 : (scrollTop / 60).toFixed(2)})`
    },

    /**
     * 菜单名称
     */
    menuName(menu) {
      const { name } = this.$route
      // 激活的菜单项
      let menuActive = menu.children ? menu.children.find(m => m.name === name) : null
      // 如果当前是激活项
      if (!menuActive) {
        menuActive = menu.children[0]
      }
      return menuActive.meta.title
    },

    /**
     * 当前选中的菜单
     */
    handleSelect(name) {
      this.$router.push({ name })
    },

    /**
     * 当前点击的用户信息模块
     * @param command 当前命令
     */
    handleCommand(command) {
      switch (command) {
        case 'update-password': // 更新密码
          break
        case 'exit-login': // 退出登录
          this.$store.dispatch('user/logout')
          this.$router.push({
            name: 'Login'
          })
          break
      }
    },

    toSearch(type) {
      if (type === 1) {
        this.$router.push({ name: 'CarAuth1' })
      } else {
        this.$router.push({ name: 'CarAuth2' })
      }
    }
  }
}
</script>

<style lang="scss">
.top-nav {
  background: #ffffff;
  height: 60px;
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  z-index: 1000;
  .top-nav-container {
    display: flex;
    padding: 0 32px;
    height: 100%;
  }
  .top-nav-icon-wrap {
    align-items: center;
    display: flex;
    flex: 1;
    height: 100%;
    .top-nav-logo {
      width: auto;
      height: 28px;
    }
    .top-nav-icon-title {
      background-image: url('../../assets/img/icon-nav-title.svg');
      background-size: 100% 100%;
      width: 140px;
      height: 28px;
    }
  }
  .top-nav-menu {
    border-bottom: 0px;
  }
  .top-nav-user-wrap {
    align-items: center;
    display: flex;
    padding-left: 24px;
    .avatar {
      margin-right: 16px;
      width: 32px;
      height: 32px;
    }
  }
  .el-menu {
    background-color: transparent;
    color: #212026;

    .el-menu-item {
      background-color: transparent !important;
      border-bottom: 0px;
      color: #212026;
      font-weight: 500;
      padding: 0 24px;
      position: relative;
      &.is-active, &:hover {
        color: #2A68FF;
        i {
          color: #2A68FF;
        }
        &:after {
          background: #FFFFFF;
          bottom: 16px;
          content: "";
          display: block;
          position: absolute;
          left: 50%;
          width: 14px;
          height: 2px;
          transform: translateX(-50%);
        }
      }
    }
    .el-submenu {
      &.is-active {
        .el-submenu__title {
          color: #2A68FF;
          i {
            color: #2A68FF;
          }
        }
      }
      .el-submenu__title {
        background-color: transparent;
        border-bottom: 0px;
        color: #212026;
        font-weight: 500;
        padding: 0 24px;
        &:hover {
          color: #2A68FF;
        }
      }
    }
  }
  .el-dropdown {
    color: #212026;
  }
  &.reverse {
    .el-menu {
      .el-menu-item {
        color: #ffffff;
        &:hover {
          color: #ffffff;
          font-weight: 700;
        }
        &.is-active {
          font-weight: 700;
        }
      }

      .el-submenu__title {
        color: #ffffff;
        &:hover {
          color: #FFFFFF;
          font-weight: 700;
        }
      }
    }
    .el-dropdown {
      color: #FFFFFF;
    }
  }
  .el-dropdown-link {
    cursor: pointer;
  }
}
.top-nav-seize {
  width: 100%;
  height: 60px;
}
</style>
<style scoped>
.el-menu--horizontal .el-menu .el-menu-item,
.el-dropdown-menu__item {
  padding: 0 14px;
}
</style>
