<!--发票登录-->
<script >

  module.exports = {
    data: function () {
      return {
        // 明细数据
        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: '',
        },
        readonlyFlag:false,
      };
    },
    methods: {
      getData: function () {
        var self = this;
        Ajax.get('/trsettle/listTrsettle', 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;
        })          
      },
      // 发票登录：这里采用guid，因为明细表也是采用guid
      toLogInvoice:function(guid){
        var self = this;
        self.$route.router.go('/settlementInvoice2/'+guid);
      },
      // 单据状态
      stateBillno: function(billstate,objId){
        $("#statebill a").each(function(){
          // alert($(this).text());
          $(this).attr("class", "option");
        });
        $("#"+objId).attr("class","all active");
        // 设置查询的条件
        this.search.search_EQ_billstate = billstate;
      },
      // 发票状态
      stateInvoice: function(billstate,objId){
        $("#stateinvoice a").each(function(){
          // alert($(this).text());
          $(this).attr("class", "option");
        });
        $("#"+objId).attr("class","all active");
        // 设置查询的条件
        this.search.search_EQ_invoicestate = billstate;
      },
    },
    route: {
      activate: function () {
        this.getData();
      }
    }
  };
</script>
<template>
  <div class="container resource close-left-menu">

    <div class="pop-banner clearfix">
      <!-- <div class="current-operate"></div>
    -->
    <div class="operate-btns"></div>
    <h3 class="current-module">发票登录</h3>
  </div>

  <!--order-orderlist-view start-->
  <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 class='inp4' type="text" v-model="search.search_LIKE_settlebillno"></div>
        </div>

          <div class="form-group form-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-label">
          <label for="cn1" class="label">采购单位</label>
          <div class="control">
            <input class='inp4' type="text" v-model="search.search_LIKE_purchasercorpname"></div>
        </div>
        <div class="form-group">
          <label for="cn3" class="label">单据状态</label>
          <div id="statebill" class="control control-filtering control-filtering-green" style="width:77%">
              <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>
      <div class="group-row">
          <div class="form-group" style="width: 100%;">
            <label for="cn3" class="label">发票状态</label>
            <div id="stateinvoice" class="control control-filtering control-filtering-green" style="width:75%">
              <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="finish_invoice" class="option"
                @click="stateInvoice('I03','finish_invoice')">已开发票</a>
              <a id="part_invoice" class="option"
                @click="stateInvoice('I02','part_invoice')">已开部分发票</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-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="w70">单据状态</th>
          <th class="w100">商品数</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.purchasercorpname}}</td>
          <td class="v-middle">{{po.settlebillno}}</td>
          <td class="v-middle">{{po.settledate}}</td>
          <td class="v-middle">{{po.invoicestate | invoicestate}}</td>
          <td class="v-middle">{{po.billstate | settletype}}</td>
          <td class="v-middle">{{po.goodssum==null?'0':po.goodssum}}</td>
          <td class="v-middle">{{po.amount}}</td>
          <td class="v-middle">{{po.inovicedamount}}</td>
          <td class="v-middle">
            <td><a v-on:click="toLogInvoice(po.guid)" 
              class="btn-d btn-d-activate">发票录入</a></td>
        </tr>
      </tbody>
    </table>

    <div class="pagination m-20-0" v-if="mxList.length">
      <pagination
           @page-change="getData"
           :page-no.sync="search.page"
           :total-pages.sync="search.totalPages">          
        </pagination>
    </div>

  </div>
  <!--order-orderlist-view end-->

</div>
</template>