<!--医院对账单 - 列表-->
<template>
    <div class="container resource close-left-menu">
        <div class="pop-banner clearfix">
            <div class="operate-btns">
                <a href="javascript:;" class="fbtn fb-upload ml-10" @click='export'>导出</a>
            </div>
            <h3 class="current-module">医院结算对账单</h3>
        </div>
        <div class="order-orderlist-view clearfix">
            <div class="pd-form form-label4em mb-40 fast-search-form">
                <div class="group-row">
                    <div class="form-group form-label">
                        <!-- <label for="cn1" class="label">结算单号</label> -->
                        <div class="control">
                            <input type="text" v-model="search.settlebillno" title='结算单号' placeholder="结算单号"></div>
                    </div>
                    <div class="form-group form-label">
                        <!-- <label for="cn1" class="label">医疗机构</label> -->
                        <div class="control">
                            <input type="text" id="cn1" v-model="search.medname" title='医疗机构' placeholder="医疗机构"></div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <!-- <label for="cn1" class="label">结算日期</label> -->
                        <div class="control control-date" style="height:34px;overflow: inherit;">
                            <div style="width:44%;float:left;">
                                <datepicker :target.sync="search.startdate" :readonly="readonlyFlag" placeholder="结算开始日期" title='结算开始日期' styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
                            </div>
                            <div class="text-and">至</div>
                            <div style="width:48%;float:left;">
                                <datepicker :target.sync="search.enddate" :readonly="readonlyFlag" title='结算结束日期' placeholder="结算结束日期" styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="group-row t-right">
                    <button v-on:click="getData()" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询</button>
                </div>
            </div>
            <div class="statistics">
                您当前共有 <em>{{search.total}}</em>张结算对账单
            </div>
            <table class="itable itable-td-long-text mb-20">
                <thead>
                <tr>
                    <th class="w40" >
                        <div class="checkbox-control">
                            <input type="checkbox"  @click="selectAllsum(selectAllList)" :id="1"  v-model="selectAllList" :value="1">
                            <label class="checkbox" style="line-height: 19px;" :for="1">序号</label>
                        </div>
                    </th>
                    <th class="w120">结算单号</th>
                    <th class="w120">医疗机构</th>
                    <th class="w80">结算日期</th>
                    <th class="w160">结算周期</th>
                    <th class="w80">结算金额(元)</th>
                    <th class="w70">明细数</th>
                    <th class="w80">操作</th>
                </tr>
                </thead>
                <tbody class="txt_v">
                <tr v-if="mxList==null || mxList.length==0">
                    <td colspan="10">
                        <span v-if="!isLoading">暂无符合条件的记录</span>
                        <div v-else class="sk-spinner sk-spinner-wave">
                            <div class="sk-rect1"></div>
                            <div class="sk-rect2"></div>
                            <div class="sk-rect3"></div>
                            <div class="sk-rect4"></div>
                            <div class="sk-rect5"></div>
                        </div>
                    </td>
                </tr>

                <tr v-else  v-for="mx in mxList">
                    <td class="pb15 pt7">
                        <div class="checkbox-control">
                            <input type="checkbox" :id="mx.guid" v-model="checkArr" :value="mx.guid+'/'+mx.begindate+'/'+mx.enddate">
                            <label class="checkbox" :for="mx.guid">{{ $index + 1 }}</label>
                        </div>
                    </td>
                    <td class="t-left pr10 v-top">{{mx.settlebillno}}</td>
                    <td class="t-left pr10 v-top">{{mx.medname}}</td>
                    <td class="v-top">{{mx.settledate |getYMD}}</td>
                    <td class="v-top">{{mx.begindate|getYMD}} <span>-</span> {{mx.enddate |getYMD}}</td>
                    <td class="t-right v-top">{{mx.amount | numDigit 2 | numFmt}}</td>
                    <td class="v-top">{{mx.countsum}}</td>
                    <td class="pt7">
                        <a class="btn button-green" v-link="{path:'/countHospitalStatistics2/'+mx.guid}">明细</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <pagination @page-change="getData" :page-no.sync="search.page" :total-pages.sync="search.totalPages">
            </pagination>

        </div>
    </div>
</template>
<script>
    module.exports = {
        data: function() {
            return {
                // 查询数据列表
                mxList: [],
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    settlebillno: '',
                    startdate: this.GetDate().begindate,
                    enddate: this.GetDate().enddate,
                    medname: '',
                    pageNo: '',
                    totalPages: '',
                    total: '',
                    paystate:''
                },
                isLoading:true,
                selectAllList: false,
                checkArr:[],
                checkArrList: '',
                excelList:[],
            };
        },
        methods: {
            selectAllsum: function(flag) {
                var self = this;
                self.checkArr = [];
                if(!flag) {
                    self.mxList.forEach(function(item, i) {
                        var data = item.guid + '/' + item.begindate + '/' + item.enddate;
                        self.checkArr.push(data);
                        console.log(self.checkArr);
                    });
                } else {
                    self.$set('checkArr', []);
                    self.mxList.forEach(function(item, i) {
                    });
                }
            },
            export: function() {
                var self = this;
                if(self.checkArrList.length == 0) {
                    self.MessageBox({
                        title: '提示',
                        message: '请勾选要出库的单据!',
                        type: 'alert'
                    }, function(action) {});
                    return;
                }
                for (var i = 0; i < self.checkArrList.length; i++) {
                    self.checkArrList[i].begindate = self.checkArrList[i].begindate.substr(0, 10);
                    self.checkArrList[i].enddate = self.checkArrList[i].enddate.substr(0, 10);
                }
                Ajax.post('/trsettle/exportExcel', {
                    'guids': self.checkArrList
                }).
                then(function(response) {
                    var data = response.data;
                    window.open(data);
                })
            },
            getData: function() {
                var self = this;
                self.$set('mxList', '');
                self.isLoading=true;
                self.checkArr = [];
                self.selectAllList = [];
                Ajax.post('/distributorTrsettle/listTrsettleDisMed', self.search)
                    .then(function(response) {
                        self.isLoading=false;
                        var data = response.data.data;
                        if(data.list){
                            self.$set('mxList', data.list);
                        }
                        self.search.pageno = data.pageno;
                        self.search.totalPages = data.totalPages;
                        self.search.total = data.total;
                    })
            },
        },
        watch: {
            'checkArr': function(val) {
                var self = this;
                var arr, oList;
                self.checkArrList = [];
                for(let i = 0; i < val.length; i++) {
                    arr = val[i].split('/');
                    oList = {
                        'guid': arr[0],
                        'begindate': arr[1],
                        'enddate': arr[2],
                    }
                    self.checkArrList.push(oList);
                }
                if(self.checkArrList.length == 0){
                    self.selectAllList = false;
                }
            },
            'search.paystate':function(){
                var self = this;
                self.getData(true);
            }

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