<template>
<div class="container resource close-left-menu contaNEW">
  <div class="pop-banner clearfix">
    <div class="operate-btns">   
      <a @click="submitMatched()" class="fbtn fb-submit" >提交</a>  
    </div>  
    <h3 class="current-module">采购目录勾对</h3>
  </div>
  
  
  <!--supply-supplylist start-->
  <div class="supplylist clearfix supply-select">
     
    <div class="supplylist-root pt0 pr0 w240" style="border: none">
            <form class="search-bar mb-30" style="min-width: 240px;" active="###">
              <div class="search-btn fr cur-poin" @click='getMedList'> 
              </div>
              <input type="text" class="w180" placeholder="输入医院搜索" v-model="medname">
            </form>
            <div class="root-node" id="sortable" style='height: 480px;'>
            <div class="group-row"> 
              <div class="itable t-left box-shadow" style="border-bottom: 1px #e6e6e6 solid;" v-for="medlist in getMedLists">
                <div class="control radio-control pd10" >
                  <input type="radio" id="radios{{$index+1}}" name="radio" v-model="checkHospital" value="{{medlist.guid}}" style="opacity: 0;" v-on:click="getMed(medlist.guid)">
                  <label class="radio mr-0" for="radios{{$index+1}}" >
                  <span class="text-color-blue">{{ medlist.medname }}</span> <br>
                    <p class="ml-25">
                    明细：{{ medlist.count }} <br>
                    {{ medlist.pubtime}} <br>
                    {{ medlist.flag=='P2' ? '已发布':medlist.flag}}
                    </p>
                  </label>
                </div>
              </div>
            </div>  
          </div>
    </div> 
    <div style="border-left: 2px solid #4aa8e5;padding-left: 25px" class="supplylist-table ml-275">
       <div class="w670 h-50">
             <form class="search-bar w370 fl" active="###" v-show="shlist">
                <div class="search-btn fr cur-poin" @click='getMedListClick'> 
                </div>
                <input type="text"  placeholder="录入商品编码、商品名称、注册证号模糊搜索" v-model="goodsinfo">
             </form>
             <form class="search-bar w370 fl" active="###" v-show="!shlist">
                <div class="search-btn fr cur-poin" @click='checkboxGoodslist'> 
                </div>
                <input type="text"  placeholder="录入商品编码、商品名称、注册证号模糊搜索" v-model="goodsinfos">
             </form>
             <div class="checkbox-control fr">
                 <input type="checkbox" name="cb" id="cball{{$index}}" v-model="getNoMedGoods">
                 <label class="checkbox mr-0" for="cball{{$index}}">显示已对码商品</label>
              </div> 
        </div>

       <div v-show="shlist">
      <div class="fheader no-bottom pd0">
        <h4 class="fh-good">医院商品</h4>
      </div>
      <table class="itable itable-thead-13px">
        <thead>
          <tr>
            <th class="w50">序号</th>
            <th class="w150">商品名称</th>
            <th class="w40">商品规格</th>
            <th class="w150">生产厂商</th>
            <th class="w50">价格(元）</th>
            <th class="w70">注册证号</th>
            <th class="w50">包装单位</th>
          </tr>
        </thead>
        <tbody>
         <tr v-if="getMedcontentList.length==0"><td colspan="11">暂无数据！</td></tr>
          <tr v-for="sup in getMedcontentList">
            <td>
            <div class="control radio-control"  >
              <input type="radio" id="radio1{{$index+1}}" name="radio1" v-model="checkHospitalGood" value="{{sup.goodsguid}}" style="opacity: 0;" v-on:click="getSupDoods(sup.tempguid,sup.rowno,sup.medguid,sup.goodsguid,sup.productGuid,sup.goodsname,sup.goodsspec,sup.producer,sup.brand,sup.registkey,sup.productionAddress,sup.minUnitStyle,sup.importedFlag,sup.bigUintStyle,sup.bigUintQty,sup.unitstyle)">
              <label class="radio mr-0" for="radio1{{$index+1}}" > 
              {{ $index + 1 }}
              </label>
            </div> 
            </td> 
            <td>{{sup.goodsname}}</td>
            <td>{{sup.goodsspec}}</td>
            <td>{{sup.producer}}</td>
            <td>{{sup.price | numDigit 2 | numFmt}}</td> 
            <td>{{sup.registkey}}</td>
            <td>{{sup.unitstyle}}</td> 
          </tr> 
        </tbody>
      </table>
      <div class="pagination m-20-0">
        <em class="page">明细条目数【{{ search.total }}】</em>
        <pagination
          @page-change="getMedListClick()"
          
          :page-no.sync="search.page"
          :total-pages.sync="search.totalPages">
        </pagination>
      </div>   
      <div class="fheader no-bottom pd0">
        <h4 class="fh-good">供应商商品</h4>
      </div>
      <table class="itable itable-thead-13px">
        <thead>
          <tr>
            <th class="w90"></th>
            <th class="w40">序号</th>
            <th class="w80">商品名称</th>
            <th class="w80">商品规格</th>
            <th class="w100">生产厂商</th>
            <th class="w70">注册证号</th> 
            <th class="w30"></th>
            <th class="w130">单位系数/包装单位 </th> 
            <th class="w100">业务员 </th> 
          </tr>
        </thead>
        <tbody>
        <tr v-if="getDMResultList.length==0"><td colspan="11">暂无数据！</td></tr>
          <tr v-for="supGoods in getDMResultList">
            <td>
            <a href="javascript:;" class="btn button-green" v-on:click="clickMatch(supGoods.guid,supGoods.unitStyle,supGoods.purconverratio,supGoods.supconverratio)">配对</a> 
            </td> 
            <td>{{ $index + 1 }}</td> 
          <td>{{{ supGoods.goodsName}}}</td>
            <td>{{{ supGoods.goodsSpec }}}</td>
            <td>{{{supGoods.producer}}}</td>
            <td class="pr10">{{{supGoods.registKey}}}</td>
            <td>
                <span class="ct-col w30">
                    <span class="table-detail-icon icon-green">医</span>
                    <span class="table-detail-icon icon-green mt-20">供</span>
              </span>
            </td>
            <td> 
             <div style="width: 102px; height: 72px; border:1px solid #999999; border-radius:8px; margin-left: 13px;">
                 <div class="w50 fl">
                    <input type="text" v-model='supGoods.purconverratio' class="" style="border: 0px; border-radius: 8px 0px 0px 0px;" @change="medCheckInfo(supGoods.purconverratio, $index, 7)">
                    <p style="background: #999999; width: 40px; height: 1px; margin-left: 10px;"></p>
                    <input type="text" v-model='supGoods.supconverratio' style="border: 0px; border-radius: 0px 0px 0px 8px;"  @change="supCheckInfo(supGoods.supconverratio, $index, 7)"> 
                </div>
                <div class="w50 fl">
                 <p class=" lh-34 h-34">{{unitstyle}}</p>
                 <p style="background: #999999; width: 40px; height: 1px; margin-right: 10px; "></p>
                 <!-- <div v-on:click="getGoodsUnits($index,supGoods.guid)" v-if="!sh[$index]">{{supGoods.unitStyle}}</div> --> 
                 <select  v-on:click="getGoodsUnits($index,supGoods.guid)" v-if="!sh[$index]" style="border: 0px;"> 
                    <option>
                      {{supGoods.unitStyle}}
                    </option>
                 </select>
                 <select v-model="supGoods.unitStyle" style="border: 0px;" v-else> 
                    <option v-for="option in getGoodsUnitsList" v-bind:value="option">
                      {{option}}
                    </option>
                 </select> 
                 </div>
                 </div>
            </td>
            <td>  
              <select v-model="user.guid"> 
                  <option v-for="option in getUsersList" v-bind:value="option.guid">
                    {{option.realname}}
                  </option>
              </select>
            </td>
          </tr> 
        </tbody>
      </table>
      <div class="pagination m-20-0 hide">
        <em class="page" v-if="mfhdeptSearch">明细条目数【{{ mfhdeptSearch.total }}】</em>
        <pagination
          @page-change="getSupDoods()"
          
          :page-no.sync="search.page"
          :total-pages.sync="search.totalPages">
        </pagination>
      </div>  
      </div>

      <div v-show="!shlist">
      <div class="fheader no-bottom pd0">
        <h4 class="fh-good">已对码医院商品</h4>
      </div>
      <table class="itable itable-thead-13px">
        <thead>
          <tr>
            <th class="w50">序号</th>
            <th class="w150">商品名称</th>
            <th class="w40">商品规格</th>
            <th class="w150">生产厂商</th>
            <th class="w50">价格</th>
            <th class="w70">注册证号</th>
            <th class="w50">包装单位</th>
          </tr>
        </thead>
        <tbody>
        <tr v-if="!checkgetMedcontentList"><td colspan="11">暂无数据！</td></tr>
          <tr v-for="sup in checkgetMedcontentList">
            <td>
            <div class="control radio-control"  >
              <input type="radio" id="radio2{{$index+1}}" name="radio2" v-model="checkHospitalGood1" value="{{sup.goodsguid}}" style="opacity: 0;" v-on:click="getSupDoodsMatch(sup.tempguid,sup.goodsguid,sup.rowno,sup.unitstyle)">
              <label class="radio mr-0" for="radio2{{$index+1}}" > 
              {{ $index + 1 }}
              </label>
            </div> 
            </td> 
            <td>{{sup.goodsname}}</td>
            <td>{{sup.goodsspec}}</td>
            <td>{{sup.producer}}</td>
            <td>{{sup.price | numDigit 2 | numFmt}}</td> 
            <td>{{sup.registkey}}</td>
            <td>{{sup.unitstyle}}</td> 
          </tr> 
        </tbody>
      </table>
      <div class="pagination m-20-0">
        <em class="page">明细条目数【{{ search.total }}】</em>
        <pagination
          @page-change="checkboxGoodslist()"
          
          :page-no.sync="search.page"
          :total-pages.sync="search.totalPages">
        </pagination>
      </div>   
      <div class="fheader no-bottom pd0">
        <h4 class="fh-good">已对码供应商商品</h4>
      </div>
      <table class="itable itable-thead-13px">
        <thead>
          <tr>
            <th class="w130"></th>
            <th class="w50">序号</th>
            <th class="w80">商品名称</th>
            <th class="w80">商品规格</th>
            <th class="w100">生产厂商</th>
            <th class="w50">注册证号</th> 
            <th class="w30"></th>
            <th class="w70">单位系数 </th> 
            <th class="w70">包装单位 </th> 
            <th class="w100">业务员 </th> 
          </tr>
        </thead>
        <tbody>
          <tr v-if="queryMatchedGoodsList.length==0"><td colspan="11">暂无数据！</td></tr>
          <tr v-for="suplist in queryMatchedGoodsList">
            <td>
            <a href="javascript:;" class="btn button-green" v-on:click="cancelMatched()">取消配对</a> 
            </td> 
            <td>{{ $index + 1 }}</td> 
            <td>{{ suplist.goodsName}}</td>
            <td>{{ suplist.goodsSpec }}</td>
            <td>{{suplist.producer}}</td>
            <td class="pr10">{{suplist.registKey}}</td>
            <td>
                <span class="ct-col w30">
                  <span class="table-detail-icon icon-green">医</span>
                  <span class="table-detail-icon icon-green mt-10">供</span>
                </span>
            </td>
            <td> 
                {{suplist.purConverRatio}}</br>
                {{suplist.supConverRatio}}
            </td>
            <td> 
               {{unitstyle1}}</br>
               {{suplist.supplyUnit}}
            </td>
            <td>  
                {{suplist.realName}}
            </td>
          </tr> 
        </tbody>
      </table>
      <div class="pagination m-20-0 hide">
        <em class="page" v-if="mfhdeptSearch">明细条目数【{{ mfhdeptSearch.total }}】</em>
        <pagination
          @page-change="getSupDoods()"
          
          :page-no.sync="search.page"
          :total-pages.sync="search.totalPages">
        </pagination>
      </div> 

      </div>

    </div>
  </div>
  <!--supply-supplylist end-->
</div>
</template>
<script>
module.exports={
data: function(){
return {
        getMedLists: [],     //左侧列表
        medname:'',
        goodsinfo:'',
        getMedcontentList:[],
        search: { 
        pageSize: 5,
        page: 1,
        total: 0,
        totalPages: 0
        },
        search1: { 
        pageSize: 20,
        page: 1,
        total: 0,
        totalPages: 0
        },
        getNoMedGoods:'', 
        guid:'',
        checkHospital:'',
        checkHospitalGood:'',
        checkHospitalGood1:'',
        getDMResultList:[],
        getGoodsUnitsList:[],
        getUsersList:[],
        curUser:'',
        sh:[],
        match:{
          guid:'',
          rowno:'',
          medguid:'',
          medGoodsguid:'',
          supplierGoodsguid:'',
          staffguid:'',
          staffname:'',
          supplyunit:'',
          purconverratio:'',
          supconverratio:'', 
        },
        unitstyle:'',
        unitstyle1:'',
        shlist:true,
        queryMatchedGoodsList:[],
        cancelMatchedList:{
          tempguid:'',
          rowno:'',
        }, 
};
},
watch:{ 
     getNoMedGoods(flg) { 
      var self = this; 
       if(flg){
        self.checkboxGoodslist();
        self.getNoGoods = flg; 
        self.shlist = false;
        self.checkHospitalGood1 = '';
        self.$set("queryMatchedGoodsList",[]);   
       }else{ 
        self.$set("getDMResultList",[]);   
        self.getMedListClick();
        self.getNoGoods = flg; 
        self.shlist = true;
        self.checkHospitalGood = '';
       }
     },
   },
   computed: {
        // 获取vuex中数据的方法
         user: function () {
            return this.$store.state.user.curUser;
        }
    },
methods: {
     //左侧列表 加载数据
      getMedList:function(){ 
         var self = this;   
         Ajax.post('/relation/getMedList',{'medname':self.medname})
          .then(function(response){   
          var data=response.data.data;
          if (response.data.errorCode == 0) {   
               self.$set("getMedLists",data); 
                 if(data.length ==0){
                  //跳转
                  self.$router.go({
                    path: '/procurementSupplierList'
                  }); 
                }
               for (var i = 0; i < data.length; i++) {
                     self.guid =data[0].guid; 
                     self.checkHospital = data[0].guid; 
               }
               self.getMedListClick();
            }else{
              layer.msg(response.data.message);
            } 
         })
      },  
      getMed:function(guid){ 
          var self = this;   
          self.guid = guid; 
          self.getMedListClick();
      },
      //加载右侧商品数据
      getMedListClick:function(){ 
         var self = this;   
         Ajax.post('/relation/getMedGoods',{'page':self.search.page,'pageSize':self.search.pageSize,'totalPages':self.search.totalPages,'guid':self.guid,'goodsinfo':self.goodsinfo})
          .then(function(response){   
          var data=response.data.data;
          self.$set("getMedcontentList",data.list);   
          self.search.totalPages=data.totalPages;
          self.search.total=data.total;         
         })
      }, 
      //显示已对码商品
      checkboxGoodslist:function(){ 
         var self = this; 
         var guid = self.guid;    
         Ajax.post('/relation/queryMatchedMedGoods',{'page':self.search.page,'pageSize':self.search.pageSize,'totalPages':self.search.totalPages,'guid':self.guid,'goodsinfo':self.goodsinfos})
          .then(function(response){   
          var data=response.data.data;
          self.$set("checkgetMedcontentList",data.list);   
          self.search.totalPages=data.totalPages;
          self.search.total=data.total;         
         })
      }, 
      //对码商品
      getSupDoods:function(guid,rowno,medguid,goodsguid,productguid,goodsname,goodsspec,producer,brand,registkey,productionAddress,minunitstyle,importedflag,biguintstyle,biguintqty,unitstyle){ 
         var self = this; 
         self.unitstyle = unitstyle;
         self.checkHospitalGood = goodsguid; 
         self.match.guid = guid;
         self.match.rowno = rowno;
         self.match.medguid = medguid;
         self.match.medGoodsguid = goodsguid;
         Ajax.post('/relation/getDMResult',{'page':self.search1.page,'pageSize':self.search1.pageSize,'totalPages':self.search1.totalPages,'productGuid':productguid,'goodsName':goodsname,'goodsSpec':goodsspec,'producer':producer,'brand':brand,'registKey':registkey,'productionAddress':productionAddress,'minUnitStyle':minunitstyle,'importedFlag':importedflag,'bigUintStyle':biguintstyle,'bigUintQty':biguintqty})
          .then(function(response){   
          var data=response.data.data;
          self.$set("getDMResultList",data);   
          for (var i = 0; i<self.getDMResultList.length;i++) {
              self.sh.push(false);
          }
         })
          self.getUsers();
      },
      //对码商品
      getGoodsUnits:function(index,guid){ 
         var self = this;   
         self.sh.splice(index,1,true); 
         Ajax.post('/relation/getGoodsUnits',{'guid':guid})
          .then(function(response){   
          var data=response.data.data;
          self.$set("getGoodsUnitsList",data);    
         })
      },
      //对码商品
      getUsers:function(){ 
         var self = this;  
         Ajax.post('/relation/getUsers',{})
          .then(function(response){   
          var data=response.data.data;
          self.$set("getUsersList",data);    
         })
      },
      //配对
      clickMatch:function(goodsguid,supplyunit,purconverratio,supconverratio){ 
         var self = this; 
         if(!supplyunit ||!supconverratio||!purconverratio) {
             layer.msg('单位系数和包装单位不能为空!');

             return;
				}
         for (var i = 0; i < self.getUsersList.length; i++) {
           if(self.user.guid == self.getUsersList[i].guid){
            self.match.staffname = self.getUsersList[i].realname;
           }
        } 
         self.match.supplierGoodsguid = goodsguid;
         self.match.staffguid = self.user.guid;
         self.match.supplyunit = supplyunit;
         self.match.purconverratio = purconverratio;
         self.match.supconverratio = supconverratio; 
         if((purconverratio != 1 && supconverratio != 1) ||  (purconverratio != 1 && supconverratio != 1)){
             layer.msg('转换系数必须有一个值为1!');
             return;
         } 
         Ajax.post('/relation/clickMatch',{'match':self.match})
          .then(function(response){   
          var data=response.data.data;
          if(response.data.errorCode == 0){
              self.getMedListClick();
              self.$set("getDMResultList",'');
          }else{
              layer.msg(response.data.message);

          } 
         }) 
      },
      //对码商品
      getSupDoodsMatch:function(guid,goodsguid,rowno,unitstyle){ 
         var self = this;   
         self.cancelMatchedList.tempguid = guid;
         self.cancelMatchedList.rowno = rowno;
         self.checkHospitalGood1 = goodsguid; 
         self.unitstyle1 = unitstyle;
         Ajax.post('/relation/queryMatchedSupGoods',{'tempguid':guid,'rowno':rowno})
          .then(function(response){   
          var data=response.data.data;
          self.$set("queryMatchedGoodsList",data);    
         }) 
      },
      //取消配对
      cancelMatched:function(){ 
         var self = this;  
         var guid = self.cancelMatchedList.tempguid;
         var rowno = self.cancelMatchedList.rowno;
         Ajax.post('/relation/cancelMatched',{'tempguid':guid,'rowno':rowno})
          .then(function(response){   
          var data=response.data.data;
          if(response.data.errorCode == 0){
              self.checkboxGoodslist(); 
              self.$set("queryMatchedGoodsList",[]);    
          }else{
              layer.msg(response.data.message);

          } 
         })
      },
      //提交验证
      submitMatched:function(){ 
         var self = this;   
         if(self.getMedcontentList.length != 0){
              self.MessageBox({
                          title:'提示',
                          message:'医院商品列表还有【'+self.getMedcontentList.length+'】条商品未对码，是否放弃供应？', 
                          type:'alert',
                          showCancelButton: true
                        },function(action){  
                          if(action == 'cancel'){ 
                                return;
                          }else{
                                self.submitMatchedList();
                          }
                      });    
         }else{
          self.submitMatchedList();
         }
      },
        // 提交
      submitMatchedList: function() {
        var self = this;
        Ajax.post('/relation/submitMatched',{'guid':self.guid})
        .then(function(response){   
        var data=response.data.data;
        if(response.data.errorCode == 0){ 
          self.MessageBox({title:'提示', message:response.data.message, type: 'alert'},function(action){
             self.getMedList(); 
             self.$set("getDMResultList",[]);     
            });  
        }else{
            layer.msg(response.data.message);

        } 
       }) 
      },
       // 验证医院单位系数
      medCheckInfo: function(po, index, code) {
        var self = this;
        if (po <= 0 || po > 99 || isNaN(po)) {
          self.MessageBox({title:'警告', message:"请输入大于0小于99的正整数!", type: 'alert'},function(action){
            if (action == 'confirm') {
              if (code == 1) {
                self.$set('getDMResultList['+index+'].purconverratio', '');
              } else {
                self.$set('getDMResultList['+index+'].purconverratio', '');
              }
            }
          });
        }  
      },
      //验证供应商单位系数
      supCheckInfo: function(po, index, code) {
        var self = this;
        if (po <= 0 || po > 99 || isNaN(po)) {
          self.MessageBox({title:'警告', message:"请输入大于0小于99的正整数!", type: 'alert'},function(action){
            if (action == 'confirm') {
              if (code == 1) {
                self.$set('getDMResultList['+index+'].supconverratio', '');
              } else {
                self.$set('getDMResultList['+index+'].supconverratio', '');
              }
            }
          });
        } 
      },
},
route:{
    activate : function(){
      var self = this;
      self.medname='';
      self.getMedList(); 

    }
}
};
</script>