<template>
    <div class="app-container">
        <!-- <h2>钱包汇总</h2> -->
        <div class="main">
            <div class="left"></div>
            <div class="right"></div>
        </div>
         <h2>营收总报</h2>
        <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            inline
            label-width="68px"
        >
            <el-form-item label="日期" prop="tradeDate">
                <el-date-picker
                    v-model="createTimeRange"
                    style="width: 240px"
                    value-format="yyyy-MM-dd"
                    :default-time="['00:00:00', '23:59:59']"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :clearable="false"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="handleQuery"
                    >搜索</el-button
                >
            </el-form-item>
        </el-form>
         <el-table
                :data="merchantOrderList"
                stripe
                border
                style="width: 100%">
                <el-table-column
                    prop="orderCode"
                    label="订单号"
                    align="center"
                />
                <el-table-column
                    prop="transactionCode"
                    label="交易流水号"
                    align="center"
                    width="300"
                />
                <el-table-column
                    prop="orderStatus"
                    label="订单状态"
                    align="center"
                    width="130"
                >
                    <template slot-scope="scope">
                        <dict-tag
                            :options="dict.type.order_status"
                            :value="scope.row.orderStatus"
                        />
                    </template>
                </el-table-column>
                <el-table-column
                    prop="stationName"
                    label="站点名称"
                    align="center"
                    width="130"
                />
                <el-table-column
                    prop="orderSource"
                    label="订单来源"
                    align="center"
                />
                <el-table-column
                    prop="orderAmount"
                    label="订单金额"
                    align="center"
                />
                <el-table-column
                    prop="orderSettleTime"
                    label="订单结算时间"
                    align="center"
                />
            </el-table>
            <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getOrderList"
            />
    </div>

</template>


<script>
import {getMerchantOrderReport} from "@/api/adapayMember/adapayMember";
import Template from "@/views/billing/template";
import {getMerchantOrderList} from "@/api/order/order";
import { getDay } from "@/utils/common";
export default {
    dicts: ["order_status"],
    components: {Template},
    data() {
        return {
            buttonBoolean: false,
            createTimeRange: [],
            reportList: [],
            merchantOrderReport: {},
            merchantOrderList: [],
            total: 0,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                merchantId: this.$route.query.merchantId,
                startTime: '',
                endTime: '',
                orderCode: null,
                transactionCode: null,
                mobileNumber: null,
                orderStatus: null,
                stationId: null,
            },
        };
    },
    async created() {
         await this.defaultDate()
        this.getList();
        this.getOrderList();
    },
    methods: {
        getList() {
            console.log('queryParams', this.queryParams)
            getMerchantOrderReport(this.queryParams).then(
                (response) => {
                    // console.log("查询报表", reportList, merchantOrderReport);
                    console.log('getMerchantOrderReport', response)
                    if (response.data) {
                        this.reportList = response.data.pageResponse.list;
                        this.merchantOrderReport = response.data.merchantOrderReport;
                        this.total = response.data.pageResponse.total
                    } else {
                        this.reportList = []
                        this.merchantOrderReport = null
                    }
                }
            );
        },

        getOrderList() {
            const param = {
                merchantId: this.merchantId,
                startTime: "2023-01-01",
                 pageNum: this.queryParams.pageNum,
                pageSize: this.queryParams.pageSize,
            }
            console.log("param", param)
            getMerchantOrderList(this.queryParams).then((response) => {
                console.log("getMerchantOrderList", response)
                this.merchantOrderList = response.rows;
                this.total = response.total;
            })
        },
         handleQuery() {
            let arr = this.createTimeRange[0]
            let str = this.createTimeRange[1]
            this.queryParams.startTime = arr
            this.queryParams.endTime = str
            this.queryParams.pageNum = 1;
            this.getList();
            this.getOrderList();
        },
        defaultDate() {
            //字符串拼接，开始时间，结束时间
            let beg = getDay(-7); //当月第一天
            let end = getDay(0); //当天
            this.createTimeRange = [beg, end]; //将值设置给插件绑定的数据
            // return this.createTimeRange;
            this.queryParams.startTime = beg
            this.queryParams.endTime = end
        },

    }
}
</script>

<style lang="scss" scoped>
.main{

    .left{

    }
    .right{

    }
}
</style>
