<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'){//修改成以下
                if(self.$route.params.type == 'cg'){
                    self.purchase = true;
                }else{
                    self.purchase = false;
                }
                // 结算单guid
                self.search.guid = self.$route.params.guid;
                Ajax.post('/distributorTrsettle/listTrsettleDisMed', {'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('/distributorTrsettle/listSettleDetailDisSup', 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('/distributorTrsettle/listTRSettleMVDisSup',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>