<template>

  <div class="ui-nav-bar bg-primary ">
    <!-- <van-nav-bar safe-area-inset-top class="h-0" /> -->

    <div class="h-88rem w-screen  flex  overflow-hidden items-center justify-between px-24rem">

      <div class="w-26rem">

        <img v-if="showLeft" @click="goBack" class="w-26rem h-auto" src="/imgs/nav-back-icon.png" />
      </div>
      <div class="text-white text-size-36rem flex-1 text-center ">
        {{ $t(title) }}
      </div>
      <img @click="$emit('clickMenu')" class="w-39rem h-auto" src="/imgs/nav-menu.png" />

    </div>
    <slot name="search"></slot>

  </div>
</template>

<script>
export default {
  props: {
    title: {},
    showLeft: {
      default: true
    }
  },
  mounted() {

  },
  methods: {
    changeLang() {

      this.$i18n.locale = this.lang[0];
      this.lang = this.lang.reverse()
    },
    goBack() {
      this.$router.back()
    }
  },
  watch: {
    $route: function (next) {
      console.log(next.path);
      this.currentPath = next.path;
    },
  },
  data() {
    return {
      typeVisible: false,
      currentPath: this.$route.path,
      lang: ['zh-CN', 'zh-TW']
    };
  },
};
</script>

<style>
.menu-item {
  @apply text-white text-size-20px cursor-pointer relative h-full flex items-center;
}

.menu-item.selected::after {
  content: "";
  width: 100%;
  height: 3px;
  background: #fff;
  position: absolute;
  bottom: 14px;
  left: 0;
  border-radius: 3px;
}

.type-tag {
  @apply w-110px h-60px bg-[#F7F7F7] flex flex-col justify-center mt-30px pl-15px cursor-pointer;
}

.type-tag.selected {
  @apply bg-primary;
}

.type-tag:not(:nth-child(8n)) {
  @apply mr-40px;
}

.type-tag>.name {
  @apply text-size-16px mb-6px;
}

.type-tag.selected>.name {
  @apply text-white;
}

.type-tag>.count {
  @apply text-size-14px text-[#B8B8B8];
}

.ui-nav-bar .van-field__body {
  @apply h-full;
}

.ui-nav-bar .van-field__body input {
  @apply pl-24rem;
}
</style>
