<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
    <div class="operate-btns"></div>
    <h3 class="current-module">医院结算对账单</h3>
  </div>
  <div class="order-orderlist-view clearfix">
    <div class="pd-form form-label4em mb-20 fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <!-- <label for="cn1" class="label lable-xf pl10">结算单号</label> -->
          <div class="control">
            <input type="text" v-model="search.search_LIKE_settlebillno" title='结算单号' placeholder='结算单号'></div>
        </div>
        <div class="form-group">
          <!-- <label for="cn1" class="label lable-xf pl10">医疗机构</label> -->
          <div class="control">
            <input type="text" id="cn1" title='医疗机构' placeholder='医疗机构'></div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
          <!-- <label for="cn1" class="label lable-xf pl10">结算日期</label> -->
          <div class="control control-date" style="height:34px;overflow: inherit;">
            <div style="width:44%;float:left;">
              <datepicker :target.sync="search.search_GTE_settledate" :readonly="readonlyFlag" title='结算日期起' 
              placeholder='结算日期起'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.search_LTE_settledate"  :readonly="readonlyFlag" title='结算日期止'
               placeholder='结算日期止'styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
            </div>  
          </div>
        </div>
      </div>
      <div class="form-group h-35">
        <label for="cn3" class="label fl lh-34"><b>单据状态</b></label>
        <div id="statebill" class="control control-filtering control-filtering-green fl ml-20">
            <a id="all_bill" class="all active"
              @click="stateBillno('','all_bill')">全部</a>
            <a id="wating_bill" class="option"
              @click="stateBillno('S01','wating_bill')">待提交</a>
            <a id="submit_bill" class="option"
              @click="stateBillno('S02','submit_bill')">已提交</a>        
        </div>
      </div>
      <div class="form-group h-35 mt-5">
        <label for="cn3" class="label fl lh-34"><b>发票状态</b></label>
        <div id="stateinvoice" class="control control-filtering control-filtering-green fl ml-20">
            <a id="all_invoice" class="all active" 
              @click="stateInvoice('','all_invoice')">全部</a>
            <a id="wating_invoice" class="option"
              @click="stateInvoice('I01','wating_invoice')">未开发票</a>
            <a id="part_invoice" class="option"
          @click="stateInvoice('I02','part_invoice')">已开部分发票</a>
          <a id="finish_invoice" class="option"
             @click="stateInvoice('I03','finish_invoice')">已开发票</a>
        </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>

    <table class="itable itable-td-long-text">
      <thead id="t_header">
        <tr>
          <th class="w40">序号</th>
          <th class="w130">结算单号</th>
          <th class="w100">医疗机构</th>
          <th class="w80">单据状态</th>
          <th class="w80">发票状态</th>
          <th class="w80">结算日期</th>
          <th class="w80">结算金额</th>
          <th class="w80">发票金额</th>
          <th class="w80">操作</th>
        </tr>
      </thead>
      <tbody class="txt_v">
        <tr>
          <td colspan="10" v-if="mxList.length==0">
          暂无符合条件的记录
          </td>
        </tr>
        <tr v-for="po in mxList" v-else>
          <td>{{$index+1}}</td>
          <td class="t-left pr10">{{po.settlebillno}}</td>
          <td class="t-left pr10">{{po.medname}}</td>
          <td :class="po.billstate=='S01'? 'text-color-red':''">{{po.billstate | settletype}}</td>
          <td v-if="po.invoicestate=='I01'" class="text-color-or" >{{po.invoicestate | invoicestate}}</td>
          <td v-if="po.invoicestate=='I02'" class="text-color-red" >{{po.invoicestate | invoicestate}}</td>
          <td v-if="po.invoicestate=='I03'" >{{po.invoicestate | invoicestate}}</td>

          <td>{{po.settledate| getYMD}} <br> {{po.settledate| getHMS}}</td>
          <td class="t-right pr10">{{po.amount | numDigit 2 | numFmt}}元</td>
          <td class="t-right pr10">{{po.inovicedamount | numDigit 2 | numFmt}}元</td>
          <td class="pr7">
            <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"
           :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,
          search_LIKE_settlebillno: '',
          search_EQ_billstate: '',
          search_EQ_invoicestate: '',
          search_GTE_settledate: '',
          search_LTE_settledate: '',
        },
        readonlyFlag:false,
      };
    },
    methods: {
      getData: function () {
        var self = this;
        Ajax.get('/trsettle/listMed', this.search)
          .then(function (response){
            var data = response.data.data;
            self.$set('mxList',data.list);

            self.search.pageno = data.pageno;
            self.search.totalPages = data.totalPages;
            self.search.total = data.total;
        })          
      },
      // 跳转到明细页面
      goDetail:function(guid){
        var self = this;
        self.$route.router.go('/trsettle/settlementHospitalList2/'+guid);
      },
      // 单据状态
      stateBillno: function(billstate,objId){
        $("#statebill a").each(function(){
          $(this).attr("class", "option");
        });
        $("#"+objId).attr("class","all active");
        // 设置查询的条件
        this.search.search_EQ_billstate = billstate;
        this.getData();
      },
      // 发票状态
      stateInvoice: function(billstate,objId){
        $("#stateinvoice a").each(function(){
          $(this).attr("class", "option");
        });
        $("#"+objId).attr("class","all active");
        // 设置查询的条件
        this.search.search_EQ_invoicestate = billstate;
        this.getData();
      },
    },
    route: {
      activate: function () {
        this.getData();
      }
    }
  };
</script>