<!--医院对账单 -详细-->
<script >
  module.exports = {
    data: function () {
      return {
        // 结算单汇总表
        settlepo:{},
        // 明细数据
        detailList: [],
        // 查询条件
        search: {
          pageSize: 5,
          page: 1,
          totalPages: 0,
          //total: 0,
          search_EQ_guid: '',
        },
        readonlyFlag:false,
      };
    },
    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.id;
        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;
        })          
      },
      // 选中之后的样式：默认只允许最多打开一个，如果当前的是已经打开的，那么关闭
      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);
        });
      },
    },
    route: {
      activate: function () {
        this.getSettle();
        this.getDetailList();
      }
    }
  };
</script>
<template>
  
  <div class="container resource close-left-menu">
  <div class="pop-banner clearfix">
    
    <div class="current-operate">供应商发票单[{{settlepo.settlebillno}}]详情</div>
<!--     <div class="operate-btns">
    </div> -->
    <h3 class="current-module">供应商发票单详情</h3>
  </div>
  
  <!--start-->
  <div class="pd-form pd-form-lg-label mb-40">
    <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" v-model="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" v-model="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" v-model="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" v-model="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" v-model="settlepo.begindate | getYMD" readonly="readonly">
          <span class="text-and">至</span>
          <input type="text" id="cn3" v-model="settlepo.enddate | getYMD" readonly="readonly">
        </div>
      </div>
      <div class="form-group fl">
        <div class="control w40 fl">
          <input type="text" id="cn4" v-model="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>
      <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}}
            <div class="pro-pic big-imgs" style="background-image: url(../assets/c17.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>