<!-- 工具栏：搜索框 -->
<template>
    <span title="搜索菜单" class="tool-fox" @click="closeSearch()" v-if="!state.isShowSearchBtn">
        <el-icon><el-icon-Search /></el-icon>
    </span>
    <span title="搜索菜单" class="tool-fox" @click="startSearch()" v-else>
        <el-icon><el-icon-Search /></el-icon>
    </span>
    <span title="搜索-input" class="tool-fox search-fox" :class=" state.isSearch ? 'search-fox-show' : '' ">
        <el-select
            v-model="state.searchText" size="small" filterable placeholder="请输入菜单关键字" ref="search"
            @change="findMenuBySearch" @blur="closeSearch" @keyup.esc.native="closeSearch">
            <el-option v-for="item in appStore.searchList" :key="item.id" :label="item.text" :value="item.id"></el-option>
        </el-select>
    </span>
</template>

<script setup name="nav-tool-search">
import {getCurrentInstance, reactive} from "vue";
import {useAppStore} from "../../../store/app";
let { proxy } = getCurrentInstance();
const appStore = useAppStore();

// 所有状态
const state = reactive({
    isSearch: false,	// 当前是否处于搜索模式
    isShowSearchBtn: true,	// 是否显示打开搜索图标
    searchText: ''		// 搜索框已经输入的字符
})

// 开启搜索
const startSearch = function() {
    state.searchText = '';
    state.isSearch = true;
    setTimeout(function() {
        state.isShowSearchBtn = false;
        proxy.$refs['search'].focus();	//.$refs['nav-tool-bar'].
    }, 200);
};
// 关闭搜索
const closeSearch = function() {
    state.searchText = '';
    state.isSearch = false;
    setTimeout(function() {
        try{
            state.isShowSearchBtn = true;
            // 使其失去焦点
            proxy.$refs['search'].blur();
            // let dom = document.querySelector('body>div>.el-popper');
            // if(dom && dom.parentElement.parentElement === document.body) {
            //   document.querySelector('body>div>.el-popper').parentElement.style.display = 'none';
            // }
        }catch(e){throw e}
    }, 200);
};

// 查找菜单
const findMenuBySearch = function(id) {
    appStore.showMenuById(id);
    closeSearch();
};






</script>

<style scoped lang="scss">
  /* 搜素框 */
  .search-fox{display: inline-block; vertical-align: middle; overflow: hidden; max-width: 0px;
    padding: 0em 0em !important; /*margin-left: -5px; */transition: all 0.2s !important; transition-timing-function: linear !important;}
  .search-fox-show{display: inline-block; max-width: 240px; margin-left: 0px; padding: 0 1em;}
  .search-fox:hover{background-color: rgba(0,0,0,0) !important;}

  //.search-fox

  .search-fox {
    :deep(.el-input__wrapper){border-radius: 0px !important; border-width: 0px !important; border-bottom: 1px #409EFF solid !important; background-color: rgba(0,0,0,0);}
    :deep(.el-input__suffix){display: none;}

    /*去掉阴影边框*/
    :deep(.el-input__wrapper),
    :deep(.el-select .is-focus .el-input__wrapper),
    :deep(.el-input__wrapper:focus){box-shadow: none !important; }
  }
</style>
