<template>
    <div>
        <el-dialog title="账单列表" :visible.sync="dialogVisible" width="70%">
            <el-table :header-cell-style="{ background: '#EEF5FD', color: '#18518B' }"  v-loading="loading" height="495" element-loading-text="拼命加载中" ref="multipleTable"  class="eltable" :data="list"  style="width: 100%">
                <el-table-column align="center" property="account_type" label="账户类型"> </el-table-column>
                <el-table-column align="center" property="cheque_type" label="服务渠道"> </el-table-column>
                <el-table-column align="center" property="name" label="病人姓名"> </el-table-column>
                <el-table-column align="center" property="out_trade_no" label="交易流水号"  width="260"></el-table-column>
                <el-table-column align="center" property="cheque_name" label="支付方式"></el-table-column>
                <el-table-column align="center" property="amount" label="交易金额">
                    <template slot-scope="scope">
                        {{cutMoneyFiter(scope.row.amount)}}
                    </template>
                </el-table-column>
                <el-table-column align="center" property="happen_date" label="交易时间" sortable  width="150"></el-table-column>
            </el-table>
            <pagination :total="total" :page.sync="pageInfo.page" :limit.sync="pageInfo.limit" @pagination="getList" />
        </el-dialog>
    </div>
</template>

<script>
import {
    payOrderList
} from '@/api/report'
export default {
    name: 'PayOrderList',
    props: {
        visible: Boolean,
        date:String,
        chequeName:String
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 表格数据
            list: [],
            // 总条数
            total:0,
            // 分页参数
            pageInfo: {
                page: 1,
                limit: 10,
            },
            queryParams: {
                happen_date: { value: [this.date+' 00:00:00',this.date+' 23:59:59'], op: 'between' },
                cheque_name:{value:this.chequeName,op: '='},
            },

        };
    },
    watch: {
        date: {
            immediate: true,
            handler (val, old) {
                this.getList()
            },
        }
    },
    computed: {
        dialogVisible: {
            get() {
                return this.visible;
            },
            set(val) {
                this.$emit('update:visible', val);
            },
        },
    },
    methods: {
        getList(){
            this.loading = true
            const qyparams = {
                ...this.pageInfo,
                ...this.formatQueryParams(this.queryParams)
            }
            payOrderList(qyparams).then(response => {
                    this.list = response.data.data
                    this.total = response.data.total
            }).finally(() => {
                this.loading = false
            })
        },
        toggleDialog(key, visible) {
            this[key] = visible;
        },
        handleOk() {},
    },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>
