<template>
  <div class="common-wrapper">
    <el-select v-model="keyword" collapse-tags placeholder="请选择" @click.native="dropDownSearch()" @clear="setValueNull" clearable>
      <div class="el-input" style="width:90%;margin-left:5%;">
        <input type="text" placeholder="请输入" class="el-input__inner" v-model="dropDownValue">
      </div>

      <el-option v-for="(item,index) in optionsMetaShow"
      :value="item" :key="index" :label="item.name"></el-option>
    </el-select>
  </div>
</template>
<script>
import {searchApi} from '@/api/search.js'
export default {
  data () {
    return {
      dropDownValue: '',
      keyword: this.info,
      optionsMetaShow: [],
      defaultList:false,
    }
  },
  props:{
    info :{
      type: String,
      default:''
    },
    type:{
      type: String,
      default:'user'
    }
  },
  watch:{
    info( val ){
      if( !val ) return
      this.keyword = this.info;
    },
    keyword( val ){
      if( !val ) return;
      if( !val.id) return;
      this.$emit("select", this.keyword)
      this.keyword = val.name;
    },
    dropDownValue(val){
      this.dropDownSearch( val )
    }
  },
  methods: {
    setValueNull(){
      this.$emit( "select", {id:0, name:''} )
    },
    dropDownSearch ( val ) {
      let keyword = val||this.dropDownValue;
      if( !keyword && this.defaultList){
        this.optionsMetaShow = this.defaultList;
        return 
      }
      searchApi( {type:this.type, keyword}).then(res=>{
        console.log("searchApi", res)
          if(res.code == 200){
            this.optionsMetaShow = res.data||[];
            if( !this.defaultList) this.defaultList= this.optionsMetaShow
          }
      })
    }
  }
}
</script>
<style>
.el-scrollbar {
  display: block !important;
}
</style>