<style>
    @import "../css/cssReset.css";
</style>
<template>
    <div class='flexOne page-body'>
        <div class="query-box">
            <ul>
                <li>
                    <span>
                        <em>财务单据</em>
                        <el-input type="text" v-model="msg.FinanceId" placeholder="请输入财务单据"></el-input>
                    </span>
                </li>
                <li>
                    <span>
                        <em>收据状态</em>
                        <el-select v-model="msg.State" filterable clearable>
                            <el-option label="不限" :value="0"></el-option>
                            <el-option label="已认领" :value="1"></el-option>
                            <el-option label="未认领" :value="2"></el-option>
                        </el-select>
                    </span>
                </li>
                <li>
                    <span><em>收据编码</em>
                        <el-input type="text" v-model="msg.ReceiptNo" placeholder="请输入收据编码"></el-input>
                    </span>
                </li>
                <li>
                    <span><em>交款人</em>
                        <el-input type="text" v-model="msg.Remitter" placeholder="请输入交款人"></el-input>
                    </span>
                </li>

                <li>
                    <q-btn color="primary" size="11px" label="查询"  @click="handleCurrentChange(1)" />
                </li>
            </ul>
        </div>
        <div class="cm_content">
            <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
                <tr>
                    <th width="150">财务单据</th>
                    <th >收据编码</th>
                    <th >交款人</th>
                    <th width="100">金额</th>
                    <th width='550'>收款事由</th>
                    <th>状态</th>
                    <th>认领码</th>
                    <th>甲鹤用户</th>
                    <th>经办人</th>
                    <th>开票日期</th>
                </tr>
                <tr v-for="item in dataList">
                    <td> <span style="cursor: pointer;text-decoration: underline;" @click="goFinancialDetail(item)">{{item.FinanceId}}</span> </td>
                    <td>{{item.ReceiptNo}}</td>
                    <td>{{item.Remitter}}</td>
                    <td>{{item.Money}}</td>
                    <td>{{item.Remark}}</td>
                    <td>{{item.State==1?'已认领':'未认领'}}</td>
                    <td>{{item.ClaimCode}}</td>
                    <td>{{item.UserName}}</td>
                    <td>{{item.CreateByName}}</td>
                    <td>{{item.CreateTime}}</td>

                </tr>
            </table>
            <div class="noDataNotice" v-if="dataList && dataList.length<1">
                <i class="iconfont icon-kong"></i>
                <p>{{$t("active.ld_noData")}}</p>
            </div>
        </div>
        <el-pagination background @current-change="handleCurrentChange" :current-page.sync="msg.pageIndex"
            :page-size="msg.pageSize" layout="total,prev, pager, next, jumper" :total="msg.total"></el-pagination>
    </div>
</template>
<script>
    import {
        getReceiptInfoPageList,

    } from '../../../api/finance/index'
    export default {
        data() {
            return {
                msg: {
                    pageIndex: 1,
                    pageSize: 10,
                    FinanceId: '',
                    State: 0,
                    ReceiptNo: '',
                    Remitter: '',
                    total:0
                },
                loading: false,
                dataList: [],
              
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.msg.pageIndex = val;
                this.getList();
            },
            getList() { //获取列表
                this.loading = true;
                getReceiptInfoPageList(this.msg).then(res => {
                    if (res.Code == 1) {
                        this.loading = false;
                        this.dataList = res.Data.PageData;
                        this.msg.total = res.Data.Count;

                    }
                })
            },
            goFinancialDetail(item){
                this.OpenNewUrl("/financial/financalDocument/FinancialDocumentsDetail", {
                    id: item.FinanceId
                    });
            },
        },
        mounted() {
            this.getList();
        }
    }

</script>