<!--医院对账单 -详细-->
<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
        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>
  
  <!--start-->
  <div class="pd-form pd-form-lg-label mb-20">
    <div class="fheader bottom-border">
      <imagebox v-bind:imgarr="settlepo.pictcontent | original">
									<span class="pic-max blue-search">
                    <img v-bind:src="settlepo.pictcontent | thumbnail">
                  </span>
      </imagebox>
      <h4 class="fh-notes no-icon">
        {{settlepo.purchasercorpname}}
      </h4>
      <div class="fr primary-text">
        结算单号 <span class="ctable-em pl5">{{settlepo.settlebillno}}</span>
        <span class="mar-20 text-color-red">{{settlepo.billstate | settletype}}</span> 
        商品数<span class="ctable-em"style='margin:0 10px;'>{{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" style='width:100%;'>结算金额  
          <em style='font-size:20px;font-weight:600;margin:0 10px;'>{{settlepo.amount}}</em>
          <span>元</span>
        </label>

      <!--   <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" style='width:100%;'>结算日期 
          <em style='margin:0 10px;'>{{settlepo.settledate | getYMD}}</em>
        </label>

    <!--     <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" style='width:100%;'>待开发票
          <em style='font-size:20px;font-weight:600;margin:0 10px;' class="text-color-red">{{settlepo.amount - settlepo.inovicedamount}}</em>
          <span>元</span>
        </label>
       <!--  <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 bottom-border">
      <h4 class="fh-notes no-icon ">
        已开部分发票
      </h4>
    </div>
    <div class="group-row group-row-3">
      <div class="form-group">
         <label for="cn3" class="label" style='width:100%;'>已开发票
          <em style='font-size:20px;font-weight:600;margin:0 10px;'>{{settlepo.inovicedamount}}</em>元
        </label>
     <!--    <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">
        <label for="cn1" class="label" style='width:100%;'>业务日期范围
          <em style='margin:0 5px;'>{{settlepo.begindate | getYMD}}</em>—<em style='margin:0 5px;'>{{settlepo.enddate | getYMD}}</em>
        </label>
      <!--   <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">
        <label class="label" style='width:100%;'>
          <em style='font-size:20px;font-weight:600;margin:0 10px;'>{{settlepo.inovicednum==null?0:settlepo.inovicednum}}</em>
        张发票
       </label>
      <!--   <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 w200">商品名称</span>
        <span class="ct-col w80">结算数量</span>
        <span class="ct-col w80">结算价格(元)</span>
        <span class="ct-col w100">结算金额(元)</span>
        <span class="ct-col w140">待开发票金额(元)</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 t-center">
          <span class="ct-col break-it">
            暂无符合条件的记录!
          </span>
        </div>
      </div>
      <div class="ct-row " id="div{{$index}}" v-for="detailpo in detailList">
        <div class="row-line" @click="cssActive($index)">
          <span class="ct-col w50 pr10">
            {{$index+1 }}
          </span>
          <span class="ct-col w200 break-it t-left pr10">
            <div class=" fl">
            <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);margin-top:0px;">
                <span class="pic-max blue-search">
              </span>
            </div>
            </div>
            <div class="p-lr-10 break fl  w140">
            <span class="break">{{detailpo.supplierGoodsname}}</span>
              </div>
          </span>
          <span class="ct-col w80 t-right pr10">{{detailpo.purchaseSettleqty}}{{detailpo.purchaseUnit}}</span>
          <span class="ct-col w80 t-right pr10">{{detailpo.settleprice | numDigit 2}}</span>
          <span class="ct-col w100 break-it t-right pr10">{{detailpo.settleamount| numDigit 2}}</span>
          <span class="ct-col w140 break-it t-right pr20">
            <span class="break">{{detailpo.settleamount-detailpo.invoiceamount| numDigit 2}}</span>
          </span>
          <span class="ct-col w140 break-it t-right pr20">
            <span class="break">{{detailpo.invoiceamount| numDigit 2}}</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="10">暂无符合条件的记录</td>
              </tr>
              <tr v-for="mx in detailpo.mxList" >
                <td>{{$index+1}}</td>
                <td class="t-left pr10">{{mx.supplierdobillno}}</td>
                <td class="t-left pr10">{{mx.rowno}}</td>
                <td>{{mx.invoicestate | invoicestate}}</td>
                <td class="t-left pr10">{{mvbillno}}</td>
                <td class="t-left pr10">{{mx.mvrowno}}</td>
                <td>{{mx.qty}}</td>
                <td class="t-right pr10">{{mx.price| numDigit 2}}</td>
                <td class="t-right pr10">{{mx.amount| numDigit 2}}</td>
              </tr>
            </tbody>
          </table>
          <div class="pagination page-line">
            <pagination v-if='detailpo.search'
                 @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>