<script >
  import model_tab from './include_model_tab.vue';
  

  module.exports = {
    data: function () {
      return {
        tab_index: 3,
        trdo:{},
        // 明细数据
        mxList: [],
        // 图片数据
        imgcache:[],

        billno:'',// 出库单编号
        // 保存出库的对象
        doList:{},        
        // 删除的条件
        cancelParams:{
          guid:'',
          billno:''
        },
        readonlyFlag:false,
        dateWidth:'80%',
        // 查询条件
        search: {
          //total: 0,
          page: 1,
          pageSize: 5,
          totalPages: 0,
          search_EQ_billno:'',// 出库汇总表编号
        },
        // 打印质量验收单
        printParam:{
          guid :'',// 出库汇总单单据编号
        }
      };
    },
    methods: {
      // 初始化操作
      getData:function(){
        var self = this;
        // ***采购订单编号***
        var _billno = this.$route.params.billno;
        if((_billno)!=''){

          self.$set('billno',_billno);// 系统中的出库单编号
          self.$set('search.search_EQ_billno',_billno);// 查询商品明细出库单编号条件          
          self.$set('doList.billno',_billno);// 必须绑定billno,用于更新的时候 
        }else{
          // 条件错误，跳转页面
          self.$route.router.go('/trhv/orderHighout/');
        }


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

            // 设置撤销的时候的一些条件数据
            self.$set('cancelParams.guid',self.trdo.guid);
            self.$set('cancelParams.billno',self.trdo.billno);
        })
        // 2.获得商品列表信息
        Ajax.get('/trdo/listGoodsDetailCommon', self.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('mxList',data.list);
            self.search.pageno = data.pageno;
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;

            // 封存商品图片信息
            self.$set('imgcache',response.data.senData);
        })          
      },   
      // 撤销出库单
      cancelHv:function(){
        var self = this;    
        self.doList.hvList = null;
        self.doList.trpo_billno = '';
        self.doList.trdo = this.trdo;

        self.MessageBox({
          title: '提示',
          message: "您确定要撤销该出库单吗？",
          type: 'success',
          showCancelButton: true
        },function(action) {
          if(action=='confirm'){
            // 出库信息
            Ajax.post('/trdo/cancelHv', self.cancelParams)
              .then(function (response){
                var data = response.data.data;
                if(response.data.errorCode==0){
                  if(data.split("@")[0]=="1"){// 撤销成功
                    self.MessageBox({
                      title:'提示',
                      message:data.split("@")[1],
                      type:'alert'
                    },function(action){
                      // 提交成功之后，跳转到打印的页面
                      self.$route.router.go('/trhv/orderHighout4/'+self.trdo.billno);   
                    });            
                  }else{
                    // 提交出库单失败!
                    layer.msg(data.split("@")[1]);
                  }                   
                }else{
                    layer.msg('撤销出库单异常!');
                }           
            })
            return ;
          } 
        }); 
      },
      // 打印质量验收单
      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;
            window.open (data);        
        })
      },
      // 打印跟台高值标签
      printTag:function(){
        var self = this;
        self.printParam.guid = self.trdo.guid;
        Ajax.get('/print/printTag', this.printParam)
          .then(function (response){
            var data = response.data.data;
            window.open (data);        
        })
      }
    },
    route: {
      activate: function () {
        this.getData();
      }
    },
    components: {
        model_tab
    }
  };
</script>
<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
      <div class="operate-btns">
        <a v-on:click="printYsd()" 
          v-if="'/supplier/print:printYsd' | myqx trdo.billstate=='D02'||trdo.billstate=='D03'"
          class="fbtn fb-Print2">打印质量验收单</a>
       <a v-on:click="printTag()"  v-show="trdo.billtype=='02' || trdo.billtype=='03' "
        v-if="'/supplier/print:printTag' | myqx (trdo.billtype=='02' && (trdo.billstate=='D02' || trdo.billstate=='D03') || trdo.billtype=='02' && (trdo.billstate=='D02' || trdo.billstate=='D03')) " 
        class="fbtn fb-Print" style="display: none;">打印高值追溯标签</a> 
      </div>
      <h3 class="current-module">跟台高值出库</h3>
    </div>
    <div class="order-highout">
      <!--跟台高值出库Tab页-->
      <model_tab :tab_index="tab_index"></model_tab>

      <div class="success-tit clearfix bottom-border">
        <h3>供应商出库单【{{trdo.billno}}】提交成功!</h3>
        <div class="group-row t-right">
          <div class="operate-btns">
            <button v-on:click="cancelHv" 
              v-if="'/supplier/trdo:submitTrsupplierdoHv' | myqx"
              class="btn button-red">撤销</button>
         </div>
        </div>
      </div>
      <div class="fheader gray-bottom">
        <h4>供应商出库单</h4>
      </div>
      <div class="pd-form mb-20">
        <div class="group-row group-row-3">
          <div class="form-group form-label">
            <label for="cn1" class="label">出库单号</label>
            <div class="control">
              <input type="text" id="cn1"  :value="trdo.billno"  readonly="readonly" class="inp4"></div>
          </div>
          <div class="form-group form-label">
            <label for="cn2" class="label">操作人</label>
            <div class="control">
              <input type="text" id="cn2" :value="trdo.operatername" readonly="readonly" class="inp3"></div>
          </div>
          <div class="form-group form-label">
            <label for="cn3" class="label">执行状态</label>
            <div class="control">
              <input type="text" id="cn3"  :value="trdo.billstate | billstate_trdo" readonly="readonly" class="inp4"></div>
          </div>
        </div>
        <div class="group-row group-row-3">
          <div class="form-group form-label">
            <label for="cn4" class="label">出库日期</label>
            <div class="control">
              <input type="text" id="cn4" :value="trdo.dodate | getYMD" readonly="readonly" class="inp4"></div>
          </div>
          <div class="form-group form-label">
            <label for="cn5" class="label">制单日期</label>
            <div class="control">
              <input type="text" id="cn5" :value="trdo.inputdate | getYMD" readonly="readonly" class="inp4"></div>
          </div>
          <div class="form-group form-label">
            <label for="cn6" class="label">单据类型</label>
            <div class="control">
              <input type="text" id="cn6"  :value="trdo.billtype | billtype" readonly="readonly" class="inp4"></div>
          </div>
        </div>
        <div class="group-row group-row-3">
          <div class="form-group form-label">
            <label for="cn7" class="label">要货科室</label>
            <div class="control">
              <input type="text" id="cn7" :value="trdo.meddeptname" readonly="readonly" class="inp4"></div>
          </div>
          <div class="form-group form-label">
            <label for="cn8" class="label">业务员</label>
            <div class="control">
              <input type="text" id="cn8" :value="trdo.mkstaffname" readonly="readonly" class="inp3">
            </div>
          </div>
          <div class="form-group form-label">
            <label for="cn9" class="label">要货库房</label>
            <div class="control">
              <input type="text" id="cn9" :value="trdo.medstorename" readonly="readonly" class="inp4"></div>
          </div>
        </div>
        <div class="group-row">
          <div class="form-group form-label">
            <label for="cn10" class="label">采购单位</label>
            <div class="control">
              <input type="text" id="cn10" :value="trdo.medname" readonly="readonly" class="inp4"></div>
          </div>
          <div class="form-group form-label">
            <label for="cn11" class="label">收货地点</label>
            <div class="control">
              <input type="text" id="cn11" :value="trdo.address" readonly="readonly" class="inp4"></div>
          </div>
        </div>
        <div class="form-group form-label">
          <label for="cn12" class="label">备注</label>
          <div class="control">
            <input type="text" id="cn12" :value="trdo.memo" readonly="readonly" class="inp2"></div>
        </div>
      </div>
      <div class="ctable ct-parentr">
        <div class="ct-head">
          <span class="ct-col w50">序号</span>
          <span class="ct-col w360">商品</span>
          <span class="ct-col w110">出库数</span>
          <span class="ct-col w140">出库单位</span>
          <span class="ct-col w140">包装价格</span>
          <span class="ct-col w140">含税金额</span>
        </div>
        <div class="ct-row"  v-for="mx in mxList">
          <div class="row-line">
            <span class="ct-col w50">
              {{$index+1}}
              <imagebox 
                v-if="mx.supplierGoodsguid!=null && imgcache[mx.supplierGoodsguid]!='NOPIC'"
                v-bind:imgarr="imgcache[mx.supplierGoodsguid] | original">
                  <img 
                    class="pro-pic" style="margin-top:0px;"
                    v-bind:src="imgcache[mx.supplierGoodsguid] | thumbnail">
                  <span class="pic-max blue-search">
                  </span>
              </imagebox> 
              <div class="pro-pic" 
                v-if="mx.supplierGoodsguid==null || imgcache[mx.supplierGoodsguid]=='NOPIC'"  
                style="background-image: url(../images/default.jpg)">
              </div>
            </span>
            <span class="ct-col w360 t-left break-it">
              <div class="p-lr-10 break">
                {{mx.supplierGoodscode}}
                <br>
                <span class="p-tit-green">{{mx.supplierGoodsname}}</span>
                <br>
                {{mx.purchaserGoodsspec}}
                <br>
                {{mx.manufacturer}}
                <br>{{mx.registkey}}</div>
            </span>
            <span class="ct-col w110 pt35">{{mx.supplierPesentqty}}</span>
            <span class="ct-col w140 pt40">{{mx.purchaseUnit}}</span>
            <span class="ct-col w140 pt40">{{mx.supplierPrice}}</span>
            <span class="ct-col w140 pt40">{{mx.amount}}</span>
          </div>
          <div class="row-line ml-50">
            <span class="ct-col w50"></span>
            <span class="ct-col w130">
              <span class="td-head text-color-green">批号</span>
              <span class="text-color-green">{{mx.lot}}</span>
            </span>
            <span class="ct-col w130">
              <span class="td-head text-color-green">生产日期</span>
              <span class="text-color-green">{{mx.productiondate | getYMD}}</span>
            </span>
            <span class="ct-col w130">
              <span class="td-head text-color-green">有效期至</span>
              <span class="text-color-green">{{mx.expiredate | getYMD}}</span>
            </span>
            <span class="ct-col w130">
              <span class="td-head text-color-green">灭菌批号</span>
              <span class="text-color-green">{{mx.sterilantlot}}</span>
            </span>
            <span class="ct-col w130">
              <span class="td-head text-color-green">灭菌日期</span>
              <span class="text-color-green">{{mx.sterilantdate | getYMD}}</span>
            </span>
            <span class="ct-col w140">
              <span class="td-head text-color-green">灭菌效期</span>
              <span class="text-color-green">{{mx.sterilantexpdate | getYMD}}</span>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>