<template>
	<div class="container resource close-left-menu">
      <div class="pop-banner clearfix">
        <div class="operate-btns">   
          <a v-on:click="downModel" class="fbtn fb-download"  >下载模板</a>  
          <a class="ml-20"  v-show="sh2">
          <upload-excel-plan :class="['upload-btn fbtn fb-upload']" 
          :tag="tagType" 
          :type="fileType" 
          :label="fileLabel"
          :exceltype="med"
          :medguid="checkHospitalGood"
          v-on:file-change="getBackTipsPlan" 
          ></upload-excel-plan><a>  
          <a @click="createRelation" href="javascript:void(0)" class="ml-20 fbtn fb-submit">批量生成供应关系</a> 
          <a @click="abandon()" href="javascript:void(0)" class="fbtn fb-dump" >清空</a>  
        </div>  
        <h3 class="current-module">批量生成供应关系</h3> 
      </div> 
      <div class="purchase-plan" v-show='show'> 
      <div class="form-group">
                <!-- <label class="label">供应商</label> -->
                <div class="control w300 h-30 fl">
                  <input id="cn1" type="text" v-if="sh1" @click="setTrue" v-model="medname" title='请输入医院查询' placeholder='请输入医院查询'> 
                  <input id="cn1" type="text" v-if="!sh1" readonly="readonly" v-model="medname" title='请输入医院查询' placeholder='请输入医院查询'> 
                  <div class="select-template" id="searchMore" style="display:none;">
                    <div class="div-select before-none" style="width:100%;">
                      <ul  style="z-index:1;top:0px;width:100%; margin-top: 0px;">
                        <li v-show="getMeds.length > 0" class="div-select-item pl10" v-for="med in getMeds">
                            <span style="width:100%;" @click="chooseSupplier(med,med.medguid)">{{med.medname}}</span>
                        </li>
                        <li class="div-select-item pl10" v-show="getMeds.length==0 || getMeds == undefined">
                            <span style="width:100%;">未查询到结果！</span>
                        </li>
                      </ul> 
                    </div>
                  </div>
                </div>
                <p class="lh-30 h-30 fl ml-20 mt-0">请为【{{medname}}】导入商品</p>
              </div> 
      </div> 
      <div class="purchase-plan" v-show='show'> 
        <table class="itable itable-thead-13px itable-td-long-text mb-20">
        <thead id="t_header">
          <tr>
            <th class="w50">序号</th> 
            <th class="w70">商品<br/>编号</th>
            <th class="w140">商品<br/>名称</th> 
            <th class="w140">生产<br>厂商</th>
            <th class="w140">注册证号／<br/>批准文号</th>
            <th class="w140">生产<br/>来源</th>
            <th class="w140">产地</th>  
          </tr>
        </thead>
        <tbody>
          <tr v-for="hospitalProduct in getMedcontentList">
            <td class="v-top">{{$index + 1 | getIndex}}</td>  
            <td class="t-left pr10  v-top">{{hospitalProduct.goodscode}}</td>
            <td class="t-left pr10  v-top">{{hospitalProduct.goodsname}}<br>{{hospitalProduct.unitstyle}} 
              </td> 
            <td class="t-left pr10  v-top">{{hospitalProduct.producer}}</td>
            <td class="t-left pr10  v-top">{{hospitalProduct.registkey}}</td>
            <td class="v-top">{{hospitalProduct.importedflag | IMPORTEDFLAG}}</td>
            <td class="v-top">{{hospitalProduct.productionaddress}}</td> 
          </tr>
        </tbody>
      </table> 
      </div>
      <div class="purchase-plan"  v-show='!show'> 
        <div class="fpart pd-form">
            <div class="fheader-plan bottom-gray" style='font-size:18px;'>
              <h4 v-if='falg' class="text-color-green">供应关系维护成功！</h4>
              <h4 class="text-color-green" v-else>供应关系维护失败！</h4>
            </div>
            <div class="bottom-gray" v-if='falg'  style='min-height:100px;'>
              <!-- <p class="f-size14 mt-20 mb-20 ml-5">供应商采购订单</p> -->
              <p class="f-size12" v-for='item in dataList'>{{item}}</p>
              <!-- <p class="f-size12">【CGD00001】已发送给供应商【北京医药股份有限公司】</p> -->
            </div>
            <div class="h-100 bottom-gray" v-else>
              <!-- <p class="f-size14 mt-20 mb-20 ml-5">供应商采购订单</p> -->
              <p class="f-size12">{{datas}}</p>
              <!-- <p class="f-size12">【CGD00001】已发送给供应商【北京医药股份有限公司】</p> -->
            </div>
          </div>
          <div class="step-btn" v-if='falg' v-show='!show'>
            <a href="javascript:;" @click="over()">完成</a>
          </div>
        </div>
     
          <!--新加提示信息 end-->
      <div class="roll-bg" v-show='requestS'>
          <div class="w60" style="margin:0 auto;">
              <img src="/images/roll.gif">
          </div>
          <div class="container resource t-center text-color-red">
            正在处理中，请勿关闭！
          </div> 
        </div> 
    </div>  
</template>
<script>
module.exports={
data:function(){
return{ 
    fileType:'file',
    tagType:'a',
    med:'goodsImp', 
    fileLabel:'导入商品',
    // 导入之后信息提示
          backMessage:{
            showDialog:'N',
            mList:[],// 提示信息
          },
     sh:true, 
     sh1:true,
     sh2:false,  
     show:true,
     getMedcontentList:[],  
      getDistributions:[], 
      getMeds:[],
      dataList:{},
      datas:'',
      checkHospitalGood:'',
      requestS:false,
      falg:true,
      medname:'', 
      search:{
        pageSize:5,
        page:1,
        totalPages:0,  
        }, 
        goOnSearch:true,
	};
},
  watch:{
    'medname': function(val){   
      if(val==''){
        this.getMedcontentList= []; 
        this.sh2 =false;
      }
      if(val!='' && this.goOnSearch){
        this.sh2 =true;
        this.getManagemeds(val);
        $("#searchMore").css("display","block");
      }else{  
        $("#searchMore").css("display","none");   
      }
    }
  },
 methods:{     
      // 下载模版
      downModel:function(){
        var self = this; 
       window.open ('https://obs.myhwclouds.com/csylcloud-file/templet/AutoRelation.xls?versionId=null');        
      },
        // 批量导入商品
        getBackTipsPlan:function(data){ 
          var self = this; 
          console.log(data);
          if(data.data.resList.length!=0){
            // 返回信息
            self.$set('backMessage.mList',data.data.resList); 
            self.$set('backMessage.showDialog','Y'); 
            self.$set('backMessage.mList',data.data.resList); 
            self.$set('getMedcontentList',data.data.iGoodsList); 
            return ;
           }
        },
        // 关闭信息提示弹出框
        closeDialog:function(){
          this.$set('backMessage.showDialog','N'); 
          this.$set('backMessage.mList',[]);  
        }, 
        //加载 医院列表数据
      getManagemeds:function(medname){ 
         var self = this;  
         Ajax.post('/supplier/getManagemeds',{ 'page': self.search.page,'pageSize': self.search.pageSize,'totalPages': self.search.totalPages,'medname': medname,})
          .then(function(response){   
          var data=response.data.data;
          if (response.data.errorCode == 0) {   
               self.$set("getMeds",data);  
                self.search.pageNo = data.pageNo;
                self.search.totalPages = data.totalPages;
            }else{
              layer.msg(response.data.message);

            } 
         })
      }, 
        //加载 
      init:function(){ 
         var self = this;  
         Ajax.post('/supplier/init',{})
          .then(function(response){   
          var data=response.data.data; 
          if (response.data.errorCode == 0) {   
              self.goOnSearch = false;
              $("#searchMore").css("display","none"); 
               self.$set("getMedcontentList",data.goods);    
               self.medname = data.medname;
               self.checkHospitalGood = data.medguid;
               if(data.goods.length >0){
                  self.sh1 = false;
               }
            }else{
              layer.msg(response.data.message);


            } 
         })
      }, 
      //选择医院
      getSupDoods:function(medguid){ 
         var self = this;    
         self.checkHospitalGood = medguid;      
      }, 
      //清空数据
      abandon:function(){ 
         var self = this;  
         Ajax.post('/supplier/abandon',{})
          .then(function(response){   
          var data=response.data.data;
          if (response.data.errorCode == 0) {   
               self.MessageBox({title:'提示', message:'删除成功!', type: 'alert'},function(action){
                window.location.reload();
              }); 
               // self.getDistributionList();
            }else{
              layer.msg(response.data.message);

          }
         })
      }, 
       //批量生成供应关系
      createRelation:function(){ 
         var self = this;  
         if(!self.medname){

             layer.msg('请选择医院!');

             return;
         }
         for(var i =0; i <self.getMeds.length; i++){
                  if(self.medname == self.getMeds[i].medname){
                      self.checkHospitalGood = self.getMeds[i].medguid;
                  } 
           }
         self.requestS = true;
         Ajax.post('/supplier/createRelation',{'medguid':self.checkHospitalGood})
          .then(function(response){   
          var data=response.data.data;
          self.requestS = false;
          if (response.data.errorCode == 0) {    
              self.show = false;   
              self.dataList=data; 
              self.falg=true;   
            }else{ 
              self.datas= response.data.message;
              self.falg=false;
            } 
         })
      }, 
      //批量生成供应关系
      over:function(){  
          window.location.reload();
      }, 
      setTrue: function(){
       this.goOnSearch=true;
    },
    // 选择供应商
    chooseSupplier: function(supplier,medguid) {
      var self = this;
      self.goOnSearch = false;
      $("#searchMore").css("display","none");
      self.medname = supplier.medname;
      self.checkHospitalGood = medguid;
      self.getMedcontentList= [];
    },
  
   },
	
    route:{
      activate : function(){  
        this.init();
      }
    }

};
</script>