<template>
  
  <div class="container resource close-left-menu">
  <div class="pop-banner clearfix"> 
     <div class="operate-btns">  
    </div>
    <h3 class="current-module">结算对账单详情</h3>
  </div>
  
  <!--start-->
  <div class="pd-form pd-form-lg-label">
    <div class="fheader mb-0 no-border pb10 pt10">
      <h4 class="fh-notes no-icon ">
        {{settlepo.settlecorpname}}
      </h4>
      <div class="fr primary-text">
        结算单号  <span class="text-color-blue f-size18">&nbsp;&nbsp;{{settlepo.settlebillno}}</span> 
        <span class="mar-20 text-color-red">{{settlepo.billstate | settletype}}</span> 
        品项数<span class="ctable-em" style='margin:0 10px;'>{{settlepo.countsum==null?0:settlepo.countsum}}</span>条</div>
    </div>
    <div class="group-row group-row-3">
      <div class="form-group">
        <label for="cn1" class="label fl w60">结算金额  </label> 
          <em style='font-size:20px;font-weight:600;' class="text-color-blue fl ml-5">{{settlepo.amount}}</em>
          <span class="fl lh-34 ml-5">元</span>
        
      </div>
      <div class="form-group">
        <label for="cn1" class="label" style='width:100%;  text-align: right;'>业务日期范围&nbsp;&nbsp;
          {{settlepo.begindate | getYMD}}&nbsp;&nbsp;-&nbsp;&nbsp;{{settlepo.enddate | getYMD}}
        </label> 
      </div>
      <div class="form-group">
        <label for="cn2" class="label" style='width:100%;'>结算日期 &nbsp;&nbsp;
          {{settlepo.settledate | getYMD}}
        </label> 
      </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> 
      </div> -->
    </div>
  
     <div class="fheader no-bottom bottom-border hide">
      <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 | numDigit 2 | numFmt}}</em>元
        </label> 
      </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> 
      </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> -->
    </div>
  </div>

  <div id="leftCtable" class="ctable ct-parent mt-20">
      <div class="ct-head break-line" id="t_header" style="border-top:0px;">
        <span class="ct-col w50">序号</span>
        <span class="ct-col w150">医疗机构</span>
        <span class="ct-col w150">商品名称</span>
        <span class="ct-col w100">批号效期</span> 
        <span class="ct-col w100">结算数量</span>
        <span class="ct-col w150">结算价格(元)</span>
        <span class="ct-col w150">结算金额(元)</span>
        <!-- <span class="ct-col w160">待开发票金额(元)</span>
        <span class="ct-col w140">已开发票金额(元)</span> -->
        <span class="ct-col w150">发票号码</span>
      </div>
      <div class="ct-row " v-if="detailList==null || detailList.length==0">
        <div class="row-line">
          <span class="ct-col  break-it w1003">
            暂无符合条件的记录!
          </span>
        </div>
      </div>
      <div class="ct-row " id="div{{$index}}" v-for="detailpo in detailList">
        <div class="row-line" @click="cssActive($index,detailpo.rpiflag)">
          <span class="ct-col w50 v-top">
            {{$index+1}} 
          </span>
          <span class="ct-col t-left w150 v-top">
            {{detailpo.medname}}
          </span>
          <span class="ct-col w150 break-it t-left pr10 v-top">
            <span class="break">{{detailpo.purchaserGoodscode}}<br><span class="text-color-blue">{{detailpo.purchaseGoodsname}}</span><br>{{detailpo.purchaserGoodsspec}}<br>{{detailpo.manufacturer}}<br>{{detailpo.registkey}}</span>
          </span>
          <span class="ct-col w100 t-left v-top">{{detailpo.lot}}<br>{{detailpo.expiredate | getYMD}}</span>
          <span class="ct-col w100 t-right pr50 v-top">{{detailpo.purchaseSettleqty}}{{detailpo.purchaser_unit}}</span>
          <span class="ct-col w150 t-right pr50 v-top">{{detailpo.purchaserPrice | numDigit 2 | numFmt}}</span>
          <span class="ct-col w150 break-it t-right pr50 v-top">{{detailpo.settleamount | numDigit 2 | numFmt}}</span>
          <!-- <span class="ct-col w160 break-it  t-right pr10">
            <span class="break">{{detailpo.settleamount-detailpo.invoiceamount<0?0:detailpo.settleamount-detailpo.invoiceamount | numDigit 2 | numFmt}}</span>
          </span>
          <span class="ct-col w140 break-it  t-right pr10">
            <span class="break">{{detailpo.invoiceamount | numDigit 2 | numFmt}}</span>
          </span> -->
          <span class="ct-col w150 t-center v-top">{{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>
                <th class="w80">发票号</th>
            </tr>
            </thead>
            <tbody>
              <tr v-if="detailpo.mxList==null || detailpo.mxList.length==0" >
                <td colspan="9">暂无符合条件的记录</td>
              </tr>
              <tr v-for="mx in detailpo.mxList" >
                <td>{{$index+1}}</td>
                <td class="t-center pr10">{{mx.supplierdobillno ==null?'- - -':mx.supplierdobillno}}</td>
                <!-- <td class="t-left pr10">{{mx.rowno}}</td> -->
                <td>{{mx.invoicestate | invoicestate}}</td>
                <td class="t-center pr10">{{mx.mvbillno}}</td>
                <!-- <td class="t-left pr10">{{mx.mvrowno}}</td> -->
                <td class="t-right pr10">{{mx.qty}}</td>
                <td class="t-right pr10">{{mx.price | numDigit 2 | numFmt}}</td>
                <td class="t-right pr10">{{mx.amount | numDigit 2 | numFmt}}</td>
                <td class="t-center pr10">{{mx.invoiceno}}</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>
<!--医院对账单 -详细-->
<script >
  module.exports = {
    data: function () {
      return {
        // 结算单汇总表
        settlepo:{},
        // 明细数据
        detailList: [],
        // 查询条件
        search: {
          pageSize: 50,
          page: 1,
          totalPages: 0,
          guid: '', 
        },
        readonlyFlag:false,
        purchase:'',
        listLowerLevelMedsReportList:[],
      };
    },
    methods: {
      // 结算单汇总表
      getSettle: function () {
        var self = this;
        if(self.$route.params.type == 'cw'){
            self.purchase = true;
        }else{
            self.purchase = false;
        }
        // 结算单guid
        self.search.guid = self.$route.params.guid; 
        Ajax.post('/hospitalTrsettle/listTrsettle', {'page':self.search.page,'pageSize':self.search.pageSize,'guid':self.search.guid})
          .then(function (response){
            var data = response.data.data;
            self.$set('settlepo',data.list[0]); 
            // self.search.pageno = data.pageno;
            // self.search.totalPages = data.totalPages;
            // self.search.total = data.total;
        })      
      }, 
      // 结算单明细表
      getDetailList:function(){
        var self = this;
        // 结算单guid
        self.search.guid = self.$route.params.guid; 
        Ajax.post('/hospitalTrsettle/listSettleDetail', 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;
        })          
      }, 
      // 选中之后的样式：默认只允许最多打开一个，如果当前的是已经打开的，那么关闭
      cssActive:function(divIndex,rpiflag){ 
        $("#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,rpiflag);

      },
      slidedown:function(index,rpiflag){
        var self = this;
        self.listTRSettleMV(index,rpiflag);
        
        $(".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,rpiflag) {
        var self = this;
        var dpoObj = self.detailList[index];
        var guid = dpoObj.guid; 
        var purchaseGoodsguid = dpoObj.supplier_goodsguid; 
        var wvguid = dpoObj.wvguid; 
        var wvrowno = dpoObj.wvrowno; 
          // 设置每组的查询条件   
          // 设置每组的查询条件
          dpoObj.search = {
            pageSize:5,
            page: 1,
            totalPages: 0,
            // search_EQ_guid:guid,
            billno:self.settlepo.settlebillno,
            goodsguid:purchaseGoodsguid, 
            wvguid:wvguid,
            wvrowno:wvrowno,
            rpiflag:rpiflag,
          };

        Ajax.post('/hospitalTrsettle/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);

        });
      },
    },
    route: {
      activate: function () {
        this.getSettle();
        this.getDetailList(); 
        this.listLowerLevelMedsReport();
      }
    }
  };
</script>