<template>
  <div>
    <header class="main-header">
      <template v-if="!searchVisible">
        <nuxt-link to="/" class="logo"></nuxt-link>
        <div class="search" @click="toggleSearch"></div>
        <div class="menu" :class="menuClasses" @click="toggleMenu"></div>
      </template>
      <div class="search-box" v-else>
        <div class="search-inner">
          <input type="text" placeholder="请输入关键词" class="search-input" ref="search" />
          <div class="search-btn" @click="search"></div>
        </div>
        <div class="search-close" @click="toggleSearch"></div>
      </div>
    </header>
    <app-search v-if="searchVisible"></app-search>
    <app-menu v-show="menuVisible"></app-menu>
  </div>
</template>

<script>
import AppMenu from '@/components/Menu'
import AppSearch from '@/components/Search'
export default {
  components: { AppMenu, AppSearch },
  data() {
    return {}
  },
  computed: {
    searchVisible() {
      return this.$store.state.searchVisible
    },
    menuVisible() {
      return this.$store.state.menuVisible
    },
    menuClasses() {
      return {
        'is-open': this.menuVisible
      }
    }
  },
  watch: {
    $route() {
      this.$store.commit('toggleSearch', false)
      this.$store.commit('toggleMenu', false)
    }
  },
  methods: {
    toggleSearch() {
      this.$store.commit('toggleSearch', !this.searchVisible)
      this.searchVisible &&
        this.$nextTick(() => {
          this.$refs.search.focus()
        })
    },
    toggleMenu() {
      this.$store.commit('toggleMenu', !this.menuVisible)
    },
    search() {
      this.$notify({ type: 'primary', message: '暂未开通，尽请期待' })
    }
  }
}
</script>

<style lang="scss">
.main-header {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.16rem 0.15rem 0.2rem;
  background-color: #fff;
  border-top: 0.05rem solid #aa1941;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.14);
  .logo {
    flex: 1;
    background: url('~/assets/images/logo.png') no-repeat;
    height: 0.26rem;
    background-size: contain;
  }
  .search {
    width: 0.18rem;
    height: 0.18rem;
    padding: 0 0.08rem;
    background: url('~/assets/images/icon_search.png') no-repeat center;
    background-size: 0.18rem 0.18rem;
    cursor: pointer;
  }
  .menu {
    width: 0.18rem;
    height: 0.18rem;
    padding: 0 0.08rem;
    background: url('~/assets/images/icon_menu.png') no-repeat center;
    background-size: 0.18rem 0.18rem;
    cursor: pointer;
    &.is-open {
      background: url('~/assets/images/icon_close.png') no-repeat center;
      background-size: 0.18rem 0.18rem;
    }
  }

  .search-box {
    flex: 1;
    display: flex;
    align-items: center;
    .search-inner {
      height: 0.24rem;
      flex: 1;
      display: flex;
      border: 0.01rem solid #eaeaea;
      border-radius: 0.03rem;
      overflow: hidden;
    }
    .search-input {
      flex: 1;
      height: 100%;
      padding: 0 0.1rem;
      border: 0;
    }
    .search-btn {
      width: 0.18rem;
      height: 100%;
      padding: 0 0.05rem;
      background: url('~/assets/images/icon_search_hover.png') no-repeat center;
      background-size: 0.18rem 0.18rem;
      cursor: pointer;
    }
    .search-close {
      margin-left: 0.02rem;
      width: 0.18rem;
      height: 0.18rem;
      padding: 0 0.08rem;
      background: url('~/assets/images/icon_close.png') no-repeat center;
      background-size: 0.18rem 0.18rem;
      cursor: pointer;
    }
  }
}
</style>
