<template>
  <div class="emnuSearch">
    <a-popover trigger="click" placement="bottom">
      <template class="content" slot="content">
        <div class="set-tabs">
          <a-input-search v-model="menuName" @change="onSearch(menuName)" @search="onSearch" :style="{margin:'0'}"/>
        </div>
        <div :style="{height:'300px',overflowY:'scroll'}">
        <a-menu slot="overlay" >
          <a-menu-item
            v-for="(item, key) in arr"
            :key="key"
            @click="selectedSearch(item)"
          >
            {{ $t(item.name) }}
          </a-menu-item>
        </a-menu>
        </div>
      </template>

      <div class="set">
        <a-tooltip placement="bottom">
          <template slot="title"> {{$t('菜单搜索')}} </template>
          <a-icon type="search" class="action" :style="{color: 'rgba(255,255,255,.5)'}" />
        </a-tooltip>
      </div>
    </a-popover>
  </div>
</template>

<script>
import enUS from "@/common/locales/lang/en-US.js"
export default {
  props: ["menuList"],
  data() {
    return {
      arr: [],
      menuName:''

    };
  },
  created() {
    // console.log(enUs['菜单'])
  },
  methods: {
    
    selectedSearch(item) {
      // //console.log(item);
      this.$emit("selectMenu", item.path);
      this.$emit("setTab", item);
      this.$router.push(item.path);
    },
    onSearch(name) {
      var menuList = this.searchMenu(JSON.parse(JSON.stringify(this.menuList)));
      var arr = menuList.filter(
        
        (item) =>{
          return item.name.toLowerCase().indexOf(name.toLowerCase()) != -1 || ( enUS[item.name] ? enUS[item.name].toLowerCase().indexOf( name.toLowerCase()) != -1:false)
          } 
          
        //   enUS[item.name].toLowerCase().indexOf( this.$t(name).toLowerCase()) != -1 
      );

      this.arr = arr;

      // return arr
      // //console.log( name);
      // //console.log( menuList);
      // //console.log( arr);
    },
    searchMenu(obj, arr) {
      if (!arr) {
        var arr = [];
      }
      obj.forEach((item) => {
        if (item.children && item.children.length > 0) {
          this.searchMenu(item.children, arr);
        } else {
          arr.push(item);
        }
      });
      arr.forEach((item) => {
        delete item.children;
      });
      return arr;
    },
  },
};
</script>
<style lang="less" scoped>
  ::-webkit-scrollbar {
     width: 0 !important;
   }
</style>
<style lang="less">
    .ant-input-suffix{
      top: 40% !important;
    }
</style>