<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
      <div class="operate-btns">
          <!-- v-if="'/supplier/print:printYsd' | myqx (trdo.billstate=='D02' | trdo.billstate=='D03')" -->
<!--         <a v-on:click="printYsd()" 
          v-if="'/supplier/print:printYsd' | myqx"
          class="fbtn fb-batch-print">打印质量验收单</a>
        <a v-on:click="printTags()" class="fbtn fb-print-outLaber">打印出库标签</a>
        <a v-on:click="goTRDoDetailsss(trdo.billno)" class="fbtn fb-lufp">录入发票</a>
        <a v-link="{ path: '/orderOutall3-1/' + trdo.guid}" 
          v-if="trdo.billstate=='D02' || trdo.billstate=='D03'"
          class="fbtn fb-setting">单据追溯</a>
        <a v-on:click="revokeTrsupplierdo()" class="fbtn fb-return">撤销</a> -->
        <!-- <a href="javascript:history.go(-1)" class="fbtn fb-return">返回</a> -->
        <a v-on:click="printTag()" v-if='trdo.billstate=="D02" || trdo.billstate=="D03"' class="fbtn fb-print-highfollow" >打印高值追溯标签</a>
    </div>
    <h3 class="current-module">高值送货单详情</h3>
  </div>
  <div class="order-outlog">
    <div class="pd-form"> 
      <div class="group-row group-row-3">
        <div class="form-group">
          <label for="cn1" class="label lable-xf pl10">送货单号</label>
          <div class="control">
            <input type="text" id="cn1"  :value="trdo.billno" class="pl75" readonly="readonly"></div>
        </div>
        <div class="form-group">
          <label for="cn8" class="label lable-xf pl10">业务员</label>
          <div class="control">
            <input type="text" id="cn8" :value="trdo.mkstaffname" class="pl60" readonly="readonly">
          </div>
        </div>
        <div class="form-group">
          <label for="cn2" class="label lable-xf pl10">执行状态</label>
          <div class="control">
            <input type="text" id="cn2" :value="trdo.billstate | billstate_trdo" class="pl75" readonly="readonly"></div>
        </div>
      </div>
      <div class="group-row group-row-3">
        <div class="form-group">
          <label for="cn4" class="label lable-xf pl10">高值订单</label>
          <div class="control">
            <input type="text" id="cn4" :value="trdo.supplierpobillno" class="pl75" readonly="readonly"></div>
        </div>
        <div class="form-group">
          <label for="cn5" class="label lable-xf w100 pl10">要求到货日期</label>
          <div class="control">
            <input type="text" id="cn5" :value="trdo.planenddate | getYMD" class="pl105" readonly="readonly"></div>
        </div>
        <div class="form-group">
          <label for="cn6" class="label lable-xf pl10">要货日期</label>
          <div class="control">
            <input type="text" id="cn6" :value="trdo.planbegindate | getYMD" class="pl75" readonly="readonly"></div>
        </div>
      </div>
      <div class="group-row group-row-3">
        <div class="form-group">
          <label for="cn7" class="label lable-xf pl10">操作人</label>
          <div class="control">
            <input type="text" id="cn7" :value="trdo.operatername" class="pl60" readonly="readonly"></div>
        </div> 
        <div class="form-group">
          <label for="cn9" class="label lable-xf pl10">送货日期</label>
          <div class="control">
            <input type="text" id="cn9" :value="trdo.dodate" class="pl75" readonly="readonly"></div>
        </div>
        <div class="form-group form-label">
          <label for="cc22" class="label">单据类型</label>
          <div class="control select-style">
            <select v-model="trdo.billtype" class="inp4" readonly="readonly"  disabled="disabled"> 
            <option v-for="option in HighValueList" v-bind:value="option.value">
              {{option.label}}
            </option>
          </select>
          </div>
        </div> 
      </div>
      <div class="group-row">
        <div class="form-group">
          <label for="cn10" class="label lable-xf pl10">要货单位</label>
          <div class="control">
            <input type="text" id="cn10" :value="trdo.medname" class="pl75" readonly="readonly"></div>
        </div>
        <div class="form-group">
          <label for="cn11" class="label lable-xf pl10">要货地点</label>
          <div class="control">
            <input type="text" id="cn11" :value="trdo.address" class="pl75" readonly="readonly"></div>
        </div>
      </div>
      <div class="group-row"> 
        <div class="form-group">
          <label for="cn12" class="label lable-xf pl10">备注</label>
          <div class="control">
            <input type="text" id="cn12" :value="trdo.memo" class="pl60 w700" readonly="readonly"></div>
        </div>
      </div>
    </div>
   
    <div class="ctable ct-parent mt-20">
        <div class="ct-head">
            <span class="ct-col w30"></span>
            <span class="ct-col w50">序号</span>
            <span class="ct-col w190">商品</span>
            <span class="ct-col w100">单价</span>
            <span class="ct-col w120">批号</span>
            <span class="ct-col w120">灭菌批号</span>
            <span class="ct-col w100">要货数</span>
            <span class="ct-col w100">送货数</span>
            <span class="ct-col w100">已送货数</span>
            <span class="ct-col w80">金额(元)</span>
        </div>
        <div class="ct-row mt-0 pt10" id="warp2{{$index}}" v-for="(one,cus) in mxList" track-by="$index">
            <div class="row-line">
                <span class="ct-col w30 mt-5">
                    <img src="/images/consumable.png" @click="slidedown($index,cus.purchaserGoodsguid,cus.billno)" v-if='cus.supplierGoodscode=="耗材包"'>
                </span>
                <span class="ct-col w50">{{$index+1}}</span>
                <span class="ct-col w190 t-left pr10">{{cus.supplierGoodscode}}
                    <br>
                   <span v-if='cus.supplierGoodscode=="耗材包"' class="p-tit-green" @click="slidedown($index,cus.purchaserGoodsguid,cus.billno)"> {{cus.supplierGoodsname}}</span>
                    <span v-else class="p-tit-green" > {{cus.supplierGoodsname}}</span>

                    <br>
                    {{cus.supplierGoodsspec}}
                    <br>
                    {{cus.producer}}
                    <br>
                    {{cus.register}}
                </span>
                <span class="ct-col w100 pr10 t-right">
                    {{cus.supplierPrice |numDigit 2}}
                    <br><span class="table-detail-text">元/{{cus.supplierUnit}}</span>
                </span>
                <span class="ct-col w120">
                  {{cus.lot}}
                  <br>
                  {{cus.productiondate | getYMD}}
                  <br>
                  {{cus.expiredate | getYMD}}
                </span>
                <span class="ct-col w120">
                  {{cus.sterilantlot}}
                  <br>
                  {{cus.sterilantdate| getYMD}}
                  <br>
                  {{cus.sterilantexpdate| getYMD}}
                </span>
                 <span class="ct-col w100" :class='{"pr10":cus.supplierGoodscode!="耗材包"}'>
                    <a v-if='cus.supplierGoodscode=="耗材包"' href="javascript:void(0);" style="display: inline-block;" class="text-color-gray">1套</a>
                    <a href="javascript:;"   class="status-switch text-color-gray" v-else>{{cus.supplierPoqty}}{{cus.supplierUnit}}</a>
               </span>
               <span  class="ct-col w100 activate isFocus" v-if='cus.supplierGoodscode=="耗材包"'>
                  <a href="javascript:;" @click="slidedown($index,cus.purchaserGoodsguid,cus.billno)"  class="txt_underline  status-switch text-color-blue"> 1套</a>
               </span>
                <span  class="ct-col w100  activate pr10" v-else>
                  {{cus.supplierPesentqty}}{{cus.supplierUnit}}
               </span>
                <span  class="ct-col w100  activate t-right pr10">
                   {{cus.supplierArrivalqty}}{{cus.supplierUnit}}
               </span>
               <span class="ct-col w80 t-right pr10">{{cus.taxsum |numDigit 2}}</span>
            </div>
            <div class="row-launch" style="display: none;">
                <h3>品规数（{{cus.parasite.length}}）</h3>
                <table class="itable mb-30">
                    <thead>
                    <tr>
                        <th class="w50">序号</th>
                        <th class="w120">商品</th>
                        <th class="w80">规格</th>
                        <th class="w120">生产厂商</th>
                        <th class="w120">注册证号/批准文号</th>
                        <th class="w110">批号</th>
                        <th class="w110">灭菌批号</th>
                        <th class="w100">单价</th>
                        <th class="w80">要货数</th>
                        <th class="w80">送货数</th>
                        <th class="w80">已送货数</th>
                        <th class="w50">耗材类型</th>
                        <th class="w100">金额(元)</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr v-if="cus.parasite==null || cus.parasite.length==0">
                            <td colspan="12">暂无符合条件的记录</td>
                        </tr>
                        <tr v-for="(index,variation) in cus.parasite">
                            <td >{{ $index + 1 }}</td>
                            <td class='t-left pr10'>
                                {{variation.supplierGoodscode}}
                                <br>
                                 <span class="p-tit-green" style=' color: #4aa8e5;'>{{variation.supplierGoodsname}}</span>
                            </td>
                            <td>{{variation.supplierGoodsspec}}</td>
                            <td class='t-left'>{{variation.producer}}</td>
                            <td>{{variation.register}}</td>
                            <td>
                                {{variation.lot}}
                                <br>
                                {{variation.productiondate | getYMD}}
                                <br>
                                {{variation.expiredate | getYMD}}
                            </td>
                            <td>
                                {{variation.sterilantlot}}
                                <br>
                                {{variation.sterilantdate| getYMD}}
                                <br>
                                {{variation.sterilantexpdate| getYMD}}
                            </td>
                            <td class="t-right pr10">{{variation.supplierPrice |numDigit 2}}
                                <br>
                            元/{{variation.supplierUnit}}</td>
                            <td class="t-right pr10">
                              {{variation.supplierPoqty}}{{variation.supplierUnit}}
                            </td>
                            <td class="t-right pr10">
                                {{variation.supplierPesentqty}}{{variation.supplierUnit}}
                            </td>
                            <td class="t-right pr10">
                                {{variation.supplierArrivalqty}}{{variation.supplierUnit}}
                            </td>
                            <!-- <td>{{variation.isaccessory=='N'?'主料':'辅料'}}</td> -->
                            <td>{{variation.isaccessory=='N'?'辅料':variation.isaccessory=='Y'?'主料':'工具'}}</td>

                            <td>
                              {{variation.taxsum |numDigit 2}}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="zip" @click="slideup($index)"></div>
            </div>

        </div>
   <!--      <div class="mt-20" style="text-align: center" v-if="getTrMedDeptDoList.length==0">
            未查询到相关数据！
        </div> -->
        <div class="pagination" style="margin: 20px 0">
            <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page"
                        :total-pages.sync="search.totalPages"></pagination>
        </div>
    </div>
  </div>
  <div class="modal" v-if='getListFlag'>
      <div class="container resource">
          <div class="audit-detail" style="margin:100px auto;width:1000px;padding:30px;">
              <span class="close-win" @click='getListFlag=false'></span>
               <h3 class="text-color-blue">品规数（{{getList.length}}）</h3>
              <table class="itable mb-30">
                      <thead>
                      <tr>
                          <th class="w50">序号</th>
                          <th class="w120">商品</th>
                          <th class="w80">规格</th>
                          <th class="w120">生产厂商</th>
                          <th class="w120">注册证号/批准文号</th>
                          <th class="w100">单价</th>
                          <th class="w80">要货数</th>
                          <th class="w80">送货数</th>
                          <th class="w100">金额（元）</th>
                      </tr>
                      </thead>
                      <tbody>
                          <tr v-if="getList==null || getList.length==0">
                              <td colspan="12">暂无符合条件的记录</td>
                          </tr>
                          <tr v-for="(index,variation) in getList">
                              <td >{{ $index + 1 }}</td>
                              <td class='t-left pr10'>
                                  {{variation.supplierGoodscode}}
                                  <br>
                                   <span class="p-tit-green" style=' color: #4aa8e5;'>{{variation.supplierGoodsname}}</span>
                              </td>
                              <td>{{variation.supplierGoodsspec}}</td>
                              <td class='t-left'>{{variation.producer}}</td>
                              <td>{{variation.regiterkey}}</td>
                              <td class="t-right pr10">{{variation.supplierPrice |numDigit 2}}
                                  <br>
                              元/{{variation.supplierUnit}}</td>
                              <td class="t-right pr10">
                                {{variation.supplierPoqty}}
                                <br>
                                 {{variation.supplierUnit}}
                              </td>
                              <td class="t-right pr10 pt5">
                                {{variation.supplierPesentqty}}
                                  <br>
                                  {{variation.supplierUnit}}
                              </td>
                              
                              <td>
                                {{variation.taxsum |numDigit 2}}元
                              </td>
                          </tr>
                      </tbody>
                  </table>

          </div>
      </div>
  </div>
</div>
</template>
<!--出库单汇总：明细页面-->
<script>

  module.exports = {
    data: function () {
      return {
        getListFlag:false,
        getList:[],
        trdo:{},
        // 明细数据
        mxList: [],
        // 图片数据
        imgcache:[],
        // 查询条件
        search: {
          //total: 0,
          page: 1,
          pageSize: 500,
          totalPages: 0,
          search_EQ_billno: '',
        },
        doList:{}, 
        // 打印质量验收单
        printParam:{
          guid :'',// 出库汇总单单据编号
        },
        // 打印质量验收单
        printCk:{
          billno :'',// 出库汇总单单据编号
        },
        HighValueList:[{
          value:'H02',
          label:'跟台高值'
        },{
          value:'H03',
          label:'备货高值'
        }],
      };
    },
    methods: {
      slidedown:function(index,val){
            var self = this;
               
            if(self.mxList[index].parasite.length>10){
 
                self.$set('getList',self.mxList[index].parasite);
                self.getListFlag=true;
               
            }else{

                $('#warp2' + index).find(".row-launch").slideDown(400, function () {
                    $('#warp2' + index).find(".isFocus").addClass("focus active");
                })
            }
            
      },
      slideup:function(index){

           $('#warp2' + index).find(".row-launch").slideUp(400, function () {
                $('#warp2' + index).removeClass('active');
                $('#warp2' + index).find(".isFocus").removeClass("focus");
            })
      },
      // 初始化操作
      getData:function(){
        var self = this;        
        var billno = this.$route.params.billno;
        this.search.search_EQ_billno = billno;


        // 1.获得订单详细信息
        Ajax.get('/cost/getTrsupplierdoCommon/'+billno)
          .then(function (response){
            var data = response.data.data;
            self.$set('trdo',data);
        })

        self.imgcache = [];
        // 2.获得商品列表信息
        Ajax.get('/cost/listTrsupplierdetailCommon', this.search)
          .then(function (response){
            var data = response.data.data;
            for(var a=0;a<data.list.length;a++){
              if(data.list[a].ispackage=='N'){
                  data.list[a].parasite=[];
                  self.mxList.push(data.list[a]);
              }else{
                for(var i=0;i<self.mxList.length;i++){
                  
                  if( self.mxList[i].supplierGoodscode=="耗材包" && self.mxList[i].supplierGoodsguid==data.list[a].parentpackageguid){

                       data.list[i].parasite.push(data.list[a]); 
                  }
                  
                }

              }

            }
            // self.$set('mxList',data.list);
            self.search.pageno = data.pageno;
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;
             if(data.list == null || data.list == ''){
                layer.msg('没有可出库数的商品，请在出库单汇总里面提交出库单！');
            }  

            // 封存商品图片信息
            self.$set('imgcache',response.data.senData);
        })
      },
      // 打印质量验收单
      printYsd:function(){
        var self = this;
        self.printParam.guid = self.trdo.guid;
        Ajax.get('/print/printYsd', this.printParam)
          .then(function (response){
            var data = response.data.data;
           if(response.data.errorCode == 0){
              window.open (data);    
            }else{ 
               layer.msg(response.data.message);    
            }    
        })
      },
      // 打印出库单 立继武
      printTags:function(){
        var self = this;  
       var billNo = self.trdo.billno; 
        Ajax.get('/print/printTags/'+billNo) 
          .then(function (response){
            var data = response.data.data; 
            if(response.data.errorCode == 0){ 
              window.open (data);        
            }else{   
              layer.msg(response.data.message);

            }  
        })
      },  
      // 跳转到订单受理详情页面
      goTRDoDetailsss:function(trpo_billno){
        var self = this;
        // 根据单据类型，单据状态跳转不同的页面 
        self.$route.router.go('/trsettle/settlementInvoice3/'+ trpo_billno); 
         
      },
      // 撤销出库单
      revokeTrsupplierdo:function(){
        var self = this;     
        self.doList.list = this.mxList;
        self.doList.trpo_billno = self.trdo.supplierpobillno;
        self.doList.trdo = this.trdo;
        var trpo_billno = self.trdo.supplierpobillno;
        var trdo_billno = self.trdo.billno;
            // 出库信息
            Ajax.post('/trdo/revokeTrsupplierdo', self.doList)
              .then(function (response){ 
                var data = response.data.data;
                if(response.data.errorCode==0){  
                    self.MessageBox({
                      title:'提示',
                      message:'撤销送货单成功!',
                      type:'alert'
                    },function(action){ 
                       // 根据单据类型，单据状态跳转不同的页面     
                        self.$route.router.go('/trdo/orderOutall2-2/'+((trpo_billno||'')+"@"+(trdo_billno||'')));
                    });    
                }else{ 
                  layer.msg(response.data.message);
             
                }                
            })  
      },     
      // 打印跟台高值标签
      printTag:function(){
        var self = this;
        self.printParam.guid = self.trdo.guid;
        Ajax.get('/cost/printTag', this.printParam)
          .then(function (response){
            var data = response.data.data;
            window.open (data);        
        })
      }
    }, 
    route: {
      activate: function () {
        this.getData();
      }
    }
  };
</script>