<!--医院对账单 - 列表-->
<template>
  <div class="container resource close-left-menu contaNEW">
    <div class="pop-banner clearfix">
    <div class="operate-btns">
      <a href="javascript:void(0)" class="fbtn fb-download" @click='down'>导出</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.search_LIKE_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.search_LIKE_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.search_GTE_settledate" :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.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="group-row">
        <div class="form-group form_group_state">
          <label for="cn4" class="label w80">单据状态</label>
          <div id="statebill" class="control control-filtering control-filtering-green fl">
              <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>
      <div class="group-row">
        <div class="form-group form_group_state">
          <label for="cn5" class="label w80">发票状态</label>
          <div class="control control-filtering control-filtering-green fl">
              <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>
      <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="w70">结算日期</th>
          <th class="w80">结算金额(元)</th>
          <th class="w80">发票金额(元)</th>
          <th class="w80">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="mxList.length==0">
          <td colspan="10" >
          暂无符合条件的记录
          </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>{{po.billstate | settletype}}</td>
          <td>{{po.invoicestate | invoicestate}}</td>
          <td>{{po.settledate | getYMD }} <br>{{po.settledate | getHMS }}</td>
          <td class="t-right pr10">{{po.amount}}</td>
          <td class="t-right pr10">{{po.inovicedamount}}</td>
          <td class="pt5">
            <a  v-on:click="goDetail(po.guid)" class="btn button-green" >明细</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 {
            stateAll : 'all active',
            state1 : 'option',
            state2 : 'option',
            invoiceAll : 'all active',
            invoice1 :'option',
            invoice2 :'option',
            invoice3 :'option',

        // 明细数据
        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: '',
          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();
            }
            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();
        }
        this.getData();
    },
    down:function(){
      var self = this;

      Ajax.get('/hospitalTrsettle/exportTrsettleMed', this.search)
          .then(function (response){
            var data = response.data.data;
             if(response.data.errorCode > 0) {
              layer.msg(response.data.message);

            } else {
              window.open(response.data);
            }
        })

    },
    getData: function () {
        var self = this;
        Ajax.get('/hospitalTrsettle/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('/settlementDetdail/'+guid);
      },
    },
    route: {
      data: function () {
        this.search.search_LIKE_settlebillno=window.sessionStorage.getItem('statement');
        window.sessionStorage.setItem('statement','');
        this.getData();
      }
    }
  };
</script>