<template>
  <div class="common-wrapper">
    <el-select v-model="keyword" collapse-tags :placeholder="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[attr]"></el-option>
    </el-select>
  </div>
</template>
<script>
import {searchApi} from '@/api/search.js'
export default {
  name: "dropSelect",
  data () {
    return {
      dropDownValue: '',
      keyword: this.info,
      optionsMetaShow: [],
      defaultList:false,
    }
  },
  props:{
    info :{
      type: String,
      default:''
    },
	placeholder :{
	  type: String,
	  default:'请输入'
	},
    type:{
      type: String,
      default:'user'
    },
	param:{
		type:Object,
		default:()=>{}
	},
	id:{
	  type: Number,
	  default:0
	},
    attr:{
      type: String,
      default:'name'
    }
  },
  watch:{
    info( val ){
      if( !val ) return
      this.keyword = this.info;
    },
    keyword( val ){
      if( !val ) return;
      if( !val[this.attr]) return;
      this.$emit("select", this.keyword, this.id)
      this.keyword = val[this.attr];
    },
    dropDownValue(val){
      this.dropDownSearch( val )
    }
  },
  methods: {
    setValueNull(){
      this.$emit( "select", {id:0, name:''}, this.id )
    },
    dropDownSearch ( val ) {
      let keyword = val||this.dropDownValue;
	  let param = Object.assign( {type:this.type, name:keyword}, this.param);
      searchApi( param ).then(res=>{
          if( res.code == 200){
            this.optionsMetaShow = res.data||[];
          }
      })
    }
  }
}
</script>
<style>
.el-scrollbar {
  display: block !important;
}
</style>