<!--医院对账单 - 列表-->
<template>
  <div class="container resource close-left-menu">
    <div class="pop-banner clearfix">
    <div class="operate-btns"></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">
          <label for="cn1" class="label">结算单号</label>
          <div class="control">
            <input type="text" v-model="search.search_LIKE_settlebillno"></div>
        </div>
        <div class="form-group">
          <label for="cn1" class="label">医疗机构</label>
          <div class="control">
            <input type="text" id="cn1" v-model="search.search_LIKE_medname" ></div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group">
          <label for="cn1" class="label">结算日期</label>
          <div class="control control-date">
            <div style="width:41%;float:left;">
              <datepicker :target.sync="search.search_GTE_settledate" :readonly="readonlyFlag"></datepicker>
            </div>
            <div class="text-and">至</div>
            <div style="width:41%;float:left;">
              <datepicker :target.sync="search.search_LTE_settledate"  :readonly="readonlyFlag"></datepicker>
            </div>  
          </div>
        </div>
      </div>
      <div class="form-group">
        <label for="cn3" class="label">单据状态</label>
        <div id="statebill" class="control control-filtering control-filtering-green">
           <a class="{{ stateAll }} option" href="javascript:void(0)" @click="state('0')">全部</a>
            <a class="{{ state1 }} option" href="javascript:void(0)" @click="state('1')">待提交</a>
            <a class="{{ state2 }} option" href="javascript:void(0)" @click="state('2')">已提交</a>  
        </div>
      </div>
      <div class="form-group">
        <label for="cn3" class="label">发票状态</label>
        <div class="control control-filtering control-filtering-green">
            <a class="{{ invoiceAll }} option" href="javascript:void(0)" @click="stateInvoice('0')">全部</a>
            <a class="{{ invoice1 }} option" href="javascript:void(0)" @click="stateInvoice('1')">未开发票</a>
            <a class="{{ invoice2 }} option" href="javascript:void(0)" @click="stateInvoice('2')">已开发票</a>
            <a class="{{ invoice3 }} option" href="javascript:void(0)" @click="stateInvoice('3')">已开部分发票</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-bordertop itable-td-long-text">
      <thead>
        <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>
        <tr>
          <td colspan="10" v-if="!mxList.length">
          暂无符合条件的记录
          </td>
        </tr>
        <tr v-for="po in mxList" v-else">
          <td>{{$index+1}}</td>
          <td>{{po.settlebillno}}</td>
          <td class="v-middle">{{po.medname}}</td>
          <td class="v-middle">{{po.billstate | settletype}}</td>
          <td class="v-middle">{{po.invoicestate | invoicestate}}</td>
          <td class="v-middle">{{po.settledate}}</td>
          <td class="v-middle">{{po.amount}}</td>
          <td class="v-middle">{{po.inovicedamount}}</td>
          <td class="v-middle">
            <a  v-on:click="goDetail(po.guid)" class="btn-d btn-d-activate" >明细</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 {
              stateAll : 'all active',
              state1 : 'option',
              state2 : 'option',
              invoiceAll : 'all active',
              invoice1 :'option',
              invoice2 :'option',
              invoice3 :'option',
              invoice4 :'option',
        // 明细数据
        mxList: [],
        // 查询条件
        search: {
          pageSize: 5,
          page: 1,
          totalPages: 0,
          //total: 0,
          search_LIKE_settlebillno: '',
          search_EQ_billstate: '',
          search_EQ_invoicestate: '',
          search_GTE_settledate: '',
          search_LTE_settledate: '',
          search_LIKE_medname:'',
        },
        readonlyFlag:false,
      };
    },
    methods: {
         // 单据类型
        state: function(flag){
            var self = this;
            if(flag == 0){
              self.$set('stateAll',"all active");
              self.$set('state1',"option");
              self.$set('state2',"option");
              self.$set('search.search_EQ_billstate',"");
              // this.getData();
            }else if(flag == 1){
              self.$set('stateAll',"option");
              self.$set('state1',"all active");
              self.$set('state2',"option");
              self.$set('search.search_EQ_billstate',"S01");
              // this.getData();
            }else if(flag == 2){
              self.$set('stateAll',"option");
              self.$set('state1',"option");
              self.$set('state2',"all active");
              self.$set('search.search_EQ_billstate',"S02");
              // this.getData();
            } 
    },
    // 结算状态
  stateInvoice: function(flag){
        var self = this;
        if(flag == 0){
          self.$set('invoiceAll',"all active");
          self.$set('invoice1',"option");
          self.$set('invoice2',"option");
          self.$set('invoice3',"option");
          self.$set('invoice4',"option");
        
          self.$set('search.search_EQ_invoicestate',"");
          // this.getData();
        }else if(flag == 1){
          self.$set('invoiceAll',"option");
          self.$set('invoice1',"all active");
          self.$set('invoice2',"option");
          self.$set('invoice3',"option");
          self.$set('invoice4',"option");
       
          self.$set('search.search_EQ_invoicestate',"I01");
          // this.getData();
        }else if(flag == 2){
          self.$set('invoiceAll',"option");
          self.$set('invoice1',"option");
          self.$set('invoice2',"all active");
          self.$set('invoice3',"option");
          self.$set('invoice4',"option");
          self.$set('search.search_EQ_invoicestate',"I03");
          // this.getData();
        }else if(flag == 3){
          self.$set('invoiceAll',"option");
          self.$set('invoice1',"option");
          self.$set('invoice2',"option");
          self.$set('invoice3',"all active");
          self.$set('invoice4',"option");
         self.$set('search.search_EQ_invoicestate',"I02");
          // this.getData();
        }
    },

      getData: function () {
        var self = this;
        Ajax.get('/distributorTrsettle/listTrsettleMed', 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('/countHospitalStatistics2/'+guid);
      },
     },
    route: {
      activate: function () {
        this.getData();
      }
    }
  };
</script>