<style>

</style>

<template>
<div :class="class" :style="{overflow:'inherit',width:width}" >
    <input type="text" id="cn1" v-model="value" 
    v-on:focus="focus" v-on:blur="blur" v-on:keyup="keyup">
	<ul class="hint-list" v-bind:style="{width:widthul}" 
	v-show="show " 
	v-on:mouseover="over=1" v-on:mouseout="over=0">
	    <li v-for="item in list" v-on:click="check(item)">
	    	<span>{{item.label}}</span>
	    </li>   
	    <li v-show="list.length==0"><span>暂无结果</span></li>
	</ul>
</div>


</template>
<script>
module.exports={
	props:{
		class:{
			type:String,default:' control control-hint'
		},
		type:{
			type:String,default:'1'
		},width:{
			type:String,default:'auto'
		},widthul:{
			type:String,default:'100%'
		},value:[String,Number],host:{
			type:String,default:'http://localhost:3003/'
		},url:{
			type:String,default:'search/'
		},ms:{
			type:String,default:300
		},medguid:{
			type:[String,Number],default:''
		},guid:{
			type:[String,Number],default:''
		}
	},
	data:function(){
		return {
			show:false,list:[],settime:'',over:0,parameter:{
				parameter_EQ_medguid:'',
				parameter_LIKE_entrpname:''
			}
		}
	},methods:{
		getData:function(){
			var that=this;
			this.parameter.parameter_EQ_medguid=this.medguid;
			this.parameter.parameter_LIKE_entrpname=this.value;
			Ajax.get(this.url,this.parameter).then(function(res){
				var result=res.data;

				if(result.data){
					that.$set('list',result.data);
				}
			})
		},check:function(item){

			this.value=item.label;
			this.guid=item.VALUE;
			this.show=false;
		},focus:function(){
			this.show=true;
			this.clear();
		},blur:function(){
			if(this.over==false){ 
				this.show=false;
			}			
		},keyup:function(){			
			this.clear();

		},clear:function(){
			var that=this;
			clearTimeout(this.settime);
			this.settime=setTimeout(function(){
				that.getData();
			},this.ms)
		}
	}
}
</script>