<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" :size="ELsize"
            label-width="auto">
            <el-form-item label="会员账号" prop="mobile">
                <el-input v-model="queryParams.mobile" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>

            <el-form-item label="会员昵称" prop="nickname">
                <el-input v-model="queryParams.nickname" placeholder="请输入" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <!-- <el-form-item label="所属店铺" prop="businessName">
                <el-input v-model="queryParams.businessName" placeholder="请输入" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item> -->
            <el-form-item label="注册时间" prop="createTime">
                <el-date-picker v-model="queryParams.createTime" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>


            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <div class="table-top-statistics">
                <template v-for="item in statisticsList">
                    <span :class="['table-top-type', ELsize]">
                        {{ item.label }}：<span class="table-top-num">{{ StatisticsData[item.field] || 0 }}</span>
                    </span>
                </template>
            </div>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="handleRefreshPage" />
        </el-row>
        <el-table v-loading="loading" :border="TableBorder" :size="ELTableSize" :data="dataList">
            <el-table-column type="index" width="55" label="序号" align="center">
                <template slot-scope="{$index}">
                    {{ $getTableIndex(queryParams, $index + 1) }}
                </template>
            </el-table-column>
            <template v-for="item in TableColumn">
                <el-table-column :label="item.label" :align="item.align || 'center'">
                    <template slot-scope="{row}">
                        {{ (item.formatter ? item.formatter(row) : row[item.prop]) | TableItemEmpty }}
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>
<script>
import getListApi from "@/mixins/getListApi";
import { getBusinessPageApi, getBusinessStatisticsApi } from "@/api/user.js"
export default {
    mixins: [getListApi],
    data() {
        return {
            listURL: getBusinessPageApi,
            queryParams: {
                mobile: undefined,
                nickname: undefined,
                businessName: undefined,
                createTime: undefined
            },
            // 日期范围字段映射配置
            dateRangeMapping: {
                // 日期范围字段名: { start: 开始时间字段名, end: 结束时间字段名 }
                createTime: { start: 'createDayStart', end: 'createDayEnd' }
            },
            TableColumn: [
                {
                    label: '会员账号',
                    prop: 'mobile'
                },
                {
                    label: '会员昵称',
                    prop: 'nickname'
                },
                {
                    label: '商城消费金额',
                    prop: 'shopConsume'
                },
                {
                    label: '可用余额',
                    prop: 'balance'
                },
                {
                    label: '到店扫码消费',
                    prop: 'lineConsume'
                },
                {
                    label: '应补贴金额',
                    prop: 'shouldSubsidyMoney'
                },
                {
                    label: '剩余排队金额',
                    prop: 'surplusQueueMoney'
                },
                {
                    label: '已补贴金额',
                    prop: 'alreadySubsidyMoney'
                },
                {
                    label: '可用积分',
                    prop: 'availablePoint'
                },
                {
                    label: '注册时间',
                    prop: 'createTime'
                }
            ],


            StatisticsData: {},
            statisticsList: [
                {
                    label: '累计商城消费金额',
                    field: 'shopConsume'
                },
                {
                    label: '累计可用余额',
                    field: 'availableBalance'
                },
                {
                    label: '累计扫码消费',
                    field: 'lineConsume'
                },
                {
                    label: '剩余排队金额',
                    field: 'surplusQueueMoney'
                },
                {
                    label: '累计补贴金额',
                    field: 'alreadySubsidyMoney'
                },
                {
                    label: '累计可用积分',
                    field: 'availablePoint'
                }],
        };
    },
    methods: {
        handleRefreshPage() {
            this.getStatistics();
            this.getList();
        },
        // 获取补贴队列业务统计
        async getStatistics() {
            try {
                // 处理日期范围参数
                const Params = this.processDateRangeParams({
                    ...this.queryParams,
                    ...this.search,
                });
                Params.pageNum && delete Params.pageNum;
                Params.pageSize && delete Params.pageSize;
                const { data } = await getBusinessStatisticsApi(Params);
                this.StatisticsData = data || {};
            } catch (error) {
                this.StatisticsData = {};
            }
        },
        getAreaName(row) {
            try {
                return `${row.provinceName || ''}${row.cityName || ''}${row.areaName || ''}`;
            } catch (error) {
                return ''
            }
        },
        getStatisticsVal(row, field) {
            try {
                const { statisticsData = {} } = row || {};
                return statisticsData?.[field] || 0;
            } catch (error) {
                return 0;
            }
        },
    },
};
</script>
<style scoped lang="scss">
.table-p {
    margin: 0;
    width: 100%;
}
</style>
