<template>
  <div class="header-nav-mobile">
    <a
      class="header-nav-mobile-trigger icon-menu"
      href="javascript:;"
      @click="toggleShow"
    ></a>

    <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) }"
          >
            <template v-if="r.children && r.children.length">
              <a
                class="header-nav-mobile-link"
                href="javascript:;"
                @click="toggleExpand(r)"
                >{{ r.title }}
                <span class="expand-icon">{{
                  expandMap[r.title] ? '-' : '+'
                }}</span></a
              >
              <ul
                v-show="expandMap[r.title]"
                class="header-nav-mobile-children"
              >
                <li
                  v-for="(rr, j) in r.children"
                  :key="j"
                  class="header-nav-mobile-child"
                  :class="{ active: isRouteActive(rr) }"
                >
                  <router-link
                    class="header-nav-mobile-link"
                    :to="rr.route"
                    @click.native="toggleShow"
                    >{{ rr.title }}</router-link
                  >
                </li>
              </ul>
            </template>
            <router-link
              v-else
              class="header-nav-mobile-link"
              :to="r.route"
              @click.native="toggleShow"
              >{{ r.title }}</router-link
            >
          </li>
        </ul>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  name: 'HeaderNavMobile',
  props: {
    nav: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      showing: false,

      expandMap: {},
    }
  },
  watch: {
    nav: {
      immediate: true,
      handler() {
        this.buildExpandMap()
      },
    },
    $route() {
      this.buildExpandMap()
    },
  },
  methods: {
    toggleShow() {
      this.showing = !this.showing
    },
    toggleExpand(r) {
      this.expandMap[r.title] = !this.expandMap[r.title]
    },
    isRouteActive(nav) {
      const path = this.$route.path
      if (nav.route === path) return true
      if (nav.children?.length) {
        return nav.children.some((e) => e.route === path)
      }
    },
    buildExpandMap() {
      const m = {}
      this.nav.forEach((r) => {
        if (r.children?.length) {
          m[r.title] = this.isRouteActive(r)
        }
      })
      this.expandMap = m
    },
  },
}
</script>
<style lang="scss">
.header-nav-mobile-trigger {
  display: block;
  width: 25px;
  height: 25px;
}

.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: 300px;
  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>
