<template>
  <div>
    <div class="navbar">
      <!-- 菜单展开缩起 -->
      <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
      <div class="menu_module">
        <div class="menu_module_view">
          <v-scroll-view
            :x="true"
            :y="false"
            slidingBgClassName="slidingBgClassName"
            slidingBlockClassName="slidingBlockClassName"
          >
            <div class="menu_module_fj">
              <div
                v-for="(item, index) in routes"
                :key="index"
                :class="{ item: true, select: path === item.path }"
                @click="path = item.path"
              >
                {{ item.meta.title }}
              </div>
            </div>
          </v-scroll-view>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right-menu">
        <!-- <div class="right-menu-item">
          <el-autocomplete
            v-model="pathurl"
            :fetch-suggestions="querySearchAsync"
            placeholder="搜索菜单"
            @select="handleSelect"
          ></el-autocomplete>
        </div> -->
        <shortcut />
        <template v-if="device !== 'mobile'">
          <!-- 全屏控制 -->
          <screenfull id="screenfull" class="right-menu-item hover-effect" />
        </template>
        <el-dropdown class="user-container" trigger="click">
          <div class="user right-menu-item hover-effect">
            <div class="flex">
              <i class="el-icon-user-solid" />
              <span :class="name.length > 5 ? 'ellipsis' : ''">{{ name }}</span>
            </div>
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <router-link :to="{ name: 'profile' }">
              <el-dropdown-item>个人信息</el-dropdown-item>
            </router-link>
            <el-dropdown-item divided @click.native="logout">
              <span style="display: block">退出登录</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <notice-bar />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Hamburger from '@/components/Hamburger'
import Shortcut from '@/components/Shortcut'
import Screenfull from '@/components/Screenfull'
import NavMenu from '@/components/NavMenu'
import vScrollView from 'v-scroll-view'
import NoticeBar from '@/components/NoticeBar'
import { pages } from '@/settings'
function getc(obj) {
  if (!obj.children || !obj.children.length) {
    return obj
  } else {
    return getc(obj.children[0])
  }
}
export default {
  components: {
    NoticeBar,
    Hamburger,
    Screenfull,
    NavMenu,
    Shortcut,
    vScrollView
  },
  data() {
    return {
      pathurl: '',
      visible: false,
      noticeCount: 0,
      path: `/${this.$route.path.split('/')[1] || ''}`
    }
  },
  computed: {
    routes() {
      return global.antRouter.filter(item => item.meta)
    },
    noticeVisible() {
      return this.noticeCount > 0
    },
    ...mapGetters(['sidebar', 'avatar', 'device', 'name', 'isNotice'])
  },
  watch: {
    $route() {
      this.path = `/${this.$route.path.split('/')[1] || ''}`
    },
    path(newVal) {
      this.$store.commit('app/SET_L1_PATH', newVal)
      if (
        !~this.$route.path
          .split('/')
          .map(str => `/${str}`)
          .indexOf(newVal)
      ) {
        var item = getc(this.routes.find(item => item.path === newVal))
        if (item) {
          this.$router.push(item.path)
        }
      }
    }
  },
  mounted() {
    this.$store.commit('app/SET_L1_PATH', this.path)
  },
  methods: {
    handlePage() {
      let link = null
      if (process.env.VUE_APP_ENV === 'production') {
        link = 'https://fw.gd-jxm.com/#/home'
      } else {
        link = 'https://jiasm.zfire.top/center/#/home'
      }
      window.open(link)
    },

    querySearchAsync(queryString, cb) {
      var data = pages.filter(item => ~item.meta.title.indexOf(queryString))
      cb(
        data.map(item => ({
          value: item.meta.title,
          path: item.path
        }))
      )
    },
    handleSelect(item) {
      if (item.path) {
        this.$router.push({
          path: item.path
        })
      }
      this.pathurl = ''
    },
    async logout() {
      await this.$store.dispatch('user/logout')
      this.$store.commit('tagsView/SET_RESET_VIES')
      this.$router.push(`/login`)
    },
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
// ::v-deep .el-drawer__container{
//   top: 50px;

// }
::v-deep .is-fixed {
  right: 10px !important;
}
::v-deep .slidingBgClassName {
  background: rgba(0, 0, 0, 0.01) !important;
}
::v-deep .slidingBlockClassName {
  background: rgba(0, 0, 0, 0.05) !important;
}
.navbar {
  width: 100%;
  height: 50px;
  overflow: hidden;
  background: #{$navbarBg};
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  flex-direction: row;
  align-items: center;
  .hamburger-container {
    line-height: 46px;
    height: 100%;
    color: #{$navbarText};
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;
    border-right: 1px solid #eaeaea;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }
  .menu_module {
    height: 100%;
    flex: 1;
    position: relative;
    .menu_module_view {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      .menu_module_fj {
        height: 100%;
        width: fit-content;
        white-space: nowrap;
        box-sizing: border-box;
        padding: 0 10px;
        .item {
          display: inline-block;
          height: 100%;
          line-height: 50px;
          box-sizing: border-box;
          padding: 0 10px;
          cursor: pointer;
        }
        .select {
          border-bottom: 1px solid #000;
        }
      }
    }
  }
  .flex {
    display: flex;
    align-items: center;
  }
  .ellipsis {
    display: inline-block;
    width: (16px * 6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .right-menu {
    height: 100%;
    line-height: 50px;

    & > div {
      float: left;
    }

    &:focus {
      outline: none;
    }

    .user-container {
      height: 50px;

      .user {
        i {
          font-size: 18px;
          margin-right: 5px;
        }

        span {
          font-size: 16px;
        }
      }
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 15px;
      height: 100%;
      font-size: 18px;
      color: #{$navbarText};
      vertical-align: text-bottom;
      border-left: 1px solid #eaeaea;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          background: rgba(0, 0, 0, 0.025);
        }
      }

      .notice-icon {
        padding-top: 0;
        padding-bottom: 0;
      }
      .right-menu-item {
        .notice-icon > i {
          font-size: 18px;
        }

        sup {
          top: 12px;
          right: 25px;
        }
      }
    }
  }
}
</style>
