<style scoped>
.box_product{width:100%;position: fixed;left:0px;bottom:0px;height:430px;
transform: translate(0px,110%);transition: all .4s linear;opacity: 0;z-index: 999;}
.box_product.current{
	transform: translate(0px,0%);opacity: 1;
}
.div_1003{width:1003px;margin:0px auto;display: block;}
.box_pro_con{width: 100%;background: #fff;border-top:1px #86b8bc solid;
border-bottom:1px #86b8bc solid;    margin-top: 20px;height: 410px;
box-shadow: 0px 0px 3px 2px rgb(232, 235, 239);}
.close{float: right;margin-top: 10px;
}
h2{width:50%;display: inline-block;margin:0px;color:#4aa8e5;font-size:16px;}
.div1 select{float:right;}
.div1{padding:15px 0px;}
.div2{padding-bottom: 15px;height: 30px;}
.box_ul{overflow: hidden;width:1003px;height:210px;
position: relative;}
/*ul{padding:0px;margin:0px;float:left;padding-top:15px;height:160px;}
ul li{float:left;width:321px;
    margin-right: 20px;position: relative;
    padding: 15px;height:140px;
    border: 1px #ccc solid;}*/
    ul{padding:0px;margin:0px;float:left;padding-top:15px;height:180px; overflow-y: auto; width: 1100px;}
    ul li{float:left;width:321px; 
    	margin-top: 10px;
    margin-right: 20px;position: relative;
    padding: 15px;height:150px;
    border: 1px #ccc solid;}
.divimg{float: left;
    width: 60px;
    height: 70px;}
.divimg img{    max-width: 100%;
    max-height: 100%;}
ul li p{    margin: 0px;
    padding-left: 74px;}

ul li p {color:#373737;font-size: 12px;}
ul li p span{display:block;color:#4aa8e5;font-size:12px;}
ul li p b{padding-bottom:5px;display: block;}
ul li a{position: absolute;
    left: 13px;
    top: 80px;}
.page span:nth-child(1){    width: 45%;
    margin-right: 5%;
    display: inline-block;
    text-align: right;}
.page span{color:#649fa3;font-size:18px;cursor: pointer;
text-decoration: underline;}
.btn-d{    padding: 5px 5px;
    border: 1px #649fa3 solid;
    color: #649fa3!important;
    font-size: 14px;
    border-radius: 8px;
    background: #fff;
    height: auto;position: relative;
    box-shadow: 0px 0px 3px 0px #ccc;}
.filter-form input{    height: 34px;
    padding: 0 10px;
    border: 1px solid #649fa3;
    border-right-width: 0;
    border-radius: 8px 0px 0px 8px;}
.filter-form  button{
	width:60px;height:34px;background: url('/images/box_pro_s12_07.png');
	border:0px;
}
.btn-c{position: absolute;
    left: 50%;
    margin-left: -501px;
    top: -27px;}
.btn-e img{    position: absolute;
    top: 4px;
    left: 10px;}
.btn-e{text-indent: 20px;    position: relative;}
.btn-u{position: absolute;margin-top:23px;}


</style>

<template>
<div class="box_product" :class="{'current':bool}">
	
		<a class="btn-d btn-c hide" href="javascript:void(0);">智能推荐</a>
	
	<div class="box_pro_con">
		<div class="div_1003">
		<a class="btn-d btn-d-activate" href="javascript:void(0);" style="margin-top:15px;">智能推荐</a>
		<span class="close" v-on:click="hide" style='cursor:pointer;'>
			<img src="/images/box_pro_s12_03.png"/>
		</span> <br> 
		<div class="div2 fl">
		<h2 class=" mt-10 w300" v-if="datas">{{datas.medList[index].medicalorgname}}</h2><br>
		<div action="###" class="filter-form   mt-10">
		        <input type="text" placeholder="请输入搜索条件" v-model="filtername"
		        v-on:keydown="down">
		        <button v-on:click="search"></button>
        		</div>
        		</div>
        		<div class="fr">
        		<div class="w250">  
				<select v-model="typeid" v-if="datas">
					<option v-for="item in datas.medList" 
					:value="item.medguid">{{item.medicalorgname}}</option>
				</select>
			</div>

					<a class="btn-d btn-e mt-10 fr"  href="javascript:void(0);" style="padding: 5px 10px;"
					v-show="check=='medAll'" v-on:click="check='medTJ'">
					<img src="/images/box_pro_s12_10.png"/>查看推荐</a> 
					<a class="btn-d btn-e mt-10 fr"  href="javascript:void(0);" style="padding: 5px 10px;"
					v-show="check=='medTJ'" v-on:click="check='medAll'">
					<img src="/images/box_pro_s12_12.png"/>查看全部</a>
        		</div>
			
			<!-- box-->
			<div class="box_ul">
				<ul>
				 <!-- | filterBy filtetxt in 'goodsname' -->
				 <p v-show="!list.length" style="width:1003px;text-align: center;">暂无数据</p>
					<li v-for="item in list ">
						<div class="divimg">
							<!-- <imagebox v-bind:imgarr="item.img"> -->
								<div class="big-imgs" 
								style="z-index: 99;height:80px;" v-on:click="setimg(item.img)">

								<img :src="item.img[0].img">
	                   			</div>
	                   		<!-- </imagebox> -->
						</div>
						<p><span>{{{item.goodsname}}}</span>
						<b>{{{item.goodsspec}}}      {{{item.unitstyle}}}  
						 {{item.importedflag==1?'国产':item.importedflag==1?'进口':''}}
						 </b>
						{{{item.productionaddress}}}<br/>
						{{{item.producer}}}
						</p>
						<a class="btn-d btn-u w80" href="javascript:void(0);"
						v-on:click="funcall(item)"
						v-show="item.masterguid!=item.guid">配对</a>
						<a class="btn-d btn-u w80" href="javascript:void(0);"
						v-show="item.masterguid==item.guid">已配对</a>
					</li>
				</ul>
			</div>
			<!-- box end -->
			<div class="page">
				<span v-show="prev.medguid"
				v-on:click="ckprev"><<
				{{prev.medicalorgname}}
				</span>
				<span v-show="next.medguid"
				v-on:click="cknext">{{next.medicalorgname}}>></span>
			</div>
		</div>
	</div>
	
</div>
</template>

<script>
module.exports={
	props:['bool','datas'],
	data:function(){
		return {
			show:false,typeid:'',index:0,length:'',
			prev:{},next:{},check:'medAll',list:[],filtetxt:'',filtername:''
		}
	},route:{
		activate:function(){

		}
	},
	methods:{
		setimg:function(img){

			this.$emit('setimg',img);
		},
		funcall:function(obj){

			this.$emit('funcall',obj)
		},
		search:function(){
			this.filtetxt=this.filtername;
			this.ref();
		},ref:function(){
			var l=this.datas[this.check][this.typeid] || [];
			var imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径

			var s=l.filter(function(el,index){
				if(el.goodsname && el.goodsname.indexOf(this.filtername)>-1){
					return el;
				}
			}.bind(this))
			//s.push({},{},{},{},{})

			for(var i=0;i<s.length;i++){
				s[i].img=(function(obj){

					if(obj==undefined || obj.length<10){
						return [{}]
					}
					obj=JSON.parse(obj);
					
					if(obj && obj.length>0){
						var s=obj[0];
						if(s && s.original && s.original.path){
							return [{
								img: imgReg.test(s.original.path)? s.original.path : s.original.path + s.original.name, text:''
							}]
						}
						return [{}]
						
					}else{
						return [{}];
					}
				}(s[i].pictcontent))
			}
			this.list=s;
			// this.refres();
		},down:function(e){
			if(e.key=='Enter'){
				this.ref();
			}
		},ckprev:function(){
			if(index>0){
				this.index-=1;
			}
		},cknext:function(){
			if(index<this.length-1){
				this.index+=1;
			}
		},hide:function(){
			this.bool=false;
			// this.show=false;
		},refres:function(){
			var amount=Math.max.apply(Math,$(".box_ul ul").
			map(function(){return $(this).outerWidth(true);}).get());

			$(".box_ul").mCustomScrollbar({
				axis:"x",
				theme:"inset",
				advanced:{
				autoExpandHorizontalScroll:true
				},
				scrollButtons:{
				enable:true,
				scrollType:"stepped"
				},
				keyboard:{scrollType:"stepped"},
				snapAmount:amount,
				mouseWheel:{scrollAmount:amount}
			});
			
		},getimg:function(obj){

		}
	},watch:{
		'datas':function(d){ 
			if(d.medList && d.medList.length>0){
				this.show=true;
				this.typeid=d.medList[0].medguid;
				this.length=d.medList.length;
				this.index=0; 

			}
		},'index':function(i){
			if(i==0){
				this.prev={}
			}else if(i>0){
				this.prev=this.datas.medList[i-1];
			}
			if(i<this.length-1){
				this.next=this.datas.medList[i+1];
			}
		},'typeid':function(){
			this.ref();
		},'check':function(val){


			this.ref();
		},'list':function(){

		}
	}
}
</script>