<template>
   <div class="container resource basic-message">
      <div class="pop-banner clearfix">
        <!-- <div class="current-operate">配送商出库单【{{trsupplierdo.billno}}】详情</div> -->
        <div class="operate-btns">
           <a v-on:click="print()" class="fbtn fb-batch-print">打印配送商出库单</a>
           <a class="fbtn fb-submit" v-if="trsupplierdo.billstate =='D01'" @click="commitDo">生成出库单</a>
            <!-- <button class="btn-d btn-d-lg btn-d-green btn-d-activate btn-d-circle"
        v-link="{ path: '/planTrack/' + trsupplierdo.guid}" v-if="authoritySetting.twoTraceFlag">单据追溯</button> -->
           </div>
        <h3 class="current-module">配送商出库单明细</h3>
      </div>{{dual}}
      <!-- <div class="clearfix mb-40">
        <button class="btn-d btn-d-lg btn-d-green btn-d-activate btn-d-circle"
        v-link="{ path: '/track/' + trsupplierdo.guid}" v-if="authoritySetting.twoTraceFlag">单据追溯</button>
        <button class="btn-d btn-d-lg btn-d-green btn-d-activate btn-d-circle ml-10"  @click="print">打印配送商出库单</button>
      </div> -->

  <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="trsupplierdo.billno" class="pl75" readonly="readonly"></div>
      </div>
      <div class="form-group">
        <label for="cn3" class="label lable-xf pl10">单据类型</label>
        <div class="control">
          <input type="text" id="cn3" :value="trsupplierdo.billtype | billtype" class="pl75" 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="trsupplierdo.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="trsupplierdo.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="trsupplierdo.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="trsupplierdo.billdate | 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="trsupplierdo.operatername" class="pl60" 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="trsupplierdo.mkstaffname" 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="trsupplierdo.dodate | getYMD" class="pl75" readonly="readonly"></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="trsupplierdo.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="trsupplierdo.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="trsupplierdo.suppliername" class="pl60 w700" 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="trsupplierdo.distrbname" class="pl60 w700" readonly="readonly"></div>
      </div>
    </div>
  </div>
 

  <div class="ctable ct-parentr mt-10" style='border-bottom:1px solid #c8c8c8;'>
    <div class="ct-head" id="t_header" style='border-bottom:none;'>
      <span class="ct-col w50">序号</span>
      <span class="ct-col w270">商品</span>
      <span class="ct-col w30"></span>
      <span class="ct-col w80 t-right">订货数</span>
      <span class="ct-col w160 t-right">本次出库数</span>
      <span class="ct-col w140 t-right">已出库数</span>
      <span class="ct-col w140 t-right">价格</span>
      <span class="ct-col w120 t-right">含税金额</span>
    </div>
    <div class="ct-row  t-center" v-if="orderoutQueryList.length==0"><div class="row-line" style='border-bottom:none;border-top:1px solid #c8c8c8;'><span class="ct-col">暂无数据！</span></div></div>
    <div class="ct-row" v-for="mx in orderoutQuerysList">
      <div class="row-line" style='border-bottom:none;border-top:1px solid #c8c8c8;'>
        <span class="ct-col w50 v-top">
          {{$index+1 | getIndex}} 
        </span>
        <span class="ct-col w270 t-left break-it">
          <!-- <imagebox v-bind:imgarr="orderoutQuerysListImg[mx.varchar1]  | original">
            <img 
              v-if=" orderoutQuerysListImg[mx.varchar1]" 
              class="pro-pic fl mar-none" 
              v-bind:src="orderoutQuerysListImg[mx.varchar1]  | thumbnail">
            <span class="pic-max blue-search">
            </span>
          </imagebox>   -->
          <!-- <div class="pro-pic fl mar-none" 
            v-if="!orderoutQuerysListImg[mx.varchar1]"  
            style="background-image: url(../images/default.jpg)"></div> -->
            
            	<!--<div class=" fl">
							
							<div class="pro-pic  mar-none clearfix"
                                 v-if="mx.suppliergoodsguid==null || imgcache[mx.suppliergoodsguid]=='NOPIC'"
                                 style="background-image: url(../images/default.jpg)"></div><br />

								              	<div v-if="mx.isMir=='3'" @click="clickMir(mx)" class="t-center"  style="margin-top: -10px;">   
								              		<span
                    class="table-detail-icon icon-green" title="两票制">两</span></div>
					</div>-->

          <div class="p-lr-10 break w160">
            {{mx.supplierGoodscode}}
            <br>
            <span class="p-tit-green">{{mx.supplierGoodsname}}</span>
            <br>
            {{mx.supplierGoodsspec}}
            <br>
             {{mx.manufacturer}}
            <br>{{mx.registkey}}</div>
        </span>
        <span class="ct-col w30">
          <span class="table-detail-icon icon-green">医</span>
          <span class="table-detail-icon icon-green">供</span>
        </span>

        <!--订货数-->
        <span class="ct-col w80 t-right">
          <span class="table-detail-text">
            {{mx.purchaserPoqty==null ?'0':mx.purchaserPoqty}}
            <br><label class="text-color-blue">{{mx.purchaserUnit}}</label></span>
          <span class="table-detail-text">
            {{mx.supplierPoqty==null ?'0':mx.supplierPoqty}}
            <br><label class="text-color-blue">{{mx.supplierUnit}}</label></span>
        </span>
        <!--本次出库数-->
        <span class="ct-col w160 t-right">
          <span class="table-detail-text">
            {{mx.purchaserPesentqty==null ?'0':mx.purchaserPesentqty}}
            <br><label class="text-color-blue">{{mx.purchaserUnit}}</label></span>
          <span class="table-detail-text">
            {{mx.supplierPesentqty==null ?'0':mx.supplierPesentqty}}
            <br><label class="text-color-blue">{{mx.supplierUnit}}</label></span>
        </span>
        <!--已出库数-->
        <span class="ct-col w140 t-right">
          <span class="table-detail-text">
             {{mx.purchaserArrivalqty==null ?'0':mx.purchaserArrivalqty}}
            <br><label class="text-color-blue">{{mx.purchaserUnit}}</label></span>
          <span class="table-detail-text">
            {{mx.supplierArrivalqty==null ?'0':mx.supplierArrivalqty}}
            <br><label class="text-color-blue">{{mx.supplierUnit}}</label></span>
        </span>
        <!--单价、金额-->
        <span class="ct-col w140 t-right">
          {{mx.purchaserPrice==null ?'0':mx.purchaserPrice | numDigit 2 | numFmt}}
          <br>元/<label class="text-color-blue">{{mx.purchaserUnit}}</label></span>
        <span class="ct-col w120 t-right">{{mx.amount==null ?'0':mx.amount | numDigit 2 | numFmt}}元</span>
      </div>
      <div class="row-line" style='border-bottom:none;'>
         <span class="ct-col w50">

         	
         </span> 
        <span class="ct-col w100">
          <span class="td-head text-color-green h-25">批号</span>
          <span class="text-color-green">{{mx.lot}}</span>
        </span>
        <span class="ct-col w120 ml-25">
          <span class="td-head text-color-green h-25">生产日期</span>
          <span class="text-color-green">{{mx.productiondate | getYMD}}</span>
        </span>
        <span class="ct-col w120 ml-25">
          <span class="td-head text-color-green h-25">有效期至</span>
          <span class="text-color-green">{{mx.expiredate | getYMD}}</span>
        </span>
        <span class="ct-col w100 ml-25">
          <span class="td-head text-color-green h-25">灭菌批号</span>
          <span class="text-color-green">{{mx.sterilantlot}}</span>
        </span>
        <span class="ct-col w120 ml-25">
          <span class="td-head text-color-green h-25">灭菌日期</span>
          <span class="text-color-green">{{mx.sterilantdate | getYMD}}</span>
        </span>
        <span class="ct-col w120 ml-25">
          <span class="td-head text-color-green h-25">灭菌效期</span>
          <span class="text-color-green">{{mx.sterilantexpdate | getYMD}}</span>
        </span>
        <!-- <span class="ct-col w120 ml-25">
          <span class="td-head text-color-green h-25">操作</span>
          <a v-if="mx.bgflg==0" class="btn button-green readonly-gray btn-d btn-d-activate pd0-20">变更</a>
          <a v-else class="btn button-green" v-link="{path:'/trdo/orderOutallChangeDetail1/'+trdo.guid+'/'+mx.rowno}">变更</a>
        </span> -->
      </div>
    </div>
  </div>
  <div class="pagination m-20-0">
    <pagination
       @page-change="getData"
       :page-no.sync="search.page"
       :total-pages.sync="search.totalPages"></pagination>
  </div>


      <!-- <table class="itable itable-bordertop itable-td-long-text">
        <thead>
          <tr>
            <th class="w50">序号</th>
            <th class="w260">商品</th>
            <th class="w30"></th>
            <th class="w60">订货数</th>
            <th class="w80">本次出库数</th>
            <th class="w90">已出库数</th>
            <th class="w90">价格</th>
            <th class="w90">含税金额</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="orderoutQuerys in orderoutQuerysList">
            <td>{{ $index + 1 }}
                <div class="pro-pic pro-pic-lg">
                <imagebox :imgarr="orderoutQuerysListImg[orderoutQuerys.purchaserGoodsguid] | original">
                  <div class="pro-pic" style="background-image: url({{orderoutQuerysListImg[orderoutQuerys.purchaserGoodsguid] | thumbnail}});margin-left: 12px;">
                    <span class="pic-max blue-search"></span>
                  </div>
                </imagebox>
              </div>
            </td>
            <td class="t-left">
              <div class="p-lr-10">{{ orderoutQuerys.purchaserGoodscode}}
                <br>
                <span class="p-tit-green">{{ orderoutQuerys.purchaserGoodsname }}</span>
                <br> {{ orderoutQuerys.purchaserGoodsspec }}
                <br> {{ orderoutQuerys.registkey }}
                <br> {{ orderoutQuerys.manufacturer }} </div>
            </td>
            <td class="w30">
              <span class="table-detail-icon">医</span>
              <span class="table-detail-icon">供</span>
            </td>
            <td>
              <span class="table-detail-text"> {{ orderoutQuerys.supplierPoqty }}
                <br>{{ orderoutQuerys.supplierUnit }}</span>
              <span class="table-detail-text">{{ orderoutQuerys.purchaserPoqty }}
                <br>{{ orderoutQuerys.purchaserUnit }}</span>
            </td>
            <td>
              <span class="table-detail-text">{{ orderoutQuerys.purchaserPesentqty  }}
                <br>{{ orderoutQuerys.supplierUnit}}</span>
              <span class="table-detail-text">{{ orderoutQuerys.supplierPesentqty  }}
                <br>{{ orderoutQuerys.purchaserUnit }}</span>
            </td>
            <td>
              <span class="table-detail-text">{{ orderoutQuerys.purchaserArrivalqty }}
                <br>{{ orderoutQuerys.supplierUnit }}</span>
              <span class="table-detail-text">{{ orderoutQuerys.supplierArrivalqty }}
                <br>{{ orderoutQuerys.purchaserUnit }}</span>
            </td>
            <td>
              <span class="table-detail-text">{{ orderoutQuerys.purchaserPrice }}元
                <br>/{{ orderoutQuerys.supplierUnit}}</span>
              <span class="table-detail-text">{{ orderoutQuerys.supplierPrice}}元
                <br>/{{ orderoutQuerys.purchaserUnit }}</span>
            </td>
            <td class="v-middle">
            <span class="table-detail-text">{{ orderoutQuerys.amount }}元</span>
            </td>
          </tr>
        </tbody>
      </table>
       <table class="itable itable-bordertop itable-td-long-text">
        <thead>
          <tr>
            <th class="w50"></th>
            <th class="w50">批号</th>
            <th class="w260">生产日期</th>
            <th class="w60">有效期至</th>
            <th class="w80">灭菌批号</th>
            <th class="w90">灭菌日期</th>
            <th class="w90">灭菌效期</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="orderoutQuerys in orderoutQuerysList">
            <td class="t-left">
              <span></span>
            </td>
            <td>
              <span>{{orderoutQuerys.lot }}</span>
            </td>
            <td>
              <span>{{orderoutQuerys.productiondate}}</span>
            </td>
            <td>
              <span>{{orderoutQuerys.expiredate}}</span>
            </td>
            <td>
              <span>{{orderoutQuerys.sterilantlot}}</span>
            </td>
            <td>
              <span>{{orderoutQuerys.sterilantdate}}</span>
            </td>
            <td>
              <span>{{orderoutQuerys.sterilantexpdate}}</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="pagination m-20-0">
        <em class="page">明细条目数【{{search.total}}】</em>
        <pagination 
            @page-change="getData" 
            :class="['m-20-0']"
            :page-no.sync="search.page" 
            :total-pages.sync="search.totalPages">
          </pagination>
      </div> -->
      <!--新加提示信息 end-->
        <div class="roll-bg" v-if='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>
</template>

<script>
module.exports={
  data: function(){
    return {
      disabled : true,
      distrbutorOrder:[],
      orderoutQuerysListImg:[],
      orderoutQuerysList:[],
      billType:[],
      operationFlag:"0",
      disabled: true,
      search: {
        pageSize: 5,
        page: 1,
        total: 0,
        totalPages: 0,
        search_EQ_guid: '',
        search_EQ_distrbguid:''
      },
      authoritySetting: {
          twoTraceFlag:false,
      },
      noSplit:false,
      requestS:false,
    };
  },
  computed: {
      dual: function () {
        var self = this;
        var curMenuRole = this.$store.state.user.curMenuRole;
        self.search.search_EQ_distrbguid = this.$store.state.user.curUser.distrbguid;
        
        if (self.search.search_EQ_distrbguid!=undefined && self.search.search_EQ_distrbguid!=null) {
        if (curMenuRole!=undefined && curMenuRole!=null) {
            for (var i=0;i<curMenuRole.length;i++) {
                if(curMenuRole[i].menu != null) {
                    if (curMenuRole[i].menu.name.trim() == '出库单查询') {
                        for (var j=0;j<curMenuRole[i].buttonList.length;j++) {
                             var name = curMenuRole[i].buttonList[j].name.trim();
                             var isValid = curMenuRole[i].buttonList[j].isvalid;
                             var level = curMenuRole[i].buttonList[j].level;
                            if (!self.authoritySetting.twoTraceFlag && level=='2' && name =='单据跟踪' && isValid=='y') {
                                self.authoritySetting.twoTraceFlag = true;
                             }
                         }
                       break;
                    }
                }
            }
        }
        }
        return '';
      }
    },
  methods: {
    getOrderoutQuery: function(){
      var self = this;
      Ajax.get('/distrbutorOrder/distrbutorOrderQuery/'+this.$route.params.id)
        .then(function (response){
        var data = response.data.data;
        self.$set('trsupplierdo',data);
        self.getOrderoutqueryList();
      })
    },

    getOrderoutqueryList: function(){
      var self = this;
      self.$set('search.search_EQ_guid',this.$route.params.id);
      Ajax.get('/distrbutorOrder/orderoutQuerysList', self.search)
       .then(function (response){
        var data = response.data;
        // self.$set('orderoutQuerysList',data.list);
        // self.search.totalPages = data.totalPages;
        if(data.errorCode == 0){
            self.$set('orderoutQuerysList',data.data.list);
            self.$set('orderoutQuerysListImg',data.senData);

            self.search.totalPages = data.data.totalPages;
            self.search.total = data.data.total;
          }else{
            self.MessageBox({
              title:'提示',message:data.message,type:'alert'
            },function(action){})
          }
      })
    },
    // 打印配送商出库单
    print:function(){
      var self=this;
      Ajax.get('/distrbutorwarehouse/printDistributionDo',{'doBillno':self.trsupplierdo.billno})
        .then(function (response){
          var data=response.data.data;
          window.open(data);
      })
    },
     // 提交配送商出库单
    commitDo:function(){
      var self=this;
      if(self.noSplit){
          return false;
      }
      self.noSplit = true;
      self.requestS = true;
      Ajax.post('/distrbutorwarehouse/commitDo',{'doBillno':self.trsupplierdo.billno})
        .then(function (response){
          var data=response.data.data;
          if(response.data.errorCode == 0){
            self.noSplit = false;
            self.requestS = false;
            self.MessageBox({
              title:'提示',message:'提交成功！',type:'alert'
            },function(action){})
            self.getOrderoutQuery();
          }else{
            self.MessageBox({
              title:'提示',message:data.message,type:'alert'
            },function(action){})
          }
      })
    }
  },
route:{
    activate : function(){
      this.getOrderoutQuery();
      this.getBillType();
    }
  }
};   

</script>