<template>
    <div v-loading="loading">
        <!-- 搜索区域 -->
        <el-form :model="queryParams" ref="queryForm" :inline="true">
            <el-form-item label="日期范围">
                <el-date-picker
                    v-model="dateRange"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                    size="mini"
                    :clearable="true">
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery" size="mini">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery" size="mini">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 表格区域 -->
        <el-table
            :data="list"
            style="width: 100%"
            size="mini"
            border>
            <el-table-column
                prop="arrivalName"
                label="名称"
                align="center">
                <template slot-scope="scope">
                    {{ scope.row.arrivalName || '-' }}
                </template>
            </el-table-column>
            <el-table-column
                prop="totalAmount"
                label="总金额"
                align="center">
                <template slot-scope="scope">
                    {{ scope.row.totalAmount.toFixed(2) }}
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import {getBonusGroupByMch } from '@/api/system/dashboard.js'

export default {
    name: "BonusDashboard",
    data() {
        return {
            list: [],
            queryParams: {
                pageNum: 1,
                pageSize: 100,
                orderByColumn: "totalAmount",
                isAsc: "desc",
                payDateStart: null,
                payDateEnd: null
            },
            loading: false,
        }
    },
    computed: {
        dateRange: {
            get() {
                if (!this.queryParams.payDateStart || !this.queryParams.payDateEnd) {
                    return [];
                }
                return [this.queryParams.payDateStart, this.queryParams.payDateEnd];
            },
            set(val) {
                this.queryParams.payDateStart = val[0];
                this.queryParams.payDateEnd = val[0];
            }
        }
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            getBonusGroupByMch(this.queryParams).then(res => {
                this.list = res.rows;
            }).finally(() => {
                this.loading = false;
            })
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.handleQuery();
        }
    }
}
</script>

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