<!--医院对账单 - 列表-->
<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='结算单号' v-rule placeholder="结算单号" maxlength="20"></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('/hospitalTrsettle/listTrsettle', {'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('/hospitalTrsettle/getSupplierList', {'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('/settlementDetdail/'+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>