<template>
  <div :class="`header ${showHeader ? '' : 'mt4'}`">
    <div class="topDiv">
      <div class="container">
        <lang-select />
        <router-link class="home" to="/home">
          <span class="font_family">&#xe605;</span>
          <span>{{ $t(`route.home`) }}</span>
        </router-link>
        <span class="userinfo" v-if="userInfo">
          {{ $t(`page.layout.header.hyn`) }} {{ userInfo.loginAccount }}
        </span>
        <template v-else>
          <div class="login">
            <router-link to="/login">{{
              $t(`page.layout.header.login`)
            }}</router-link>
          </div>
          <div class="register">
            <router-link to="/register">{{
              $t(`page.layout.header.register`)
            }}</router-link>
          </div>
        </template>
        <div class="rightDiv">
          <div class="sjrz">
            <router-link to="/shopEnter">
              <span class="font_family">&#xe604;</span>
              <span>{{ $t(`page.layout.header.shopEnter`) }}</span>
            </router-link>
          </div>
          <div class="line"></div>

          <div class="spfb">
            <a target="_blank" :href="managerUrl">
              <span class="font_family">&#xe603;</span>
              {{ $t(`page.layout.header.productPublish`) }}
            </a>
          </div>
          <div class="line"></div>
          <div class="spfb">
            <router-link to="/user">
              {{ $t(`route.user`) }}
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div v-show="showHeader" class="container  ">
      <div class="logoDiv  ">
        <div class="logoTitle">{{ $t(`title`) }}</div>
        <div class="searchDiv" :class="$i18n.locale">
          <el-select class="searchFl" v-model="currTarget">
            <el-option
              :label="$t(`page.layout.header.searchProduct`)"
              value="/mall"
            />
            <el-option
              :label="$t(`page.layout.header.searchShops`)"
              value="/shops"
            />
          </el-select>
          <span class="line"></span>
          <el-input
            :placeholder="
              `${$t(`inputPlaceholder`)}${$t(`page.layout.header.kw`)}`
            "
            v-model="searchVal"
            class="input-with-select"
            @keyup.native.enter="search"
          >
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <span class="searchBtn" @click="search">
            {{ $t(`page.layout.header.search`) }}
          </span>
        </div>
      </div>
      <div class="navs">
        <router-link
          class="nav"
          v-for="{ url, title } in nav"
          :to="url"
          :key="title"
          >{{ $t(`route.${title}`) }}</router-link
        >
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import langSelect from "./LangSelect.vue";
import { nav } from "@/router";
import user from "@/store/modules/user";
@Component({
  components: { langSelect }
})
export default class extends Vue {
  private searchVal = "";
  private currTarget = "/mall";
  get nav() {
    return nav.map(({ path, meta: { title } }) => ({
      url: path.replace(/\/:\w+\??$/, ""), //去除动态路由(尾部)
      title
    }));
  }
  get showHeader() {
    return !this.$route.matched.some(
      ({ meta: { NoHeader = false } }) => NoHeader
    );
  }
  get userInfo() {
    return user.UserInfo;
  }
  get managerUrl() {
    return process.env.VUE_APP_MANAGER_URL;
  }
  search() {
    const url = `${this.currTarget}/${this.searchVal}`;
    if (this.$route.path !== url) return this.$router.push(url);
    this.$emit("reload");
  }
}
</script>

<style scoped lang="scss">
// 顶部条样式
.header {
  background: #fff;
  .topDiv {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    height: 4rem;
    line-height: 4rem;
    background: #f5f5f5;
    border: 0.1rem solid #e5e5e5;
    .container {
      font-size: 1.2rem;
      .home {
        margin-left: 10px;
        .font_family {
          color: #fd5522;
          margin-right: 3px;
        }
      }
      .userinfo,
      .login {
        a {
          color: #fd5522;
        }
        margin: 0 15px;
        display: inline-block;
      }
      .register {
        color: #333;
        display: inline-block;
      }
      .rightDiv {
        height: 4rem;
        float: right;
        color: #fd5522;
        div {
          margin-right: 2rem;
          vertical-align: middle;
        }
        .sjrz,
        .spfb {
          a {
            color: #fd5522;
          }
          display: inline-block;
          span {
            margin-left: 5px;
          }
        }
        .line {
          height: 1.4rem;
          width: 0.1rem;
          background: #e5e5e5;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
  > .container {
    margin-top: 4rem;
    .logoDiv {
      padding: 3rem 0 1rem 0;
      .logoTitle {
        height: 4rem;
        line-height: 4rem;
        font-size: 2.4rem;
        margin-right: 1rem;
        display: inline-block;
        vertical-align: middle;
      }
      .searchDiv {
        height: 4rem;
        line-height: 4rem;
        width: 55rem;
        font-size: 1.4rem;
        display: inline-block;
        border-radius: 2rem;
        border: 1px solid #fd5522;
        overflow: hidden;
        vertical-align: middle;
        white-space: nowrap;
        &.en {
          width: 42rem;
        }
        .searchFl {
          width: 15%;
          // width: 8rem;
          color: #fd5522;
          height: 100%;
        }
        .line {
          display: inline-block;
          height: 1.8rem;
          width: 0.1rem;
          background: #fd5522;
          vertical-align: middle;
        }
        .el-icon-search {
          color: #fd5522;
        }
        .input-with-select {
          width: 70%;
          // width: 38.9rem;
          height: 100%;
        }
        .searchBtn {
          display: inline-block;
          text-align: center;
          // width: 8rem;
          width: 15%;
          height: 100%;
          font-size: 1.6rem;
          background: #fd5522;
          color: #fff;
          border: 0;
          border-radius: 0;
          cursor: pointer;
        }
      }
    }
    .navs {
      padding-top: 1rem;
      .nav {
        height: 5rem;
        line-height: 5rem;
        font-size: 1.6rem;
        color: #333;
        margin-right: 5rem;
        border-bottom: 0.2rem solid #fff;
        display: inline-block;
        &:hover,
        &.router-link-active {
          border-bottom: 0.2rem solid #fd5522;
          color: #fd5522;
        }
      }
    }
  }
}
.mt4 {
  margin-top: 4rem;
}
</style>
<style lang="scss">
.searchDiv {
  .el-select .el-input {
    color: #fd5522;
    .el-input__inner {
      border: 0;
      color: #fd5522;
    }
  }
  .el-select-dropdown__item.selected {
    color: #fd5522;
  }
  .el-select .el-input .el-select__caret {
    color: #fd5522;
  }
  .input-with-select {
    .el-input__inner {
      border: 0;
    }
  }
}
</style>
