nezha-nezha-fronted/nezha-fronted/src/components/common/searchInput.vue

<template>
    <div class="new-search"  v-clickoutside="clickout">
        <div class="search-input-all input-position" @click="stop_click">
<!--            历史记录-->
            <div class="search-history" v-if="showHistory">
                <i class="nz-icon nz-icon-time" @click="look_history" id="search-view-history"></i>
                <div :class="localStorage_display?'localStorage_list_box none':'localStorage_list_box'">
                    <div class="list_box_title">
                        <span>{{$t('search.recentSearch')}}</span>
                        <i class="nz-icon nz-icon-close" @click="localStorage_display=!localStorage_display" id="search-close-history"></i>
                    </div>
                    <div class="list_box_content" v-if="history_once.length>0">
                        <ul>
                            <li v-for="(val,ind) in history_once" @click="select_history(ind,$event)" :key="ind" :id="'search-history-pick-'+ind">
                                <span v-for="(item,key) in val" :key="key">
                                    <span class="name">{{item.name}}: </span>
                                    <span class="value">{{item.val+' '}}</span>
                                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="list_box_clear">
                        <span v-if="history_once.length>0" @click="clear_history" id="search-clear-history">{{other.clearReSearch}}</span>
                        <span v-else class="no_historyList">{{$t('search.noRecentSearch')}}</span>
                    </div>
                </div>
            </div>
<!--            搜索框-->
            <div class="input-center-box" id="input-center-box">
              <el-scrollbar style="height: 100%;width: 100%; overflow-y: hidden" ref="searchScrollbar">
                <ul class="sreach_fixe_left" id="search-ul">
                    <li class="selectinfo_box" v-if="select_list.length>0" v-for="(val,ind) in select_list" :key="ind" @click="update_sreach(ind,$event)">
                        <div class="select_condition">
                            {{val.name}}
                        </div>
                        <div class="select_content" v-if="typeof val.val !='undefined' && val.val != null && ind!=sreach_num">
                            <span>{{val.valString ? val.valString : val.val}}</span>
                            <i class="nz-icon nz-icon-close" @click="close_selcet_list(ind,$event)"></i>
                        </div>
                        <div v-else-if="!change_sreach_show && ind==sreach_num && val.id!==7 " class="select_input">
                            <input type="text" autocomplete="off" id="sreach_input" v-model="input_sreach" :readonly="val.readonly"  @keyup="enter(val, $event)" @click="stop_click">
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'select'">
                              <el-scrollbar v-if="selectInfoList[val.label].length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                              </ul>
                            </div>
                            <div v-if="val.type === 'selectString'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">
                              <el-scrollbar v-if="selectInfoList[val.label].length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in selectInfoList[val.label]" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                              </ul>
                            </div>
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'terminalStatus'">
                              <el-scrollbar v-if="selectInfoList['terminalStatus'].length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in selectInfoList['terminalStatus']" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in selectInfoList['terminalStatus']" :key="key" @click="stringSelectInfo(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                              </ul>
                            </div>
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'dc'">
                              <el-scrollbar v-if="dcSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                  <li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in dcSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                              </ul>
                            </div>
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left" v-if="val.type == 'asset'">
                              <el-scrollbar v-if="assetSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in assetSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.host}}</li>
                              </ul>
                            </div>
                            <div v-if="val.type === 'assetState'" :style="'top:' + selectDom.top +'; left:'+selectDom.left" class="select_info_list">
                              <el-scrollbar v-if="assetStateSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in assetStateSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in assetStateSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                              </ul>
                            </div>
                            <div v-if="val.type === 'brand'" :style="'top:' + selectDom.top +'; left:'+selectDom.left" class="select_info_list">
                              <el-scrollbar v-if="brandSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                              </ul>
                            </div>
                            <div v-if="val.type === 'group'" :style="'top:' + selectDom.top +'; left:'+selectDom.left" class="select_info_list">
                              <el-scrollbar v-if="groupSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in groupSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in brandSelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                              </ul>
                            </div>
                            <div v-if="val.type === 'project'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">
                              <el-scrollbar v-if="projectSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in projectSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                              </ul>
                            </div>
                            <div v-if="val.type === 'severity'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " class="select_info_list">
                              <el-scrollbar v-if="severitySelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in severitySelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in severitySelect" :key="key" :class="search_select_style_num==key?'search-style-ind':''" @click="selectObject(val, item, $event)">{{item.name}}</li>
                              </ul>
                            </div>
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'module'">
                              <el-scrollbar v-if="moduleSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                                <ul>
                                    <li v-for="(item,key) in moduleSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                                </ul>
                              </el-scrollbar>
                              <ul v-else>
                                <li v-for="(item,key) in moduleSelect" :key="key" @click="selectObject(val, item, $event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                              </ul>
                            </div>
                            <!-- 新增日志模块action下拉选择 -->
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectAction'">
                                <ul>
                                    <li v-for="(item,key) in actionSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.value,$event)">{{item.value}}</li>
                                </ul>
                            </div>
                            <!-- 新增protocol下拉选择 -->
                             <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectType'">
                                <ul>
                                    <li v-for="(item,key) in schemaTypeSelect" :key="key" @click="tr_selectTypeInfo(item)">{{item.value}}</li>
                                </ul>
                            </div>
                            <!-- 新增protocol二层下拉 -->
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="TypeSelect.length!=0&&val.type == 'selectType'&&secondShow">
                                <ul>
<!--                                    <li v-for="(item,key) in TypeSelect" :key="key" @click="tr_selectProtocolInfo(item)">{{item.name}}</li>-->
                                </ul>
                            </div>
<!--                           时间计划-->
                            <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'select'&&val.id==5">
                                <ul>
                                    <li v-for="(item, i) in schlist" :key="i" @click="selectSul(item.name)">{{item.name}}</li>
                                </ul>
                            </div>
                          <!--endpoint 状态-->
                          <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'state'&&val.id==33">
                            <ul>
                              <li v-for="(item,key) in selectInfoList['endpointState']" :key="key" @click="tr_selectInfo(val.label,item.value,item.label,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.label}}</li>
                            </ul>
                          </div>
                          <!--alertMessage idc-->
                          <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'idc'&&val.id==27">
                            <el-scrollbar v-if="dcSelect.length > 8" class="el-scrollbar-small" style="height: 240px;">
                              <ul>
                                <li v-for="(item,key) in dcSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                              </ul>
                            </el-scrollbar>
                            <ul v-else>
                              <li v-for="(item,key) in dcSelect" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                            </ul>
                          </div>
                          <!--exprTemp ganem-->
                          <div class="select_info_list" :style="'top:' + selectDom.top +'; left:'+selectDom.left " v-if="val.type == 'selectTemp'&&val.id==13">
                            <el-scrollbar v-if="gnameList.length > 8" class="el-scrollbar-small" style="height: 240px;">
                              <ul>
                                <li v-for="(item,key) in gnameList" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                              </ul>
                            </el-scrollbar>
                            <ul v-else>
                              <li v-for="(item,key) in gnameList" :key="key" @click="tr_selectInfo(val.label,item.id,item.name,$event)" :class="search_select_style_num==key?'search-style-ind':''">{{item.name}}</li>
                            </ul>
                          </div>
                        </div>
                        <my-date-picker
                                v-model="timeFrame"
                                type="datetimerange"
                                range-separator="To"
                                start-placeholder="Start Time"
                                end-placeholder="End Time"
                                @change="changeDate"
                                :class="dataBackG?'':'dataBackG'"
                                v-if="ind==sreach_num&&val.id==7"
                        >
                        </my-date-picker>
                    </li>
<!-- 最开始的input框-->
                    <li class="select_input" v-if="change_sreach_show">
                        <input type="text" @click="read_input" v-model="no_condition" @keyup="enter_one" id="one-input" @keydown="clear_search_list" :placeholder="placeholder">
                    </li>
                </ul>
              </el-scrollbar>
            </div>
            <div v-show="clearSearchShow" class="clear-search" @click="clear_input">
                <i class="nz-icon nz-icon-circle-close"></i>
            </div>
            <div :class="input_list?'input_list none':'input_list'" :style="'top:' + selectDom.top +'; left:'+selectDom.left " @click="stop_click" id="input_list" v-if="!single || (single&&searchLabelList.length==searchMsg.searchLabelList.length)">
                <ul>
                    <li v-for="(val,ind) in searchLabelList" @click="select_name(val.name,ind,val.id,val.type,val.label,val.disabled,val.readonly,$event)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
                        <span>{{val.name}}</span>
                    </li>
                    <!--<li v-for="(val,ind) in searchLabelList"  v-if="val.name=='Protocol'" @click="select_type(val.name,ind,val.id,val.type,val.label,val.disabled)" :key="ind" :class="{'search-style-ind':searchStyleNum==ind,'is-disabled':val.disabled}">
                        <span>{{val.name}}</span>
                    </li>-->
                </ul>
            </div>
        </div>
        <button id="search-input-search" class="search-btn float-right" type="button" @click="select" v-if="showSearch"><i class="nz-icon nz-icon-search"></i></button>
        <!--<div class="new-search-btn" @click="select">
            <i class="nz-icon nz-icon-search"></i>
        </div>-->
    </div>
</template>

<script>
import searchSelectInfo from './searchSelectInfo' // 搜索框组件--下拉框内容
export default {
  name: 'index',
  data () {
    return {
      selectDom: { top: '', left: '', tempTop: '', show: true }, // 选择弹框的位置
      clearSearchShow: false,
      select_conditionsName: '',
      selectInfoList: searchSelectInfo,
      select_title: '',
      other: '',
      localStorage_display: true,
      input_list: true,
      change_sreach_show: true,
      select_list: [], // 当前的搜索条件和值
      historyList: [],
      actionSelect: [],
      dcSelect: [], // 数据中心
      assetSelect: [], // 资产
      assetStateSelect: [],
      brandSelect: [],
      groupSelect: [],
      projectSelect: [],
      severitySelect: [],
      moduleSelect: [],
      modelSelect: [],
      gnameList: [],
      schemaTypeSelect: [], // 日志检索Protocol下拉菜单
      TypeSelect: [], // Protocol二层下拉菜单
      secondShow: '', // 二层显示控制
      input_sreach: '',
      sreach_num: 0,
      searchLabelList: [ // 下拉列表里的选项
      ],
      bool: false,
      no_condition: '',
      // 历史记录列表
      history_once: [],
      name: '',
      id: '',
      schedata: {
        name: '',
        isValid: 1,
        pageSize: 30,
        pageNo: 1
      },
      schlist: [],
      timeFrame: [new Date(new Date() - 1 * 60 * 60 * 1000), new Date()],
      dataBackG: true,
      delBool: false,
      searchStyleNum: -1,
      isSearchNum: -1,
      search_select_style_num: -1,
      keyBool: false,
      delnum: 0,
      delcriteriaBool: false,
      selectInfo: false,
      disabaled: true,
      downBool: false,
      where: this.$route.path
    }
  },
  watch: {
    defaultValue: {
      immediate: true,
      handler (n) {
        if (n) {
          this.$nextTick(() => {
            if (this.defaultItem) {
              if (this.defaultItem == 'alertMessageState' && this.defaultValue) {
                this.searchLabelList.forEach((item, index) => {
                  if (item.id == 12) {
                    this.searchLabelList.splice(index, 1)
                  }
                })
                this.select_list.push({
                  name: this.$t('alert.list.state'),
                  type: 'select',
                  label: 'state',
                  disabled: false,
                  val: this.$t('alert.list.pending'),
                  valnum: 1
                })
                this.input_sreach = ''
                this.sreach_num = this.select_list.length
                this.change_sreach_show = false
                this.input_list = true
                this.select()
              }
            }
          })
        }
      }
    },
    inTransform: {
      immediate: true,
      handler (n) {
        const listsK = document.querySelectorAll('.input_list')
        listsK.forEach((item, index) => {
          item.style.display = 'none'
        })
        const listsV = document.querySelectorAll('.select_info_list')
        listsV.forEach((item, index) => {
          item.style.display = 'none'
        })
        /* if (n) {
                this.selectDom.tempTop = this.selectDom.top;
                this.selectDom.top = '36px';
              } else {
                this.selectDom.top = this.selectDom.tempTop;
              } */
        setTimeout(() => {
          listsK.forEach((item, index) => {
            item.style.display = ''
          })
          listsV.forEach((item, index) => {
            item.style.display = ''
          })
        }, 500)
      }
    },
    select_list: {
      // 监听下拉列表
      handler (newData, oldData) {
        this.$refs.searchScrollbar.update()
        if (newData.length == 0) {
          this.change_sreach_show = true
          this.clearSearchShow = false
        } else {
          this.clearSearchShow = true
        }
        /* if (this.$route.path.indexOf("alertList") > -1 || this.$route.path.indexOf("alertConfig") > -1) {
                // 处理alertType--asset联动问题：
                // 当已选alertType为asset时，将可选列表中的asset的disabled恢复为false；
                // 当已选alertType不为asset时，将可选列表中的asset的disabled设为true，若有已选的asset，则删除；
                let hasType = false;
                for (let i = 0; i < newData.length; i++) {
                  if (newData[i].label == "alertType" && newData[i].valnum) { //若存在alertType，判断可选列表中是否有asset，有的话disabled置为false
                    hasType = true;
                    if (newData[i].valnum == 3) {
                      for (let j = 0; j < this.searchLabelList.length; j++) {
                        if (this.searchLabelList[j].label == 'asset') {
                          this.searchLabelList[j].disabled = false;
                          break;
                        }
                      }
                      break;
                    } else {
                      for (let j = 0; j < newData.length; j++) {
                        if (newData[j].label == "asset") {
                          this.close_selcet_list(j);
                          break;
                        }
                      }
                      for (let j = 0; j < this.searchLabelList.length; j++) {
                        if (this.searchLabelList[j].label == 'asset') {
                          this.searchLabelList[j].disabled = true;
                          break;
                        }
                      }

                      break;
                    }
                  }
                }
                if (!hasType) {
                  for (let j = 0; j < this.searchLabelList.length; j++) {
                    if (this.searchLabelList[j].label == 'asset') {
                      this.searchLabelList[j].disabled = true;
                      break;
                    }
                  }
                }
              } */
      }
    },
    no_condition: {
      handler (newData, oldData) {
        if (newData != '') {
          this.input_list = true
        }
      }
    },
    searchMsg: {
      immediate: true,
      handler (n) {
        // console.log(n);
        if (n) {
          n.searchLabelList.forEach(item => {
            if (item.id === 27 && item.type === 'idc' && item.label === 'idcId') {
              this.getDcData()
            }
          })
        }
      }
    }
  },
  props: {
    searchMsg: {},
    defaultItem: {},
    defaultValue: {},
    inTransform: {},
    position: {},
    single: {},
    showHistory: {
      type: Boolean,
      default: true
    },
    showSearch: {
      type: Boolean,
      default: true
    },
    placeholder: {
      type: String,
      default: ''
    }
  },
  methods: {
    // dc
    clearSearch () {
      this.select_list = []
    },
    clickout () {
      this.input_list = true
    },
    selectObject (column, selectItem, e) {
      this.stop_click(e)
      for (let i = 0; i < this.select_list.length; i++) {
        const val = this.select_list[i]
        if (val.type == 'dc' && selectItem.searchType == 'dc') {
          val.val = selectItem.name
          val.valnum = selectItem.id
          val.valString = ''
        } else if (val.type == 'project' && selectItem.searchType == 'project') {
          val.val = selectItem.name
          val.valnum = selectItem.id
          val.valString = ''
        } else if (val.type == 'module' && selectItem.searchType == 'module') {
          val.val = selectItem.name
          val.valnum = selectItem.id
          val.valString = ''
        } else if (val.type == 'asset' && selectItem.searchType == 'asset') {
          val.val = selectItem.host
          val.valnum = selectItem.id
          val.valString = ''
        } else if (val.type == 'assetState' && selectItem.searchType == 'assetState') {
          val.val = selectItem.name
          val.valnum = selectItem.id
          val.valString = ''
        } else if (val.type === 'brand' && selectItem.searchType === 'brand') {
          val.val = selectItem.name
          val.valnum = selectItem.id
          val.valString = ''
        } else if (val.type === 'group' && selectItem.searchType === 'group') {
          val.val = selectItem.name
          val.valnum = selectItem.id
          val.valString = ''
        } else if (val.type === 'severity' && selectItem.searchType === 'severity') {
          val.val = selectItem.name
          val.valnum = selectItem.id
          val.valString = ''
        }
      }
      // this.select_list.push({type: 'dc', val: selectItem.name, valnum: selectItem.id});
      this.input_sreach = ''
      this.sreach_num = this.select_list.length
      this.change_sreach_show = true
      this.input_list = false
      const _this = this
      setTimeout('document.getElementById("one-input").focus()', 500)
      setTimeout(function () {
        _this.getHeight()
      })
      /* this.$nextTick(() => {
                  this.$refs.searchScrollbar.update();
                }); */
    },
    // 一层下拉点击
    tr_selectTypeInfo (val) {
      this.TypeSelect = []
      val.data.length != 0 && this.TypeSelect.push(val.data[0])
      val.data.length != 0 && (this.secondShow = true)
    },
    // 二层下拉点击
    tr_selectProtocolInfo (val) {
      this.select_list = []
      this.select_list.push({
        name: val.name,
        // id:id,
        type: val.type,
        label: val.label
        // disabled:disabled
      })
      this.change_sreach_show = false
      this.sreach_num = this.select_list.length - 1
      this.input_list = !this.input_list
      //   setTimeout("document.getElementById(\"sreach_input\").focus()", 500);
      const _this = this
      setTimeout(function () {
        _this.getHeight()
      })
    },
    Iskeywords (ind) {
      if (this.select_list[ind].id == 29) {
        this.searchLabelList.forEach(val => {
          if (val.id == 30 || val.id == 31 || val.id == 32 || val.id == 33) {
            val.disabled = false
          }
        })
      } else if (this.select_list[ind].id == 30 || this.select_list[ind].id == 31 || this.select_list[ind].id == 32 || this.select_list[ind].id == 33) {
        this.searchLabelList.forEach(val => {
          if (val.id == 29) {
            val.disabled = false
          }
        })
      }
    },
    getDcData () {
      this.$get('dc', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.dcSelect = response.data.list
          this.dcSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'dc')
          })
        }
      })
    },
    getAssetData () {
      this.$get('asset', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.assetSelect = response.data.list
          this.assetSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'asset')
          })
        }
      })
    },
    getAssetStateData () {
      this.$get('asset/stateConf', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.assetStateSelect = response.data.list
          this.assetStateSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'assetState')
          })
        }
      })
    },
    getBrandData () {
      this.$get('asset/brand', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.brandSelect = response.data.list
          this.brandSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'brand')
          })
        }
      })
    },
    getGroupData () {
      this.$get('asset/field/group', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.groupSelect = response.data.list
          this.groupSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'group')
          })
        }
      })
    },
    getModelData () {
      this.$get('model', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.modelSelect = response.data.list
          this.modelSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'model')
          })
        }
      })
    },
    getProjectData () {
      this.$get('monitor/project', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.projectSelect = response.data.list
          this.projectSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'project')
          })
        }
      })
    },
    getSeverityData () {
      this.$get('alert/severity', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.severitySelect = response.data.list
          this.severitySelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'severity')
          })
        }
      })
    },
    getModuleData () {
      this.$get('module', { pageNo: 1, pageSize: -1 }).then(response => {
        if (response.code === 200) {
          this.moduleSelect = response.data.list
          this.moduleSelect.forEach((item, index) => {
            this.$set(item, 'searchType', 'module')
          })
        }
      })
    },
    getGnameList () {
      this.$get('/expression/tmpl/gname').then(res => {
        if (res.code === 200) {
          this.gnameList = res.data.list.map((item, index) => {
            return {
              value: item,
              name: item,
              id: index
            }
          })
        }
      })
    },
    // 点击确认选择下拉内容
    tr_selectInfo (selectLabel, value, label, e) {
      this.stop_click(e)
      this.select_list.forEach(val => {
        if (val.label == selectLabel) {
          val.val = label
          val.valnum = value
        }
      })
      for (let i = 0; i < this.select_list.length; i++) {
        if (this.select_list[i].label == selectLabel) {
          this.select_list.splice(i, 1, Object.assign({}, this.select_list[i], { val: label, valnum: value }))
          /* this.select_list[i].val = label;
                    this.select_list[i].valnum = value; */
        }
      }
      this.input_sreach = ''
      this.sreach_num = this.select_list.length
      this.change_sreach_show = true
      this.input_list = false
      const _this = this
      setTimeout('document.getElementById("one-input").focus()', 500)
      setTimeout(function () {
        _this.getHeight()
      })
    },
    // 点击确认value是string类型的下拉内容, param: 字段对象，选中的选项
    stringSelectInfo (column, selectItem, e) {
      this.stop_click(e)
      this.select_list.forEach(val => {
        if (val.label === column.label) {
          val.val = selectItem.value
          val.valString = selectItem.label
        }
      })
      this.input_sreach = ''
      this.sreach_num = this.select_list.length
      this.change_sreach_show = true
      this.input_list = false
      const _this = this
      setTimeout('document.getElementById("one-input").focus()', 500)
      setTimeout(function () {
        _this.getHeight()
      })
    },
    // 点击历史记录图标
    look_history (e) {
      this.stop_click(e)
      this.localStorage_display = !this.localStorage_display
      this.restructure_historyDate()
    },
    backtime (t) {
      const myDate = new Date(t)
      const nt = myDate.getFullYear() + '-' + (myDate.getMonth() > 8 ? '' : 0) +
                    (myDate.getMonth() + 1) + '-' + (myDate.getDate() > 9 ? '' : 0) +
                    myDate.getDate() + ' ' +
                    (myDate.getHours() > 9 ? '' : '0') + myDate.getHours() + ':' +
                    (myDate.getMinutes() > 9 ? '' : 0) + myDate.getMinutes() + ':' +
                    (myDate.getSeconds() > 9 ? '' : 0) + myDate.getSeconds()
      return nt
    },
    changeDate () {
      this.dataBackG = false
      this.change_sreach_show = true
      if (this.timeFrame != []) {
        this.select_list[this.sreach_num].val = this.backtime(this.timeFrame[0]) + ' - ' + this.backtime(this.timeFrame[1])
        this.input_sreach = ''
        this.sreach_num++
      }
    },
    // 选择时间计划
    selectSul (name) {
      this.change_sreach_show = true
      this.select_list[this.sreach_num].val = name
      this.input_sreach = ''
      this.sreach_num++
      this.getHeight()
    },
    // 点击搜索
    select () {
      const objectInfo = {}
      this.change_sreach_show = true
      this.name = ''
      this.id = ''
      if (this.input_sreach != '') {
        this.select_list[this.sreach_num].val = this.input_sreach
        this.input_sreach = ''
        this.sreach_num = this.select_list.length
      }
      // input有值  默认添加到name中
      if (this.no_condition != '') {
        const no_condition_bool = false; let no_condition_str = ''; const route = this.$route.path
        if (this.select_list.length == 0) {
          // 日志模块新增路由判断
          if (route == '/Log_SecurityEventLogs' || route == '/Log_ProxyEventLogs' || route == '/Log_SesssionRecords' || route == '/Log_RadiusLogs') {
            no_condition_str = 'logId'
          } else if (route == '/Device_DeviceList') {
            no_condition_str = 'sn'
          } else if (route == '/system_PolicyConfigurationLog' || route == '/system_LoginLog') {
            no_condition_str = 'modifyBy'
          } else {
            no_condition_str = 'name'
          }
          if (no_condition_str == 'name') {
            // 处理空白输入时不可作为搜索条件
            // this.select_list.push({name: this.select_title.name, id:2, type:'input',val:this.no_condition,label:'name'});
            // this.searchLabelList.forEach((val,ind)=>{
            //   if(val.id == 2){
            //     this.searchLabelList.splice(ind,1);
            //   }
            // })
          } else if (no_condition_str == 'modifyBy') {
            this.select_list.push({ name: this.select_title.Operator, id: 6, type: 'input', val: this.no_condition, label: 'modifyBy' })
            this.searchLabelList.forEach((val, ind) => {
              if (val.id == 6) {
                this.searchLabelList.splice(ind, 1)
              }
            })
          } else if (no_condition_str == 'sn') {
            this.select_list.push({ name: this.select_title.SN, id: 8, type: 'input', val: this.no_condition, label: 'sn' })
            this.searchLabelList.forEach((val, ind) => {
              if (val.id == 8) {
                this.searchLabelList.splice(ind, 1)
              }
            })
          } else if (no_condition_str == 'id') {
            this.select_list.push({ name: this.select_title.Policy_ID, id: 1, type: 'input', val: this.no_condition, label: 'id' })
            this.searchLabelList.forEach((val, ind) => {
              if (val.id == 1) {
                this.searchLabelList.splice(ind, 1)
              }
            })
          } else if (no_condition_str == 'logId') { // 日志模块新增判断
            this.select_list.push({ name: 'Log ID', type: 'input', label: 'Log Id', val: this.no_condition })
            this.searchLabelList.forEach((val, ind) => {
              if (val.id == 1) {
                this.searchLabelList.splice(ind, 1)
              }
            })
          }
          this.sreach_num++
        } else {
          const no_condition_bool = false; let no_condition_str = ''; const route = this.$route.path; let bool = true
          if (route == '/Log_SesssionRecords' || route == '/Log_EventLogs') {
            no_condition_str = 'id'
          } else if (route == '/Device_DeviceList') {
            no_condition_str = 'sn'
          } else if (route == '/system_PolicyConfigurationLog' || route == '/system_UserManagement' || route == '/system_LoginLog') {
            no_condition_str = 'modifyBy'
          } else {
            no_condition_str = 'name'
          }
          this.select_list.forEach(val => {
            if (val.label == no_condition_str) {
              bool = false
              val.val += ',' + this.no_condition
            }
          })
          if (bool) {
            this.searchLabelList.forEach((val, ind) => {
              if (val.label == no_condition_str) {
                val.val = this.no_condition
                this.select_list.push(val)
                this.searchLabelList.splice(ind, 1)
              }
            })
            this.sreach_num++
          }
        }
        this.no_condition = ''
      }
      let labelBool = true
      this.select_list.forEach(val => {
        if (typeof (val.val) !== 'undefined' && val.val != null) {
          if (val.type === 'select') {
            if (val.label === 'alertType' || val.label === 'promType') {
              objectInfo.type = val.valnum
            } else if (val.label === 'assetState') {
              objectInfo.state = val.valnum
            } else if (val.label === 'credentialType') {
              objectInfo.types = val.valnum
            } else if (typeof (val.valnum) === 'undefined' || val.valnum == '') {
              this.selectInfoList[val.label].forEach(item => {
                if (item.label === val.val) {
                  labelBool = false
                  objectInfo[val.label] = item.value
                }
              })
              if (labelBool) {
                objectInfo[val.label] = val.val
              }
            } else if (val.label === 'promState') {
              objectInfo.statuses = val.valnum
            } else {
              objectInfo[val.label] = val.valnum
            }
          } else if (val.type === 'selectSelf') {
            objectInfo[val.label] = val.valnum
          } else if (val.type === 'severity') {
            objectInfo[val.label] = val.valnum
          } else if (val.type === 'selectAction') { // 新增日志判断
            objectInfo[val.label] = val.valnum
          } else if (val.type === 'dc') {
            objectInfo.dcIds = val.valnum
          } else if (val.type === 'asset') {
            objectInfo.asset = val.val
          } else if (val.type === 'module') {
            objectInfo.moduleId = val.valnum
          } else if (val.type === 'project') {
            objectInfo.projectIds = val.valnum
          } else if (val.type === 'assetState') {
            objectInfo.stateIds = val.valnum
          } else if (val.type === 'brand') {
            objectInfo.brandIds = val.valnum
          } else if (val.type === 'group') {
            objectInfo.groupIds = val.valnum
          } else if (val.type === 'selectString') {
            if (val.label === 'dcState') {
              objectInfo.state = val.val
            } else if (val.label === 'promType') {
              objectInfo.type = val.val
            } else if (val.label === 'chartType') {
              objectInfo.type = val.val
            } else if (val.label === 'protocol') {
              objectInfo.protocol = val.val
            }else if(val.label === 'operation'){
              objectInfo.operation = val.val
            }else if(val.label === 'state'){
              objectInfo.state = val.val
            }
          } else {
            objectInfo[val.label] = val.val
          }
        }
        // console.log('search obj', objectInfo)
      })
      this.getHeight()
      // 搜索完成后存储在本地历史记录中
      if (this.select_list.length != 0) {
        if (JSON.parse(localStorage.getItem('nz-history-' + this.where)) == undefined || JSON.parse(localStorage.getItem('nz-history-' + this.where)) == []) {
          this.historyList.unshift(this.select_list)
          localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyList))
        } else {
          this.historyList = JSON.parse(localStorage.getItem('nz-history-' + this.where))
          this.historyList.unshift(this.select_list)
          if (this.historyList.length > 10) {
            this.historyList.length = 10
          }
          localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyList))
        }
      }
      this.input_list = true
      this.restructure_historyDate()

      this.$emit('search', objectInfo)
    },
    // 清空历史记录
    clear_history () {
      this.historyList = []
      this.history_once = []
      localStorage.setItem('nz-history-' + this.where, JSON.stringify(this.historyList))
    },
    // 再次点击之前的历史记录
    select_history (ind, e) {
      this.stop_click(e)
      this.input_list = true
      this.change_sreach_show = true
      this.localStorage_display = !this.localStorage_display
      this.select_list = []
      JSON.parse(localStorage.getItem('nz-history-' + this.where)).splice(ind, 1)
      this.select_list = JSON.parse(JSON.stringify(this.history_once[ind]))
      this.sreach_num = this.select_list.length
      this.select_list.forEach(val => {
        this.searchLabelList.forEach((item, index) => {
          if (val.id == item.id) {
            this.searchLabelList.splice(index, 1)
          }
        })
      })
      this.select()
    },
    // 获取历史记录  数据进行处理以便循环展示
    restructure_historyDate () {
      if (localStorage.getItem('nz-history-' + this.where) !== undefined && localStorage.getItem('nz-history-' + this.where) !== null) {
        this.history_once = JSON.parse(localStorage.getItem('nz-history-' + this.where))
      }
    },
    clear_search_list (e) {
      const keyCode = window.event ? e.keyCode : e.which
    },
    // 监听输入框鼠标抬起事件
    enter_one (e) {
      const keyCode = window.event ? e.keyCode : e.which
      if (keyCode == 40) {
        if (this.searchStyleNum < this.searchLabelList.length - 1) {
          var disabledNum = 0
          this.searchLabelList.forEach(val => {
            if (val.disabled) {
              disabledNum++
            }
          })
          this.isSearchNum = this.searchStyleNum
          this.isSearchNum++
          if (!(this.searchLabelList[this.isSearchNum].disabled)) {
            this.searchStyleNum++
          } else {
            this.searchStyleNum += disabledNum + 1
          }
        }
        if (this.searchStyleNum >= 7) {
          document.getElementById('input_list').scrollTop += 28
        }
      }
      if (keyCode == 38) {
        if (this.searchStyleNum >= 0) {
          var disabledNum = 0
          this.searchLabelList.forEach(val => {
            if (val.disabled) {
              disabledNum++
            }
          })
          this.isSearchNum = this.searchStyleNum
          if (this.isSearchNum > 0) {
            this.isSearchNum--
          }
          if (!(this.searchLabelList[this.isSearchNum].disabled)) {
            this.searchStyleNum--
          } else {
            this.searchStyleNum -= disabledNum + 1
          }
        }
        if (this.searchStyleNum <= this.searchLabelList.length - 8) {
          document.getElementById('input_list').scrollTop -= 28
        }
      }
      if (this.no_condition == '') {
        if (!this.keyBool) {
          if (keyCode == 8) {
            const arr = this.select_list
            if (!this.delBool) {
              if (this.input_sreach == '') {
                for (let i = arr.length - 1; i >= 0; i--) {
                  this.input_list = true
                  this.change_sreach_show = false
                  this.sreach_num = i
                  this.input_sreach = arr[i].val
                  setTimeout('document.getElementById("sreach_input").focus()', 500)
                  this.delBool = true
                  break
                }
              }
            }
          }
        }
      }
      if (keyCode == 13) {
        if (this.searchStyleNum <= 0) {
          this.select()
        } else {
          const val = this.searchLabelList[this.searchStyleNum].name
          const ind = this.searchStyleNum
          const id = this.searchLabelList[this.searchStyleNum].id
          const type = this.searchLabelList[this.searchStyleNum].type
          const label = this.searchLabelList[this.searchStyleNum].label
          const disabled = this.searchLabelList[this.searchStyleNum].disabled
          const readonly = this.searchLabelList[this.searchStyleNum].readonly
          this.searchStyleNum = -1
          this.select_name(val, ind, id, type, label, disabled, readonly)
        }
      }
    },
    // input框监听是按删除还是回车
    enter (val, e) {
      // console.log(val);
      const keyCode = window.event ? e.keyCode : e.which
      if (val == 'ID' && keyCode == 13) {
        const id = /^[0-9]*$/
        if (!id.test(this.input_sreach) || this.input_sreach > 2147483647) {
          // 如果有不正确的值 进行删除
          this.input_sreach = ''
          this.$message.error(this.other.delErrorId)
          return false
        }
      }
      if (keyCode !== 8) {
        this.delBool = false
        this.delcriteriaBool = false
      }
      if (this.delBool) {
        if (keyCode == 8) {
          if (this.input_sreach == '') {
            this.searchMsg.searchLabelList.forEach((val, k) => {
              if (this.select_list[this.sreach_num].id == val.id) {
                this.searchLabelList.splice(k + 1, 0, val)
                this.Iskeywords(this.sreach_num)
              }
            })
            this.select_list.splice(this.sreach_num, 1)
            this.change_sreach_show = true
            setTimeout('document.getElementById("one-input").focus()', 500)
            this.input_list = false
            this.delBool = false
          }
        }
      } else {
        if (keyCode == 8) {
          if (this.delcriteriaBool) {
            this.searchMsg.searchLabelList.forEach((val, k) => {
              if (this.select_list[this.sreach_num].id == val.id) {
                this.searchLabelList.splice(k + 1, 0, val)
                this.Iskeywords(this.sreach_num)
              }
            })
            this.select_list.splice(this.sreach_num, 1)
            this.change_sreach_show = true
            setTimeout('document.getElementById("one-input").focus()', 500)
            this.input_list = false
            this.delcriteriaBool = false
          } else {
            if (this.input_sreach == '') {
              this.delcriteriaBool = true
            }
          }
        }
      }

      if (keyCode == 38 || keyCode == 40) {
        if (this.select_list[this.sreach_num].type !== 'select') {
          if (this.input_sreach !== '') {
            this.zhezhao_click()
            setTimeout('document.getElementById("one-input").focus()', 500)
            this.input_list = false
          }
        } else {
          if (keyCode == 40) {
            this.selectInfo = true
            if (this.search_select_style_num < this.selectInfoList[this.select_list[this.sreach_num].label].length - 1) {
              this.search_select_style_num++
            }
          }
          if (keyCode == 38) {
            this.selectInfo = true
            if (this.search_select_style_num >= 0) {
              this.search_select_style_num--
            }
          }
        }
      } else if (keyCode == 13) {
        this.searchMsg.zheze_none = true
        // 回车键
        if (!this.selectInfo) {
          this.select()
        } else {
          this.selectInfo = false
          this.tr_selectInfo(this.select_list[this.sreach_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].label, this.selectInfoList[this.select_list[this.sreach_num].label][this.search_select_style_num].value, e)
        }
      }
    },
    // 清空已输入的搜索条件
    clear_input (e) {
      this.stop_click(e)
      this.no_condition = ''
      this.input_sreach = ''
      this.select_list = []
      this.searchLabelList = []
      JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
        this.searchLabelList.push(val)
      })
      this.$nextTick(() => {
        this.$refs.searchScrollbar.update()
      })
    },
    // 修改已有参数
    update_sreach (ind, e) {
      // if(this.select_list[ind].id==6||this.select_list[ind].id==28){
      if (false) {
        this.sreach_num = ind
        this.downBool = false
        this.change_sreach_show = false
        this.input_list = true
      } else {
        this.input_list = true
        this.change_sreach_show = false
        this.sreach_num = ind
        this.input_sreach = this.select_list[ind].val
        if (this.select_list[ind].type == 'input') {
          this.downBool = true
        } else {
          this.downBool = false
        }
        setTimeout('document.getElementById("sreach_input").focus()', 50)
        this.getHeight()
        this.searchMsg.zheze_none = false
      }
    },
    // 删除要搜索的条件
    close_selcet_list (ind, e) {
      if (e) {
        this.stop_click(e)
      }
      // 处理alertType--asset联动问题：删除alertType时，将asset也删除
      /* if (this.select_list[ind].label == 'alertType') {
                  for (let i = 0; i < this.select_list.length; i++) {
                    if (this.select_list[i].label == 'asset') {
                      this.close_selcet_list(i);
                      for (let j = 0; j < this.searchLabelList.length; j++) {
                        if (this.searchLabelList[j].label == 'asset') {
                          this.searchLabelList[j].disabled = true;
                          break;
                        }
                      }
                      break;
                    }
                  }
                } */
      this.searchMsg.searchLabelList.forEach((val, key) => {
        if (this.select_list[ind].id == val.id) {
          this.searchLabelList.splice(key + 1, 0, val)
          this.Iskeywords(ind)
        }
      })
      this.select_list.splice(ind, 1)
      this.sreach_num--
    },
    // 阻止冒泡事件
    stop_click (e) {
      if (e) {
        e.cancelBubble = true
        e.stopPropagation()
      }
    },
    // 点击遮罩层
    zhezhao_click () {
      if (this.input_sreach != '') {
        if (!this.searchMsg.zheze_none) {
          if (this.input_sreach != '') {
            this.change_sreach_show = true
            let IDsplit
            const id = /^[0-9]*$/
            const bool = true
            if (this.select_list[this.sreach_num].id == 1) {
              // id==1  判断是不是搜索ID    如果是ID 会出现搜索多个ID  分割ID
              IDsplit = this.input_sreach.split(',')
              // 循环分割出来的ID  判断输入的每个ID是否正确
              for (let i = IDsplit.length - 1; i >= 0; i--) {
                if (!id.test(IDsplit[i]) || IDsplit[i] > 2147483647) {
                  // 如果有不正确的值 进行删除
                  IDsplit.splice(i, 1)
                  this.$message.error(this.other.delErrorId)
                }
                if (IDsplit[i] == '') {
                  IDsplit.splice(i, 1)
                }
              }
              this.input_sreach = ''
              // 从新拼接ID内容
              IDsplit.forEach(val => {
                this.input_sreach += val + ','
              })
              this.input_sreach = this.input_sreach.substr(0, this.input_sreach.length - 1)
              if (this.input_sreach != '') {
                this.select_list[this.sreach_num].val = this.input_sreach
                this.input_sreach = ''
                this.sreach_num++
                this.sreach_num = this.select_list.length
              } else {
                this.sreach_num = 0
                this.change_sreach_show = false
              }
            } else {
              this.select_list[this.sreach_num].val = this.input_sreach
              this.input_sreach = ''
              this.sreach_num = this.select_list.length
            }
          } else {
            let Bool = false
            this.select_list.forEach(val => {
              if (val.val == '' || val.val == undefined) {
                Bool = true
              }
            })
            if (Bool) {
              this.sreach_num = this.select_list.length - 1
            } else {
              this.sreach_num = this.select_list.length
            }
          }
          if (this.no_condition != '') {
            this.change_sreach_show = true
            if (this.select_list.length == 0) {
              this.select_list.push({ name: 'Name', id: 2, type: 'input', val: this.no_condition, label: 'name' })
              this.searchLabelList.forEach((val, ind) => {
                if (val.id == 2) {
                  this.searchLabelList.splice(ind, 1)
                }
              })
              this.sreach_num++
            } else {
              let bool = true
              this.select_list.forEach(val => {
                if (val.id == 2) {
                  bool = false
                  val.val += ',' + this.no_condition
                }
              })
              if (bool) {
                this.select_list.push({ name: 'Name', id: 2, type: 'input', val: this.no_condition, label: 'name' })
                this.searchLabelList.forEach((val, ind) => {
                  if (val.id == 2) {
                    this.searchLabelList.splice(ind, 1)
                  }
                })
                this.sreach_num++
              }
            }
            this.no_condition = ''
            this.sreach_num = this.select_list.length
          }
          setTimeout('document.getElementById("one-input").focus()', 500)
          this.input_list = !this.input_list
          const _this = this
          setTimeout(function () {
            _this.getHeight()
          })
          this.searchMsg.zheze_none = true
        }
      }
    },
    // 点击搜索框  显示搜索类型
    read_input (e) {
      e.cancelBubble = true
      e.stopPropagation()
      this.getHeight()
      this.input_list = !this.input_list
      this.getSelectPosition(e)
    },
    // 点击选择 搜索类型
    select_name (val, ind, id, type, label, disabled, readonly, e) {
      // if(id==43||id==45||id==48){  //根据id判断是否开启ip验证
      //     this.select_conditionsName=true
      // }
      if (type == 'input') {
        this.downBool = true
      } else {
        this.downBool = false
      }
      this.no_condition = ''
      this.searchMsg.zheze_none = false
      if (!disabled) {
        // 下标为0 不再直接执行查询
        // if (ind == 0) {
        //   this.select()
        // } else
        if (id == 7) {
          this.searchLabelList.splice(ind, 1)
          this.select_list.push({
            name: val,
            id: id,
            type: type,
            label: label,
            disabled: disabled,
            readonly
          })
          this.change_sreach_show = false
          this.input_list = !this.input_list
        } else if (id == 29) {
          this.searchLabelList.splice(ind, 1)
          this.select_list.push({
            name: val,
            id: id,
            type: type,
            label: label,
            disabled: disabled,
            readonly
          })
          this.change_sreach_show = false
          this.sreach_num = this.select_list.length - 1
          this.input_list = !this.input_list
          setTimeout(document.getElementById('sreach_input').focus(), 500)
          /* this.searchLabelList.forEach(val=>{
                    if(val.id==30||val.id==31||val.id==32||val.id==33){
                      val.disabled = true
                    }
                  })

                }else if(id==30||id==31||id==32||id==33){
                  this.searchLabelList.splice(ind, 1)
                  this.select_list.push({
                    name: val,
                    id:id,
                    type:type,
                    label:label,
                    disabled:disabled
                  }) */
          this.change_sreach_show = false
          this.sreach_num = this.select_list.length - 1
          this.input_list = !this.input_list
          setTimeout('document.getElementById("sreach_input").focus()', 500)
          /* this.searchLabelList.forEach(val=>{
                    if(val.id==29){
                      val.disabled = true
                    }
                  }) */
        } else {
          this.searchLabelList.splice(ind, 1)
          this.select_list.push({
            name: val,
            id: id,
            type: type,
            label: label,
            disabled: disabled,
            readonly
          })
          this.change_sreach_show = false
          this.sreach_num = this.select_list.length - 1
          this.input_list = !this.input_list
          if (id !== 6 && id !== 28) {
            setTimeout('document.getElementById("sreach_input").focus()', 500)
          }
        }
        const _this = this
        setTimeout(function () {
          _this.getHeight()
        })
      }
    },
    /* 计算select弹框的位置 */
    getSelectPosition (e) {
      const inputListDom = this.getDomFromParents(e.target, 'input-center-box', 0)
      if (inputListDom) {
        this.$nextTick(() => {
          if (this.inTransform) {
            // this.selectDom.top = "36px";
          } else {
            const position = inputListDom.getBoundingClientRect()
            this.selectDom.top = position.top + 36 + 'px'
            this.selectDom.left = position.left + 'px'
          }
        })
      }
    },
    /* 递归向上获取指定class的dom */
    getDomFromParents (dom, className, level) {
      const parentClassNames = dom.parentElement.className
      if (parentClassNames.indexOf(className) == -1) {
        if (level < 20 && dom.parentElement) { // 限制20层，避免溢出
          return this.getDomFromParents(dom.parentElement, className, ++level)
        } else {
          return false
        }
      } else {
        return dom.parentElement
      }
    },
    // 判断输入框的高度
    getHeight () {
      if (document.getElementById('search-ul').clientHeight < 24 || document.getElementById('input-center-box').clientHeight < 24) {
        document.getElementById('input-center-box').style.height = 27 + 'px'
        document.getElementById('search-ul').style.height = 21 + 'px'
      }
    },
    chlick_sreach (e) {
      this.stop_click(e)
      this.searchMsg.zheze_none = false
    },
    // 时间计划
    schelistget () {
      this.schlist = []
      this.$get('/schedule', this.schedata).then(data => {
        if (data.code == 200) {
          this.schlist = data.data.list
        }
      })
    },
    close_search (e) {
      this.selectDom.show = false
    }
  },
  mounted () {
    if (this.position) {
      this.where = this.$route.path + this.position
    }
    /* this.defaultItem ? this.select_list.push({name:this.defaultItem,label:this.defaultItem}) : '';
            this.defaultValue != '' ? this.no_condition=this.defaultValue:''; */
    this.restructure_historyDate()
    setTimeout(() => {
      if (this.$route.path === '/asset') {
        this.getAssetStateData()
      }
      if (this.$route.path === '/agent') {
        // this.getDcData()
      }
      if (this.$route.path === '/model') {
        this.getBrandData()
      }
      if (this.$route.path === '/assetLabel') {
        this.getGroupData()
      }
      if (this.$route.path === '/monitor/module') {
        this.getProjectData()
      }
      if (this.$route.path === '/alertRule') {
        this.getSeverityData()
      }
      if (this.$route.path === '/exprTemp') {
        this.getGnameList()
      }
    }, 1000)
    JSON.parse(JSON.stringify(this.searchMsg.searchLabelList)).forEach(val => {
      // if (val.name == 'Protocol') {
      //   this.schemaTypeSelect = val.doc.data
      // }
      if (val.prop == 'common_action') {
        this.actionSelect = val.doc.data
      }
      this.actionSelect.forEach((item) => {
        item.id = item.code
        item.label = val.label
        item.name = val.label
      })
      this.searchLabelList.push(val)
    })
    const _this = this
    document.onkeydown = function (event) {
      const e = event || window.event || arguments.callee.caller.arguments[0]
      if (e.keyCode == 27) {
        _this.close_search(e)
      }
    }
  }
}
</script>

<style scoped lang="scss">
.search-btn {
  height: 30px;
  width: 32px;
  border: none;
  outline: none;
  border-left: 1px solid $--primary-border-color;
  background-color: #F9F9F9;

  i {
    color: #666;
    font-size: 14px;
  }
}
.search-btn:focus:not(.nz-btn-disabled) {
  background-color: $btn-light-background-color-hover;
  i {
    color: $btn-normal-background-color-new;
  }
}
.search-input-placeholder{
  font-size: 12px;
  color: #999999;
  position: absolute;
  left: 7px;
}
.top-tools input {
  background-color: white;
}
    .new-search{
      display: flex;
      position: relative;
      line-height: 25px;
      border-radius: 2px;
      border: 1px solid $--primary-border-color;
    }
    .new-search .search-input-all{
        width: 226px !important;
        min-width: 226px;
        background-color: white;
        color: rgba(0,0,0,.55);
        height: 30px;
        line-height: 30px;
        border-bottom-left-radius: 2px;
        border-top-left-radius: 2px;
        display: flex;
        position: relative;
    }
    input {
        background-color: $content-right-background-color;
    }
    .search-input-all .btn-retract{
        padding: 0 4px;
        text-align: center;
    }
    .search-input-all .search-history{
        padding: 0px 7px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        border-right: 1px solid #e5e5e5;
        margin-top: 6px;
        position: relative;
    }
    .search-input-all .input-center-box{
        flex: 1;
        height: 100%;
        overflow: hidden;
    }
    .search-input-all .clear-search{
        padding: 0 5px;
        text-align: center;
        font-size: 12px;
    }
    .dataBackG{
        background: #f0f0f0;
    }
    .none{
        display: none !important;
    }
    .search-text{
        display: inline-block;
        margin-right: 20px;
    }
    .sreach_box{
        position: relative;
        width: 80%;
        height: 25px;
        padding: 20px;
        background: #fff;
        margin: 200px auto;
    }
    .keyring_sreach_right_btn{
        width: 18%;
        height: 25px;
        float: right;
        line-height: 25px;
        text-align: center;
        border: 1px solid #dfdfdf;
    }
    .keyring_sreach_right_btn .right-btn-group{
        float: left;
        width: 80%;
        border-right: 1px solid #dfdfdf;
        box-sizing: border-box;
    }
    .keyring_sreach_right_btn .right-btn-icon{
        float: left;
        width: 19%;
    }
    .sreach_box .close_zhezhao{
        position: absolute;
        right: 0;
        top: -50px;
        width: 24px;
        height: 25px;
        border-radius: 50%;
        background: #fff;
        text-align: center;
        line-height: 28px;
        font-size: 12px;
    }

    .localStorage_list_box{
        position: absolute;
        left: 10px;
        top: 36px;
        width: auto;
        min-width:250px;
        max-width: 350px;
        height: auto;
        border: 1px solid #dfdfdf;
        background: #fff;
        color: #2e2e2e;
        text-align: left;
        border-radius: 3px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        z-index: 9999;
        font-size: 12px;
    }
    .localStorage_list_box .list_box_title{
        width: 100%;
        height: 40px;
        line-height: 40px;
        line-height: 40px;
        text-align: center;
        position: relative;
        border-bottom: 1px solid #dfdfdf;
        color: #2e2e2e;
    }
    .localStorage_list_box .list_box_title i{
        position: absolute;
        right: 10px;
        top: 0px;
    }
    .localStorage_list_box .list_box_content{
        text-align: left;
        padding: 5px 0;
        box-sizing: border-box;
        border-bottom: 1px solid #dfdfdf;
    }
    .localStorage_list_box ul li{
        padding: 5px 10px;
        line-height: 20px;
    }
    .localStorage_list_box ul li:hover{
        background: #f0f0f0;
        cursor:pointer;
    }

    .localStorage_list_box ul li span{
        color: #2e2e2e;
    }
    .localStorage_list_box ul li .value{
        font-weight: 600;
    }
    .localStorage_list_box .list_box_clear{
        padding-left: 10px;
        line-height: 40px;
    }
    .localStorage_list_box .list_box_clear:hover{
        background: #f0f0f0;
        cursor:pointer;
    }
    .input-center-box .sreach_fixe_left{
        width: auto;
        display: flex;
        height: 100%;
        min-width: 100%;
    }
    .sreach_list{
        display: flex;
        justify-content:flex-start;
        height: 100%;
        padding-left: 10px;
    }
    .sreach_fixe_left .selectinfo_box{
        display: flex;
        flex-shrink: 0;
        width: auto;
        height: auto;
        margin: 3px 2px;
        font-size: 12px;
    }
    .selectinfo_box .select_condition{
        float:left;
        height: 13px;
        padding: 3px;
        background:#f8f8f8;
        line-height: 13px;
        color: rgba(0,0,0,.55);
    }
    .selectinfo_box .select_content{
        float: left;
        line-height: 13px;
        height: 13px;
        padding: 3px;
        background: #f0f0f0;
        color: rgba(0,0,0,0.85);
        display: flex;
    }
    .selectinfo_box .select_content .nz-icon-close{
      font-size: 12px;
    }
    .selectinfo_box .select_content>span {
      max-width: 100px;
      display: inline-block;
      white-space: nowrap;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .select_input{
        height: 100%;
        flex: 1;
        float: left;
        width: 100px;
    }
    .select_input input{
        width: calc(100% - 1px);
        height: 100%;
        border: none;
        float: left;
        padding-left: 5px !important;
        box-sizing: border-box;
        outline: none;
    }
    .select_input input:focus {
        border:none;
        box-shadow:none;
        outline: none;
    }
    .select_input .select_info_list{
        position: fixed;
        /*left: 100px;
        top: 36px;*/
        width: auto;
        max-height: 240px;
        padding: 5px 0;
        background: #fff;
        border: 1px solid #e5e5e5;
        border-radius: 3px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        overflow-y: auto;
        z-index: 9999;
        /*right: 139px;*/
    }
    .select_info_list ul li{
        padding: 5px 10px;
        line-height: 20px;
        text-overflow: ellipsis;
        width: 150px;
        word-break: break-all;
        white-space: nowrap;
        overflow: hidden;
    }
    .select_info_list ul li:hover{
        background: #f0f0f0;
        cursor: pointer;
    }
    .sreach_input .input{
        flex: 1;
        height: 100%;
        padding-left: 10px !important;
        box-sizing: border-box;
        position: relative;
    }
    .sreach_input .input input{
        width: 100%;
        height: 100%;
        border: none;
        padding: 0 !important;
        float: left;
    }
    .sreach_box input:focus {
        outline: none;
        border-color: transparent;
        box-shadow: none;
    }
    .sreach_input input::placeholder{
        color: rgba(0,0,0,0.55)
    }
    .input_list{
        position: fixed;
        /*left: 47px;
        top: 36px;*/
        width: auto;
        max-width: 400px;
        max-height: 240px;
        min-width: 300px;
        background: #fff;
        border-radius: 3px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        z-index: 101;
        overflow-y: auto;
        font-size: 12px;
    }
    .input_list ul{
        padding: 4px 0;
    }
    .input_list ul li{
        padding: 4px 10px;
        line-height: 16px;
        height: 20px;
    }
    .input_list ul li:hover{
        background: #f0f0f0;
        cursor:pointer;
    }
    .search-style-ind{
        background: #f0f0f0;
        cursor:pointer;
    }
    .sreach_fixe>i{
        margin-right: 15px;
    }
    .is-disabled{
        color: #C0C4CC;
        cursor: not-allowed !important;
        background: #fff !important;
    }
    li {
        list-style: none;
    }
</style>