<template>
  <div class="header-nav-mobile">
    <div class="header-nav-mobile_trigger">
      <a class="nav-icon icon-menu" href="javascript:;" @click="toggleShow"></a>
    </div>
    <div class="header-nav-mobile_logo">
      <img src="../assets/logo.png" height="40px" />
    </div>
    <div class="header-nav-mobile_login" v-if="!userInfo">
      <span @click="login">登录</span>
      <span style="margin: 0 5px">|</span>
      <span @click="register">注册</span>
    </div>
    <div class="header-nav-mobile_user" v-else>
      <span class="user-name">{{ userInfo.companyName }}</span>
      <span style="margin: 0 10px">欢迎您</span>
      <span style="margin: 0 5px">|</span>
      <span style="margin-left: 10px;cursor: pointer;" @click="logout">
        <img
          style="width: 16px; height: 16px; vertical-align: middle"
          src="../assets/images/logout.png" />
      </span>
    </div>
    <transition name="header-nav-mobile">
      <div
        v-show="showing"
        class="header-nav-mobile-overlay"
        @click="toggleShow">
        <ul class="header-nav-mobile-items" @click.stop>
          <li
            v-for="(r, i) in nav"
            :key="i"
            class="header-nav-mobile-item"
            :class="{ active: isRouteActive(r) }">
            <router-link
              class="header-nav-mobile-link"
              :to="r.path"
              @click.native="toggleShow">
              {{ r.name }}
            </router-link>
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  name: 'headerNavMobile',
  data() {
    return {
      showing: false,
    }
  },
  props: {
    nav: {
      type: Array,
    },
    userInfo: {
      type: Object,
    },
  },
  computed: {
  },
  methods: {
    ...mapMutations(['setUserInfo']),
    toggleShow() {
      this.showing = !this.showing
    },
    isRouteActive(nav) {
      const path = this.$route.path
      if (nav.path === path) return true
    },
    login() {
      this.$router.push('/login')
    },
    register() {
      this.$router.push('/register')
    },
    logout() {
      localStorage.removeItem('userInfo')
      this.setUserInfo(undefined)
      this.$router.push('/login')
    },
  },
}
</script>
<style scoped lang="scss">
.header-nav-mobile {
  height: 50px;
  background-color: #2f3032;
  display: flex;
  color: #fff;
  align-items: center;
  padding: 0 10px;
}

.header-nav-mobile_logo {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: center;
}

.header-nav-mobile_logo img {
  width: 100%;
  object-fit: contain;
}

.header-nav-mobile_login {
  flex: 1;
  display: flex;
  font-size: 12px;
  margin-right: 10px;
  justify-content: flex-end;
}

.header-nav-mobile_user {
  flex: 1;
  display: flex;
  font-size: 12px;
  margin-right: 10px;
  justify-content: flex-end;
}

.header-nav-mobile_trigger {
  flex: 1;
}

.nav-icon {
  width: 25px;
  height: 25px;
  display: block;
}

.icon-menu {
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAcCAYAAAATFf3WAAAAyklEQVRYR+2WMQ6BQRCFvzmHgkaidgI3UEjcQUSBygV0NOIQhIQTcAK1kpM8GcV/gbHJSHb62fn2vZ2ZNUltYAN0yBUvYGmSTsAoF1tDc/4LwNwWJ7W2wbIKGFSgKhgUkKrgTxSU1M+46szs4ZtkDmyjNy2Uv3DAGzAoVCB67N0BJ8Ae0jWMgOm3iyX1AN/JmeJtZs86ZqKWVAWrglEFovn536CkLrDLOAeBmW+SCzCMWlEo/+qAB2BcqED02KMDtoB1xu8WsErfJB+rXD/DrYeGMwAAAABJRU5ErkJggg==);
}

.header-nav-mobile-enter-active,
.header-nav-mobile-leave-active {
  transition: 0.3s;
}

.header-nav-mobile-enter,
.header-nav-mobile-leave-to {
  transform: translateX(-300px);
}

.header-nav-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
}

.header-nav-mobile-items {
  box-sizing: border-box;
  width: 260px;
  height: 100%;
  background-color: #000;
  margin: 0;
  padding: 30px 20px;
}

.header-nav-mobile-item,
.header-nav-mobile-child {
  list-style-type: none;
  line-height: 50px;
  letter-spacing: 4px;

  &.active > .header-nav-mobile-link {
    color: var(--primary-color);
  }
}

.header-nav-mobile-item.active {
  .header-nav-mobile-link {
    position: relative;

    &::after {
      position: absolute;
      top: 100%;
      left: 0;
      content: '';
      display: block;
      width: 80px;
      height: 2px;
      background-color: var(--primary-color);
    }
  }
}

.header-nav-mobile-item {
  font-size: 16px;
  color: #fff;
}

.header-nav-mobile-child {
  font-size: 14px;
  color: #999;
}

.header-nav-mobile-children {
  margin: 0;
  padding: 0;
}

.header-nav-mobile-link {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: solid 1px #2c2c2c;
}

.header-nav-mobile-item > .header-nav-mobile-link {
  display: flex;

  .expand-icon {
    margin-left: auto;
    margin-right: 20px;
  }
}

.header-nav-mobile-child > .header-nav-mobile-link {
  padding-left: 10px;
  &::after {
    display: none !important;
  }
}
</style>
