<!--配送商对账单 -详细-->
<script >
  module.exports = {
    data: function () {
      return {
        // 结算单汇总表
        settlepo:{},
        // 明细数据
        detailList: [],
        // 图片数据
        imgcache:[],

        // 查询条件
        search: {
          pageSize: 50,
          page: 1,
          totalPages: 0,
          //total: 0,
          search_EQ_guid: '',
        },
        readonlyFlag:false,
        
        // 打印质量验收单
        printParam:{
          guid :'',// 出库汇总单单据编号
        }
      };
    },
    methods: {
      // 结算单汇总表
      getSettle: function () {
        var self = this;
        // 结算单guid
        self.search.search_EQ_guid = self.$route.params.guid;

        Ajax.get('/trsettle/getTrsettle', this.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('settlepo',data);
        })          
      },
      // 结算单明细表
      getDetailList:function(){
        var self = this;
        // 结算单guid
        if(self.search.search_EQ_guid!=''){
          self.search.search_EQ_guid = self.$route.params.guid; 
        }

        Ajax.get('/trsettle/listTrsettledetail', this.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('detailList',data.list);

            self.search.pageno = data.pageno;
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;

            // 封存商品图片信息
            self.$set('imgcache',response.data.senData);
        })          
      },
      // 选中之后的样式：默认只允许最多打开一个，如果当前的是已经打开的，那么关闭
      cssActive:function(divIndex){ 
        $("#leftCtable .ct-row").each(function(){
          if($(this).attr("id")==("div"+divIndex)){
            $("#div"+divIndex).attr("class","ct-row active");  
          }else{
            // $(this).attr("class", "ct-row");            
          }
        });  

        this.slidedown(divIndex);

      },
      slidedown:function(index){
        var self = this;
        self.listTRSettleMV(index);
        
        $(".ct-row:eq("+index+")").addClass("active");
        $(".row-launch:eq("+index+")").slideDown(400,function(){
          
        });
      },
      slideup:function(index){
        $(".row-launch:eq("+index+")").slideUp(400,function(){
            $(".ct-row:eq("+index+")").removeClass('active');
        });
      },
      // 结算单出库明细（手风琴效果）
      listTRSettleMV: function (index) {
        var self = this;

        var dpoObj = self.detailList[index];
        var guid = dpoObj.guid;
        var purchaseGoodsguid = dpoObj.purchaseGoodsguid;
        if(dpoObj.search!=null){
          // 设置每组的查询条件
          dpoObj.search = {
            pageSize:5,
            page: 1,
            totalPages: 0,
            guid:guid,
            purchaseGoodsguid:purchaseGoodsguid,
          };
        }

        Ajax.get('/trsettle/listTRSettleMV',dpoObj.search)
          .then(function (response) {
            var data = response.data.data;

            self.$set('detailList['+index+'].mxList', data.list);

            dpoObj.search.pageno = data.pageno;
            dpoObj.search.totalPages = data.totalPages;
            dpoObj.search.total = data.total;
            self.$set('detailList['+index+'].search',dpoObj.search);
        });
      },
      // 打印结算单
      printJsd:function(){
        var self = this;
        self.printParam.guid = self.settlepo.guid;
        Ajax.get('/print/printJsd', this.printParam)
          .then(function (response){
            var data = response.data;
            if(data.errorCode==0){
              window.open (data.data);
            }else{
              layer.msg(data.message);
            }
        })
      },
    },
    route: {
      activate: function () {
        this.getSettle();
        this.getDetailList();
      }
    }
  };
</script>
<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
      <div class="operate-btns">
        <a v-on:click="printJsd()"
          class="fbtn fb-Print2">打印结算入库单</a>
      </div>
  <!--     <div class="operate-btns">
      </div> -->
      <h3 class="current-module">配送商结算对账单[{{settlepo.settlebillno}}]详情</h3>
  </div>
  <div class="pd-form pd-form-lg-label mb-20">
    <div class="fheader bottom-border">
      <h4 class="fh-notes no-icon">北京积水潭医院</h4>
      <div class="fr primary-text">
        结算单号
        <span class="ctable-em">{{settlepo.settlebillno}}</span>
        <span class="mar-20 text-color-red">{{settlepo.billstate | settletype}}</span>
        商品数
        <span class="ctable-em">{{settlepo.goodssum==null?0:settlepo.goodssum}}</span>
        条
      </div>
    </div>
    <div class="group-row group-row-3">
      <div class="form-group">
        <label for="cn1" class="label">结算金额</label>
        <div class="control">
          <input type="text" id="cn1" :value="settlepo.amount" readonly="readonly" class="w140">
          <span>元</span>
        </div>
      </div>
      <div class="form-group">
        <label for="cn2" class="label">结算日期</label>
        <div class="control">
          <input type="text" id="cn2" :value="settlepo.settledate | getYMD" readonly="readonly"></div>
      </div>
      <div class="form-group">
        <label for="cn3" class="label">待开发票</label>
        <div class="control">
          <input type="text" id="cn3" :value="settlepo.amount - settlepo.inovicedamount"  
            readonly="readonly" class="w140 text-color-red">元</div>
      </div>
    </div>

    <div class="fheader no-bottom">
      <h4 class="fh-notes no-icon">已开部分发票</h4>
    </div>
    <div class="group-row group-row-3">
      <div class="form-group">
        <label for="cn3" class="label">已开发票</label>
        <div class="control">
          <input type="text" id="cn3" :value="settlepo.inovicedamount" readonly="readonly" class="w140">元</div>
      </div>
      <div class="form-group w370">
        <label for="cn1" class="label label-6em">业务日期范围</label>
        <div class="control control-date">
          <input type="text" id="cn3" :value="settlepo.begindate | getYMD"  readonly="readonly">
          <span class="text-and">至</span>
          <input type="text" id="cn3" :value="settlepo.enddate | getYMD" readonly="readonly"></div>
      </div>
      <div class="form-group fl">
        <div class="control w40 fl">
          <input type="text" id="cn4" :value="settlepo.inovicednum==null?0:settlepo.inovicednum"  
            readonly="readonly"></div>
        <label for="cn4" class="label">张发票</label>
      </div>
    </div>
  </div>

  <div id="leftCtable" class="ctable ct-parent">
    <div class="ct-head break-line">
      <span class="ct-col w50">序号</span>
      <span class="ct-col w180">商品名称</span>
      <span class="ct-col w80">结算数量</span>
      <span class="ct-col w80">结算价格</span>
      <span class="ct-col w100">结算金额</span>
      <span class="ct-col w160">待开发票金额</span>
      <span class="ct-col w140">已开发票金额</span>
      <span class="ct-col w200">发票号码</span>
    </div>
    <div class="ct-row " v-if="detailList==null || detailList.length==0">
      <div class="row-line">
        <span class="ct-col  break-it">
          暂无符合条件的记录!
        </span>
      </div>
    </div>
    <!--注意active属性-->
    <div class="ct-row " id="div{{$index}}" v-for="detailpo in detailList">
      <div class="row-line" @click="cssActive($index)">
        <span class="ct-col w50">
          {{$index+1 | getIndex}}
          <imagebox  v-bind:imgarr="imgcache[detailpo.supplierGoodsguid] | original">
            <img 
              v-if="detailpo.supplierGoodsguid!=null && imgcache[detailpo.supplierGoodsguid]!='NOPIC'"  
              class="pro-pic" style="margin-top:0px;"
              v-bind:src="imgcache[detailpo.supplierGoodsguid] | thumbnail">
            <span class="pic-max blue-search">
            </span>
          </imagebox>   
          <div class="pro-pic" 
            v-if="detailpo.supplierGoodsguid==null || imgcache[detailpo.supplierGoodsguid]=='NOPIC'"  
            style="background-image: url(../images/default.jpg)"></div>
        </span>
        <span class="ct-col w180 break-it">
          <span class="break">{{detailpo.supplierGoodsname}}</span>
        </span>
        <span class="ct-col w80">{{detailpo.purchaseSettleqty}}</span>
        <span class="ct-col w80">{{detailpo.settleprice}}</span>
        <span class="ct-col w100 break-it">{{detailpo.settleamount}}</span>
        <span class="ct-col w160 break-it">
          <span class="break">{{detailpo.settleamount-detailpo.invoiceamount}}</span>
        </span>
        <span class="ct-col w140 break-it">
          <span class="break">{{detailpo.invoiceamount}}</span>
        </span>
        <span class="ct-col w200 break-it">{{detailpo.invoiceno}}</span>
      </div>
      <div class="row-launch" style="display: none">
          <table class="itable itable-td-long-text">
            <thead>
              <tr>
                <th class="w50">序号</th>
                <th class="w140">供应商出库单号</th>
                <th class="w70">行号</th>
                <th class="w50">发票状态</th>
                <th class="w110">医院入库单号</th>
                <th class="w50">入库单行号</th>
                <th class="w80">数量</th>
                <th class="w50">出库价格</th>
                <th class="w80">出库金额</th>
            </tr>
            </thead>
            <tbody>
              <tr v-if="!detailpo.mxList" >
                <td colspan="9">暂无符合条件的记录</td>
              </tr>
              <tr v-for="mx in detailpo.mxList" >
                <td>{{$index+1}}</td>
                <td>{{mx.settlebillno}}</td>
                <td>{{mx.rowno}}</td>
                <td>{{mx.invoicestate | invoicestate}}</td>
                <td>{{mvbillno}}</td>
                <td>{{mx.mvrowno}}</td>
                <td>{{mx.qty}}</td>
                <td>{{mx.price}}元</td>
                <td>{{mx.amount}}元</td>
              </tr>
            </tbody>
          </table>
          <div class="pagination page-line">
            <pagination
                 @page-change="listTRSettleMV($index)"
                 :page-no.sync="detailpo.search.page"
                 :total-pages.sync="detailpo.search.totalPages">          
              </pagination>
          </div>
          <div class="zip" @click="slideup($index)"></div>
        </div>
    </div>    
  <!--最外层翻页-->
  <div class="pagination m-20-0">
    <pagination
       @page-change="getDetailList"
       :page-no.sync="search.page"
       :total-pages.sync="search.totalPages">          
    </pagination>
  </div>
  <!--basic-message end-->

</div>
</template>