<template>
    <div class="app-container">
        <!-- 搜索表单 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item prop="account">
                <el-input
                    v-model="queryParams.account"
                    placeholder="输入用户名、邮箱、手机号、姓名..."
                    style="width: 300px"
                    clearable
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
            <el-form-item prop="startStatTime">
                <el-date-picker
                    v-model="queryParams.startStatTime"
                    style="width: 210px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="开始日期"
                />
            </el-form-item>
            <el-form-item prop="endStatTime">
                <el-date-picker
                    v-model="queryParams.endStatTime"
                    style="width: 210px"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    type="datetime"
                    placeholder="结束日期"
                />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" :icon="Search" @click="handleQuery"
                    >搜索</el-button
                >
                <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格数据 -->
        <el-table
            ref="dataTableRef"
            v-loading="state.loading"
            :data="state.listdata"
            highlight-current-row
            border
            ><el-table-column type="index" width="50" align="center" />
            <el-table-column align="center" prop="memberId" label="ID" />
            <el-table-column
                align="center"
                prop="totalBalance"
                label="团队余额"
            />
            <el-table-column
                align="center"
                prop="totalCount"
                label="团队人数"
            />
            <el-table-column
                align="center"
                prop="totalRecharge"
                label="总入金"
            />
            <el-table-column
                align="center"
                prop="totalWithdraw"
                label="总出金"
                show-overflow-tooltip
            />
            <el-table-column
                align="center"
                prop="totalAward"
                label="总佣金"
                show-overflow-tooltip
            />
        </el-table>
        <!-- 分页器 -->
        <pagination
            v-if="total > 0"
            :total="total"
            v-model:page="queryParams.pageNo"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>
<script lang="ts">
name: "agent";
</script>
<script lang="ts" setup>
import { memberAgent } from "@/api/member/agent";
import { onMounted, reactive, toRef, ref, toRefs } from "vue";
import { AgentQueryParam, AgentItem } from "@/types/api/member/agent";
import { ElForm } from "element-plus";
import { Search, Refresh } from "@element-plus/icons-vue";

const state = reactive({
    loading: true,
    queryParams: {
        property: "",
        direction: "",
        pageNo: 1,
        pageSize: 15,
        account: "",
        startStatTime: null,
        endStatTime: null,
    } as AgentQueryParam,
    total: 0,
    listdata: [] as AgentItem[],
});
const queryFormRef = ref(ElForm);
const { queryParams, listdata, total } = toRefs(state);
// 数据请求
const handleQuery = () => {
    memberAgent(state.queryParams).then((res) => {
        state.total = res.data.totalElements;
        state.listdata = res.data.content;
        state.loading = false;
    });
};
// 搜索重置
const resetQuery = function () {
    queryFormRef.value.resetFields();
    handleQuery();
};

onMounted(() => {
    handleQuery();
});
</script>

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