<style scoped>
.t-left a{display: block;height:20px;line-height: 20px;color:#333;}
.t-left {padding-left:10px;}
.t-left a.current{color:rgb(0, 0, 238);}
.itable td{padding:0px 0px;padding-left:10px;margin:10px 0px;}
.indicators-right{padding:0px;margin-left:0px;}
.itable>thead>tr>th{font-size:14px;}
</style>
<template>
<div class="container resource view view-transition" style="min-height: 892px;">
  <div class="pop-banner clearfix">
 
  <h3 class="current-module">供应商对码</h3>
  </div>
    <div class="indicators">
      <div class="indicators-left" style="width:320px;">
           <table class="itable">
            <thead>
              <tr>
                <th class="w320">医院列表</th>
              </tr>
              <tr>
                <th class="w320">
	                <div class="min-search min-search-green " style="display: inline-block;border-right:0px;">
		           <input class="min-search-txt" id="cn1" maxlength="20" v-model="search.hosName"
		           style="border-right:0px;" placeholder="医院搜索" v-model="searchtxt" v-rule>
		           <button class="min-search-btn" v-on:click="getData(1)"
		           style="margin-left:0px;"></button>
		        	</div>
                </th>
              </tr>
            </thead>
            <tbody>          
            <tr v-if="listdata.length==0">
            <td>暂无数据</td>
            </tr>   
              <tr v-for="d in listdata" v-else>
                <td class="t-left" >
                <a href="javascript:" :class="{'current':showid==d.medguid}" 
                v-on:click="show(d)">{{d.medname}}</a></td>         
              </tr> 
           </tbody>
          </table> 
	    <!-- <div class="pagination m-20-0">
			  <ul>
			    <li>
			      <a>首页</a>  
			    </li>
			    <li>
			      <a>上一页</a>      
			    </li>
			    <li>
			      <a class="active">1</a>      
			    </li>      
			    <li>
			      <a>下一页</a>      
			    </li>
			  </ul>
		</div> -->
    </div> 
    <div class="indicators-right" 
    style="background-color:#fff;width:640px;" v-show="showright">      
    	
    	<div style="margin-bottom:10px;">
    		<span style="position: relative;top:5px;">供应商：</span>
    		<div class="min-search min-search-green " style="display: inline-block;border-right:0px;">
	           <input class="min-search-txt" id="cn1" v-model="searchSupName"
	           style="border-right:0px;">
	           <button class="min-search-btn" v-on:click="getrightlist()"
	           style="margin-left:0px;"></button>
	        </div>
    	</div>
    	

	    <div class="ctable ct-parent">
	      <div class="ct-head break-line">
	        <span class="ct-col w180">供应商编码</span>
	        <span class="ct-col w330">供应商名称</span>
	        <span class="ct-col w100">对码状态</span>
	      </div>
	      <div v-if="list.length==0" style="text-align: center;">
	      	暂完数据
	      </div v-else>
	      <div class="ct-row" v-for="item in list">
	        <div class="row-line" v-on:click="slidedown($index,item)">
	          <span class="ct-col w180">{{item.medsuppliercode}}</span>
	          <span class="ct-col w330 break-it"><span class="break">
	          	{{item.medsuppliername}}
	          </span></span>
	          <span class="ct-col w100 activate">
	            <div>
	            {{item.selected=="true"?"已配对":"未配对"}}
	            </div>
	          </span>
	        </div>
	        <div class="row-launch" style="display:none;">
		        <div class="load" v-if="read">
			        <div class="sk-spinner sk-spinner-wave">
			            <div class="sk-rect1"></div>
			            <div class="sk-rect2"></div>
			            <div class="sk-rect3"></div>
			            <div class="sk-rect4"></div>
			            <div class="sk-rect5"></div>
			        </div>
		      	</div>
		          <table class="itable" v-else>
		            <thead>
		              <tr>
		                <th class="w50">配对</th>
		                <th class="w90">供应商</th>
		                <th class="w90">联系人</th>
		                <th class="w80">电话</th>
		                <th class="w90">地址</th>
		              </tr>
		            </thead>
		            <tbody v-for="item2 in datalist">
		              <tr>
		                <td>
		                	<a href="javascript:" class="btn-d btn-d-activate"
		                	v-show="item2.selected==false" v-on:click="toggle(item2,true)"
		                	>配对</a>
		                	<a href="javascript:" class="btn-d btn-d-disabled"
		                	v-show="item2.selected==true" v-on:click="toggle(item2,false)"
		                	>取消配</a>
		                </td>
		                <td>{{item2.chinesename}}</td>
		                <td>{{item2.contacts}}</td>
		                <td>{{item2.contacttel}}</td>
		                <td>{{item2.address}}</td>	               
		              </tr>
		            </tbody>
		          </table>
		          <pagination
		   				@page-change="detail"
		          :class="['m-20-0']"
		   				:page-no.sync="search2.pageNo"
		          :total-pages.sync="search2.totalPages">
		         
		   			</pagination>
		          <div class="zip" @click="slideup($index)"></div>
	        </div>
	      </div>
	    </div>
	    
	    <!-- <pagination
	   		@page-change="getData"
	      :class="['m-20-0']"
	   		:page-no.sync="search.page"
	      :total-pages.sync="search.totalPages">  
	   	</pagination> -->
    </div>
 </div>
</div>
</template>
<script>
module.exports={
	data:function(){
		return {
			listdata:[],
			lastIndex:'',
		      list:[{},{}],
		      datalist:{},
		      supname:null,
		      wvdatestart:null,
		      wvdateend:null,
		      medwvguid:null,
		      search:{
		          page: 1,
		          totalPages: 1,
		          pageSize:10,hosName:''
		      },
		      search2:{
		          pageNo: 1,
		          totalPages: 1,
		          pageSize:5
		      },
		      read:true,showid:'',showright:false,searchSupName:'',selectindex:'-1',
		      searchtxt:''
		}
	},methods:{
		toggle:function(item,bool){
			if(bool){
				Ajax.post('/supplier/operator_medSupRelation_supMatch',item)
				.then(function(res){
					var data=res.data;

					if(data.errorCode==0){
						for(var i=0;i<this.datalist.length;i++){
							this.datalist[i].selected=false;
						}
						item.selected=true;
						this.list[this.selectindex].selected='true';

					}
				}.bind(this))
			}else{
				Ajax.post('/supplier/operator_medSupRelation_supCancelMatch',item)
				.then(function(res){
					var data=res.data;

					if(data.errorCode==0){
						for(var i=0;i<this.datalist.length;i++){
							this.datalist[i].selected=false;
						}
						item.selected=false;

						this.list[this.selectindex].selected='false';

					}
				}.bind(this))
			}
		},
		show:function(item){
			this.showid=item.medguid;
			this.showright=false;
			this.selectindex="";
			this.getrightlist();
		},
		getrightlist:function(){
			var option={
				medguid:this.showid,
				searchSupName:this.searchSupName

			}
			Ajax.post('/supplier/operator_medsuprelation_getmedsuplist',option).
	          then(function(response){
	            var res=response.data;

	            if(res.errorCode==0){
	            	this.list=res.data;

	           		//self.search.totalPages=res.totalPages;
	           		this.showright=true;

	            }
	            
	        }.bind(this)) 
		},
		getData: function(flag){
	      var self = this;
	      if(flag){
	        self.search.page=1;
	      }
	      
	      	Ajax.post('/supplier/operator_medSupRelation_getHosList',this.search).
	          then(function(response){
	            var res=response.data;

	            if(res.errorCode==0){
	            	self.listdata=res.data;

	           		//self.search.totalPages=res.totalPages;

	            }
	            
	        })    
	    },
	    slideup:function(index){
	       //手风琴收起状态
	    	var self=this;

	        $(".row-launch:eq("+index+")").slideUp(400,function(){
		          $(".ct-row:eq("+index+")").removeClass('active');
		          $('.activate:eq('+index+')').removeClass('focus');
		          self.selectindex='';
	        });
	    
	    },
	    slidedown:function(index,item){
	      
	      //手风琴下拉状态
	    	var self=this;

	    	if(index === this.selectindex){
	    		self.slideup(self.selectindex);
	    		return ;
	    	}
	    	this.selectindex=index;
	        self.detail(item);
	        $(".row-launch").slideUp(0,function(){
		          $(".ct-row").removeClass('active');
		          $('.activate').removeClass('focus');
		          //self.selectindex='';
	        });

	        $(".row-launch:eq("+index+")").slideDown(400,function(){
	    	    	$(".ct-row:eq("+index+")").addClass("active");
	    	    	$('.activate:eq('+index+')').addClass('focus');
	    			//self.$set('lastIndex',index);
	     	});

	     	
	     },
	     detail:function(item){
	      var self=this;
	      self.read=true;
	      if(item){
		      this.search2.pageNo=1;
		      this.search2.relaguid=item.relaguid;
		      this.search2.medsuppliername=item.medsuppliername;
	  	  }
	       Ajax.post('/supplier/operator_medSupRelation_getSupListByName',this.search2).
	          then(function(response){
	            var res=response.data;

	            if(res.errorCode==0){
	            	self.$set('datalist',res.data.list);

	            	self.search2.totalPages=res.data.totalPages;
	            	
	        	}
	        	self.$set('read',false);
	          }) 
	     }
	},route:{
		activate:function(){
			this.getData();
		}
	}
}
</script>