<template>
  <div class="container resource close-left-menu" style="min-height: 599px;">

  <div class="pop-banner clearfix">
    <div class="operate-btns">
      <a class="fbtn fb-return" href="javascript:history.go(-1)">返回</a>
      <a href="javascript:void(0)" class="fbtn fb-save" @click="check" v-show='approvestate'>审核完成</a>    
    </div>
    <h3 class="current-module">商品主数据审核</h3>
  </div>
  <!--supply-productview start-->
  <div class="supply-productview clearfix">
  
    <div class="pd-form" v-if="list">
      <div class="group-row">
        <div class="form-group">
          <label class="label">商品编号</label>
          <div class="control input-has-btn">
            <input type="text" placeholder="商品编号" title="商品编号" readonly>
          </div>
        </div>
        <div class="form-group">
          <label class="label">商品名称</label>
          <div class="control">
            <input type="text" placeholder="商品名称" title="商品名称" readonly v-model="list.goodsname">
          </div>
        </div> 
      </div>
      <div class="group-row">
        <div class="form-group">
          <label class="label">生产厂商</label>
          <div class="control">
            <input type="text" placeholder="生产厂商" title="生产厂商" readonly v-model="list.producer">
          </div>
        </div>
        <div class="form-group">
          <label class="label">批准文号／注册证号</label>
          <div class="control">
            <input type="text" placeholder="批准文号／注册证号" title=">批准文号／注册证号" readonly v-model="list.registkey">
          </div>
        </div>
      </div>
        <div class="group-row">
        <div class="form-group">
          <label class="label">规格</label>
          <div class="control">
            <input type="text" placeholder="规格" title="规格" readonly v-model="list.goodsspec">
          </div>
        </div>
        <div class="form-group">
          <label class="label">产地</label>
          <div class="control">
           <input type="text" placeholder="产地" title="产地" readonly v-model="list.productionaddress">
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
          <label class="label">品牌</label>
          <div class="control">
            <input type="text" placeholder="品牌" title="品牌" readonly v-model="list.brand">
          </div>
        </div>
         <div class="form-group">
          <label class="label">生产来源</label>
          <div class="control">
            <div class="radio-control" v-if="list.importedflag==1">
              <input type="radio" id="radio01" name="radioio" checked="checked">
              <label class="radio" for="radio01">国产</label>
            </div>
            <div class="radio-control" v-else>
              <input type="radio" name="radioio" id="radio02" checked="checked">
              <label class="radio" for="radio02">进口</label>
            </div>
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
          <label class="label">商品大类</label>
          <div class="control">
            <input type="text" placeholder="商品大类" title="商品大类" readonly v-model="list.goodscate | GOODSCATE">
          </div>
        </div>
        <div class="form-group">
          <label class="label">计量单位</label>
          <div class="control">
            <input type="text" placeholder="计量单位" title="计量单位" readonly v-model="list.unitstyle">
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
           <label class="label">药品本位码</label>
           <div class="control">
            <input type="text" placeholder="药品本位码" title="药品本位码" readonly v-model="list.productstandardcode">
          </div>
        </div>
        <div class="form-group">
          <label class="label">器械产品DI</label>
          <div class="control">
            <input type="text" placeholder="器械产品DI" title="器械产品DI" readonly v-model="list.specstandardcode">
          </div>
        </div>
      </div>
      <div class="package-form clearfix">
        <div class="package-item package-sm" style="margin-left:84px;">
          <h3>小包装</h3>
          <div class="package-msg">
            <input type="text" placeholder="包装含量" title="包装含量" readonly v-model="list.minunitqty">
          </div>
          <div class="package-msg">
            <input type="text" placeholder="包装单位" title="包装单位" readonly v-model="list.minunitstyle">
          </div>
          <div class="package-msg">
            <input type="text" placeholder="包装条码" title="包装条码" readonly v-model="list.litbcd">
          </div>
        </div>
        <div class="package-item package-lg">
          <h3>大包装</h3>
          <div class="package-msg">
            <input type="text" placeholder="包装含量" title="包装含量" readonly v-model="list.bigunitstyle">
            <input type="text" placeholder="长(cm)" title="长(cm)" readonly style="margin-left:20px;" v-model="list.length">
            <input type="text" placeholder="净重(kg)" title="净重(kg)" readonly style="margin-left:20px;" v-model="list.netweight">
          </div>
          <div class="package-msg">
            <input type="text" placeholder="包装单位" title="包装单位" readonly v-model="list.bigunitqty">
            <input type="text" placeholder="宽(cm)" title="宽(cm)" readonly style="margin-left:20px;" v-model="list.width">
            <input type="text" placeholder="毛重(kg)" title="毛重(kg)" readonly style="margin-left:20px;" v-model="list.grossweight">
          </div>
          <div class="package-msg">
            <input type="text" placeholder="包装条码" title="包装条码" readonly v-model="list.bigbcd">
            <input type="text" placeholder="高(cm)" title="高(cm)" readonly style="margin-left:20px;" v-model="list.height">
          </div>
        </div>
      </div>

      <div class="form-group">
        <!-- <label for="cn10" class="label">备注</label> -->
        <div class="control">
          <textarea  rows="3" placeholder="备注" title="备注" readonly class="bgc-gray textarea" v-model="list.memo"></textarea>
        </div>
      </div>
    </div>
    
  <div class="product-pics clearfix">
    <div class="pro-pics-tit clearfix">
      <h3>商品照片</h3>
      <div class="pro-ctrl">
        <!-- <a class="pro-btn pro-add" href="###">批量添加</a> -->
        <!-- <a class="pro-btn pro-view" href="###" v-on:click="open()">查看大图</a> -->
      </div>
    </div>
    
    <div class="pro-pics">
  <!--     <div class="prev"></div>
      <div class="next"></div>
 -->      <div class="pic-container">
        <ul class="pic-list">
          <li class="has-image">
            <div class="pic-contain big-imgs" :style="{backgroundImage: 'url('+list.path+')'}">
              <span class="rm-pic"></span>
            </div>
            <p class="pic-desc">图一(正面图)</p>
          </li>
        </ul>
      </div>
    </div>

<!--     <div class="pro-pics-b-tips">
      <span>照片上传示例</span>
      上传照片说明：<br>
      照片只允许分辨率为1024*768的JPG图片格式，照片文件&lt;=1M，图像画质要求无污染、无反光、无抖动，文字与图案清晰可辨；
      照片内容必须包括：商品名称、规格、生产厂商、注册证号/批准文号、品牌、外包装、生产地址、用法用量、包装、成份等信息;
      如果信息不在同一包装面上，可根据实际情况每面上传一张照片；
    </div>
 -->
  </div>
  <div class="fheader no-bottom mt-20">
    <h4 class="fh-notes no-l-icon">对码结果</h4>
  </div>

  <table class="itable itable-thead-13px itable-td-long-text table-bg">
    <thead>
      <tr>
        <th class="w50"></th>
        <th class="w60">序号</th>
        <th class="w60"></th>
        <th class="w130">商品<br>名称</th>
        <th class="w80">规格</th>
        <th class="w130">注册证号/<br>批准文号</th>
        <th class="w130">生产<br>厂商</th>
        <th class="w60">生产<br>来源</th>
        <th class="w60">小包装<br>单位</th>
      </tr>
    </thead>
    <tbody>
      <tr v-if="resultFlag && result">
        <td><a class="btn-d btn-d-green btn-d-activate" href="javascript:;" @click="cancel">取消</a><div class="text-color-green">已配对</div></td>
        <td v-if="gooddm">{{1}}
          <span class="star-group" v-if="0 <= gooddm.score*10 && gooddm.score*10<= 80">
            <span></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="80 < gooddm.score*10 && gooddm.score*10<=90">
            <span class="group-yellow"></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="90 < gooddm.score*10 && gooddm.score*10<=95">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span></span>
          </span>
          <span class="star-group" v-if="95<gooddm.score*10">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
          </span>
        </td>
        <td>
          <div class="pro-pic" style="background-image: url(../assets/c17.jpg)">
            <span class="pic-max blue-search"></span>
          </div>
        </td>
        <td>{{{result.goodsName}}}</td>
        <td>{{{result.goodsSpec}}}</td>
        <td>{{{result.registKey}}}</td>
        <td>{{{result.producer}}}</td>
        <td>{{{result.importedFlag==1?'国产':result.importedFlag==0?'进口':''}}}</td>
        <td>{{{result.minUnitStyle}}}</td>
      </tr>
    </tbody>
  </table>

  <div class="m-20-0">
    <button class="btn-d btn-d-activate btn-d-lg" @click="parisons" v-show='approvestate'>智能对码</button>
  </div>

  <div class="itable-tit table-no-border">
    <h3 class="primary-text">建立系统映射关系</h3>
    <div class="fr" v-show='approvestate'>
      <span class="text-color-red">找不到？您可以</span>
     <!--  <button class="btn-d btn-d-activate btn-d-lg" v-link="{path:'/dataadminGoodsList2/'+guid+'/'+resultGUID}" v-if="falg">将该商品设为主数据</button> -->
      <button class="btn-d btn-d-activate btn-d-lg" v-link="{path:'/dataadminGoodsList2/'+guid}" v-if="falg">将该商品设为主数据</button>
    </div>
  </div>
  <table class="itable itable-thead-13px itable-td-long-text">
    <thead>
      <tr>
        <th class="w50"></th>
        <th class="w60">序号</th>
        <th class="w130">商品<br>名称</th>
        <th class="w90">规格</th>
        <th class="w160">注册证号/<br>批准文号</th>
        <th class="w130">生产<br>厂商</th>
        <th class="w50">生产<br>来源</th>
        <th class="w60">小包装<br>单位</th>
      </tr>
    </thead>
    <tbody>
      <tr  v-if="resultFlag && result">
        <td><a class="btn-d btn-d-activate btn-d-grey" href="javascript:;">取消</a><div class="text-color-red">已配对</div></td>
        <td v-if='result'>{{1}}
          <span class="star-group" v-if="0 <= result.score*10 && result.score*10<= 80">
            <span></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="80 < result.score*10 && result.score*10<=90">
            <span class="group-yellow"></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="90 < result.score*10 && result.score*10<=95">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span></span>
          </span>
          <span class="star-group" v-if="95 < result.score*10">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
          </span>
        </td>
        <td>{{{result.goodsName}}}</td>
        <td>{{{result.goodsSpec}}}</td>
        <td>{{{result.registKey}}}</td>
        <td>{{{result.producer}}}</td>
        <td>{{{result.importedFlag==1?'国产':result.importedFlag==0?'进口':''}}}</td>
        <td>{{{result.minUnitStyle}}}</td>
      </tr>      
      <tr v-for="gooddm in goodsDMList">
        <td>
            <a class="btn-d btn-d-activate" 
            v-if="'/hospital/mfmedgoods:saveOrUpdateMfmedgoods' | myqx gooddm.guid!=hospitalProductDetail.medgoods.masterguid" href="javascript:void(0);" @click="mate($index)">配对</a>
        </td>
        <td  v-if="result && resultFlag">{{$index+2}}
          <span class="star-group" v-if="0 <= gooddm.score*10 && gooddm.score*10<= 80">
            <span></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="80 < gooddm.score*10 && gooddm.score*10<=90">
            <span class="group-yellow"></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="90 < gooddm.score*10 && gooddm.score*10<=95">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span></span>
          </span>
          <span class="star-group" v-if="95<gooddm.score*10">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
          </span>
        </td>
        <td v-else>{{$index+1}}
          <span class="star-group" v-if="0 <= gooddm.score*10 && gooddm.score*10<= 80">
            <span></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="80 < gooddm.score*10 && gooddm.score*10<=90">
            <span class="group-yellow"></span>
            <span></span>
            <span></span>
          </span>
          <span class="star-group" v-if="90 < gooddm.score*10 && gooddm.score*10<=95">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span></span>
          </span>
          <span class="star-group" v-if="95<gooddm.score*10">
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
            <span class="group-yellow"></span>
          </span>
        </td>
        <td>
          <div class="p-lr-10">{{{gooddm.goodsName}}}</div>
        </td>
        <td>
          <div class="p-lr-10">{{{gooddm.goodsSpec}}}</div>
        </td>
        <td>
          <div class="p-lr-10">{{{gooddm.registKey}}}</div>
        </td>
        <td>
          <div class="p-lr-10">{{{gooddm.producer}}}</div>
        </td>
        <td>{{{gooddm.importedFlag==1?'国产':gooddm.importedFlag==0?'进口':''}}}</td>
        <td>{{{gooddm.minUnitStyle}}}</td>
      </tr>
      <tr v-if="goodsDMList.length==0">
        <td colspan="99">暂无数据！</td>
      </tr> 
    </tbody>
  </table>

  <div class="pagination page-line m-20-0" v-if="goodsDMList.length!=0">
    <em>为您智能匹配出共有
      <i>{{totalCount}}</i>个选项</em>
      <ul>
        <li>
          <span @click="truePage(-1)">上一页</span>
        </li>
        <li>
          <span @click="truePage(1)">下一页</span>
        </li>
      </ul>
    <em class="page">第{{searchDM.from/10+1}}页</em>
    <em>共{{pageCount}}页</em>
  </div>

  </div>
  <!--supply-productview end-->

</div>
</template>
<script>
module.exports={
  data: function(){
    return {    
      guid:'',
      list:{},
      result:{},
      searchDM:{
        "from":0
      },
      goodsDMList:{}, 
      totalCount:0,
      pageCount:0,
      resultFlag:true,
      falg:true,
      resultGUID:'',
      //原商品guid
      masterGuidOld:'',
      // 配对后新guid
      masterGuidNew:'',
      approvestate:true
    }; 
  },
  methods: {
    getData: function(){
      var self = this;
      Ajax.get('/mainDataCheck/findProposeDetial',{guid:self.guid}).
          then(function(response){

            var res=response.data.data;
            if(response.data.errorCode==0){
            //   var path;
            // for(var a=0;a<res.length;a++){
            //     var pictcontent=JSON.parse(res[a].pictcontent);
            //     path=pictcontent[0].thumbnail.path+pictcontent[0].thumbnail.name;
            //     res[a].path=path;
            //   }
            
                self.list=res;
                var list=self.list;
                var searchDM= self.searchDM;
                self.masterGuidOld=list.guid;
                
                if(list.approvestate=='Y'){
                  self.approvestate=true;
                }else if(list.approvestate=='N'){
                  self.approvestate=false;
                }

                searchDM.goodsName=list.goodsname;
                searchDM.goodsSpec=list.goodsspec;
                searchDM.producer=list.producer;
                searchDM.registKey=list.registkey;
                searchDM.bigUintStyle=list.biguintstyle;
                searchDM.bigUintQty=list.biguintqty;
                searchDM.minUnitStyle=list.minunitstyle;
                searchDM.minUnitQty=list.minunitqty;
            }
        })
        self.detial();    
    },
    //  详情
    detial: function(){
      var self=this;

      Ajax.get('/mainDataCheck/findMfmnsdGoods',{guid:self.guid}).
          then(function(response){
            var res=response.data.data;
            if(response.data.errorCode==0){
            // var path;
            // for(var a=0;a<res.length;a++){
            //     var pictcontent=JSON.parse(res[a].pictcontent)
            //     path=pictcontent[0].thumbnail.path+pictcontent[0].thumbnail.name;
            //     res[a].path=path;
            // }

                self.result=res;
                if(!!self.result){
                    self.resultGUID=self.result.guid;
                }

                
                self.parisons();
            }            
        }) 
    },
    // 智能对码
    parisons:function(){
        var self=this;

          Ajax.post('/mainDataCheck/goodsDM',self.searchDM)
            .then(function(response){

              var data = response.data;

              self.$set('goodsDMList', data.data);
              self.totalCount=data.totalCount; 
              self.pageCount = Math.ceil(data.totalCount/10);         
          });
      },
    truePage:function(num){
         var self = this;
         var currentFrom=self.searchDM.from;
         if(num==1){
            if(currentFrom+10>self.totalCount){
                layer.msg('已到最后一页！');
                return;
            }
            self.searchDM.from=currentFrom+10;
         }else{
            if(currentFrom-10<0){
                layer.msg('已到第一页！');
                return;
            }
            self.searchDM.from=currentFrom-10;
         }
         self.parisons();
      },
      // 配对
    mate:function(index){
      var self=this;

      if(!self.approvestate){
        return;
      }
        // 存在匹配数据
      var guid=self.goodsDMList[index].guid;
      if(!self.result){
        self.result=self.goodsDMList[index];
        // var guid=self.goodsDMList[index].guid
        Ajax.post('/mainDataCheck/isStandard',{guid:guid})
          .then(function(response){
            var res = response.data.data;
            var result = response.data;
            if(result.errorCode==0){
               self.data=!res;
               
            }
           
        });
      }// 没有匹配数据
      else{
        layer.msg('已存在对码结果');
      }
     self.masterGuidNew=guid;
     self.resultGUID=self.goodsDMList[index].guid;
    },
    // 取消对码结果
    cancel:function(){
      var self=this;

      if(!approvestate){
        return;
      }
      self.result=null;
      self.resultFlag=false;
    },
     // 审核完成接口
    check:function(){
      var self=this;
      Ajax.post('/mainDataCheck/changMasterGuidForSupplierAndHospital',
        {masterGuidOld:self.masterGuidOld,masterGuidNew:self.masterGuidNew})

            .then(function(response){
              if(response.data.errorCode==0){
                layer.msg('审核成功');
              }else{
                layer.msg('未选择新配对的商品');
              }
        });   
    }
   },
  route:{
    data: function (transition) {
      var self=this;
      var guid = transition.to.params.GUID;

      self.guid=guid;
      self.getData();
      },
  }
};
</script>