<!--医院对账单 - 列表-->
<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>{{dual}}
        </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">
                        <div class="control control-hint" >
                            <input type="text" id="cn1" v-model="search.suppliername" @click='onStateGoods'  title='供应商' placeholder="供应商"  v-on:blur="blur">
                            <ul class="hint-list" v-show="stategoods" v-on:mouseover="over=1" v-on:mouseout="over=0" style="overflow-y: auto;max-height: 400px;">
                                <li v-for="supplisr in supList" @click="selectSupplier(supplisr)"><span>{{ supplisr.settlecorpname }}</span></li>
                                <li v-if="supList.length == 0"><span>暂无数据!</span></li>
                            </ul>
                        </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.begindate" :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">
                    <button  v-on:click="getData(true)"  class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle fr">查 询</button>
                </div>
            </div>

            <p class="f-size14">
                当前有<span class="f_blue">{{inVoiceList.length}}</span>
                张入库单,  已选择<span class="f_blue">{{checkArrList.length}}</span>入库单，合计金额为<span class="f_blue">{{sumList | numDigit 2 | numFmt}}</span>元</p>

            <table class="itable itable-td-long-text">
                <thead >
                <tr>
                    <th class="w40"  >
                        <div class="checkbox-control">
                            <input type="checkbox" :id="1" @click="selectAllsum(selectAllList)" v-model="selectAllList" :value="1">
                            <label class="checkbox" style="line-height: 19px;" :for="1">序号</label>
                        </div>
                    </th>
                    <th class="w100">结算单号</th>
                    <th class="w100">供应商</th>
                    <!-- <th class="w50">单据状态</th> -->
                    <th class="w60">发票状态</th>
                    <th class="w80">结算日期</th>
                    <th class="w150">结算周期</th>
                    <th class="w80">结算金额(元)</th>
                    <th class="w80">操作</th>
                </tr>
                </thead>
                <tbody class="txt_v">
                <tr>
                    <td colspan="11" v-if="mxList.length==0">
                        暂无符合条件的记录
                    </td>
                </tr>
                <tr v-for="po in mxList" v-if="mxList.length!=0">
                    <td class="v-top pt10">
                        <div class="checkbox-control">
                            <input type="checkbox" :id="po.guid" v-model="checkArr" :value="po.guid+'/'+po.begindate+'/'+po.enddate+'/'+po.paystate +'/'+po.reminddate+'/'+po.isShowButton">
                            <label class="checkbox" :for="po.guid">{{ $index + 1 }}</label>
                        </div>
                    </td>
                    <td class="t-left pr10 v-top">{{po.settlebillno}}</td>
                    <td class="t-left pr10 v-top">{{po.settlecorpname}}</td>
                    <td class="v-top">{{po.billstate | settletype}}</td>
                    <!-- <td class="v-top">{{po.invoicestate | invoicestate}}</td> -->
                    <td class="v-top">{{po.settledate | getYMD }} </td><!--  <br>{{po.settledate | getHMS }} -->
                    <td class="v-top">{{po.begindate|getYMD}} <span>-</span> {{po.enddate |getYMD}}</td>
                    <td class="t-right pr10 v-top">{{po.amount  | numDigit 2 | numFmt}}</td>
                    <td class="v-top ">
                        <a  v-on:click="goDetail(po.guid)" class="btn button-green" >明细</a>
                    </td>
                </tr>
                </tbody>
            </table>
            <div class="pagination m-20-0">
                <pagination
                    @page-change="getData(false)"
                    :page-no.sync="search.page"
                    :total-pages.sync="search.totalPages">
                </pagination>
            </div>

        </div>
    </div>
</template>
<script >
    module.exports = {
        data: function () {
            return {
                // 明细数据
                mxList: [],
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    //total: 0,
                    settlebillno: '',
                    begindate: '',
                    enddate: '',
                    begindate1: '',
                    enddate1: '',
                    suppliername:'',
                    paystate:''
                },
                readonlyFlag:false,
                selectAllList: false,
                checkArr:[],
                checkArrList: '',
                checkArrGuid:[],
                excelList:[],
                supplierguid:'',
                supList:[],
                stategoods:false,
                over:0,
                checkArrGuidList:[],
                guidsList:{
                    guids:[],
                },
                sumList:0,
            };
        },
        methods: {
            blur:function(){
                if(this.over==false){
                    this.stategoods=false;
                }
            },
            onStateGoods:function(){
                var self = this;
                self.getSupplierList();
                self.stategoods =true;
            },
            // 导出查询的数据结果出来
            selectSupplier:function(data){
                var self = this;
                self.search.supplierguid = data.settlecorpguid;
                self.search.suppliername = data.settlecorpname;
                self.stategoods =false;
            },
            selectAllsum: function(flag) {
                var self = this;
                self.checkArr = [];
                if(!flag) {
                    self.mxList.forEach(function(item, i) {
                        var data = item.guid + '/' + item.begindate + '/' + item.enddate +'/'+ item.paystate +'/'+ item.reminddate +'/'+ item.isShowButton;
                        self.checkArr.push(data);
                    });
                } 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('/hospitalTrsettle/exportExcel', {
                    'guids': self.checkArrList
                }).
                then(function(response) {
                    var data = response.data;
                    window.open(data);
                })
            },
            getData: function (flag) {
                var self = this;
                if(flag){
                    self.search.page = 1;
                }
                self.checkArr = [];
                self.selectAllList = [];
                Ajax.post('/distributorTrsettle/listTrsettleDisMed', {'page':self.search.page,'pageSize':self.search.pageSize,'settlebillno':self.search.settlebillno,'begindate':self.search.begindate,'enddate':self.search.enddate,'begindate1':self.search.begindate1,'enddate1':self.search.enddate1,'supplierguid':self.search.supplierguid,'paystate':self.search.paystate})
                    .then(function (response){
                        var data = response.data.data;
                        if(response.data.errorCode == 0){
                            self.$set('mxList',data.list);
                            self.search.pageno = data.pageno;
                            self.search.totalPages = data.totalPages;
                            self.search.total = data.total;
                        }else {
                            self.MessageBox({
                                title: '警告',
                                message: data.message,
                                type: 'alert'
                            }, function(action) {});
                        }
                    })
            },
            getSupplierList: function () {
                var self = this;
                Ajax.post('/distributorTrsettle/getSupplierListDisMed', {'suppliername':self.search.suppliername})
                    .then(function (response){
                        var data = response.data.data;
                        if(response.data.errorCode == 0){
                            self.$set('supList',data);
                        }else {
                            self.MessageBox({
                                title: '警告',
                                message: data.message,
                                type: 'alert'
                            }, function(action) {});
                        }

                    })
            },
            // 跳转到明细页面
            goDetail:function(guid){
                var self = this;
                var type = 'cg';
                self.$route.router.go('/countSupplierStatistics2/'+guid +'/'+ type);
            },
            // 获取当前时间和之前一个月时间
            Date: function () {
                var self = this;
                // 结束日趋
                var nowdate = new Date();
                var y = nowdate.getFullYear();
                var m = nowdate.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                var d = nowdate.getDate();
                d = d < 10 ? '0' + d : d;
                self.search.enddate = y + '-' + m + '-' + d;

                // 开始日期
                nowdate.setMonth(nowdate.getMonth() - 1);
                var yn = nowdate.getFullYear();
                var mn = nowdate.getMonth() + 1;

                mn = mn < 10 ? '0' + mn : mn;

                var dn = nowdate.getDate();
                dn = dn < 10 ? '0' + dn : dn;
                self.search.begindate = yn + '-' + mn + '-' + dn;
            },
        },
        watch: {
            'checkArr': function(val) {
                var self = this;
                var arr, oList,oList1;
                self.checkArrList = [];
                self.checkArrGuid = [];
                self.checkArrGuidList = [];
                for(let i = 0; i < val.length; i++) {
                    arr = val[i].split('/');
                    oList = {
                        'guid': arr[0],
                        'begindate': arr[1],
                        'enddate': arr[2],
                        'paystate': arr[3],
                    }
                    oList1 = {
                        'guid': arr[0],
                        'paystate': arr[3],
                        'reminddate':arr[4],
                        'isShowButton': arr[5],
                    }
                    self.checkArrList.push(oList);
                    self.checkArrGuid.push(oList1);
                    self.checkArrGuidList.push(arr[0]);
                }
                var sum =0;
                for (var j = 0; j < self.mxList.length; j++) {
                    for (var k = 0; k < self.checkArrList.length; k++) {
                        if(self.checkArrList[k].guid == self.mxList[j].guid){
                            sum += self.mxList[j].amount;
                        }
                    }
                }
                self.sumList = sum;
                if(self.checkArrList.length == 0){
                    self.selectAllList = false;
                }
            },
            'search.suppliername':function(){
                var self = this;
                self.getSupplierList();
            },
            'search.paystate':function(){
                var self = this;
                self.getData(true);
            }

        },
        route: {
            activate: function () {
                this.getData(true);
                // this.getSupplierList();
            },
            data: function () {
                this.Date();

            }

        }
    };
</script>