<template>
    <div class="app-container">
        <el-row>
            <el-col :span="22">
                <!-- 搜索表单 -->
                <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                    <el-form-item prop="account">
                        <el-tooltip
                            content="请输入用户ID搜索"
                            placement="bottom"
                            effect="light"
                        >
                            <el-input
                                v-model="queryParams.account"
                                placeholder="请输入用户ID搜索"
                                style="width: 260px"
                                clearable
                                @keyup.enter="handleQuery"
                            />
                        </el-tooltip>
                    </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-col>
        </el-row>
        <el-table
            :data="state.walletList"
            highlight-current-row
            border
            v-loading="state.loading"
        >
            <el-table-column
                prop="sourceMemberId"
                label="用户ID"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="sourceUserName"
                label="用户名"
                align="center"
                v-if="props.status == 1"
            ></el-table-column>
            <el-table-column
                prop="maxRecharge"
                label="单笔最高充值"
                align="center"
                v-if="props.status == 2"
                ><template #default="scope">
                    {{ truncation(scope.row.maxRecharge) }}
                </template></el-table-column
            >
            <el-table-column
                prop="orderCount"
                label="交易笔数"
                align="center"
                v-if="props.status == 2"
                ><template #default="scope">
                    {{ scope.row.orderCount }}
                </template></el-table-column
            >
            <el-table-column
                prop="type"
                label="任务进度"
                align="center"
                v-if="props.status == 2"
                ><template #default="scope">
                    {{
                        scope.row.type == 0
                            ? "失效"
                            : scope.row.type == 1
                            ? "A选择"
                            : scope.row.type == 2
                            ? "B选择"
                            : scope.row.type == 3
                            ? "A选中"
                            : scope.row.type == 4
                            ? "B选中"
                            : scope.row.type == 5
                            ? "A完成"
                            : "B完成"
                    }}
                </template></el-table-column
            >
            <el-table-column
                prop="amount"
                label="获取体验金"
                align="center"
                width="120"
                v-if="props.status == 1"
                ><template #default="scope">
                    {{ truncation(scope.row.amount) }}
                </template></el-table-column
            >
            <el-table-column
                prop="sourceType"
                label="获取途径"
                align="center"
                width="120"
                v-if="props.status == 1"
                ><template #default="scope">
                    {{
                        scope.row.sourceType == 0
                            ? "注册"
                            : scope.row.sourceType == 1
                            ? "本人签到"
                            : scope.row.sourceType == 2
                            ? "下级签到"
                            : scope.row.sourceType == 3
                            ? "任务A"
                            : "任务B"
                    }}
                </template></el-table-column
            >
            <el-table-column
                prop="type"
                label="获取类型"
                align="center"
                width="120"
                v-if="props.status == 1"
                ><template #default="scope">
                    {{ scope.row.type == 0 ? "新增" : "解锁" }}
                </template></el-table-column
            >
            <el-table-column
                prop="createTime"
                label="获取时间"
                align="center"
                width="180"
                v-if="props.status == 1"
            ></el-table-column>
        </el-table>
        <pagination
            v-if="state.total > 0"
            :total="state.total"
            v-model:page="state.queryParams.pageNo"
            v-model:limit="state.queryParams.pageSize"
            @pagination="handleQuery"
        />
    </div>
</template>

<script lang="ts" setup>
import { reactive, onMounted, toRefs, ref } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import { ElMessage, ElForm } from "element-plus";

import {
    experienceWalletEvents,
    experienceWalletMissions,
} from "@/api/activity";
import { truncation, timestampToTime } from "@/utils/filter";
const props = defineProps({
    memberId: {
        required: true,
        type: String,
        default: "",
    },
    status: {
        required: true,
        type: Number,
        default: 0,
    },
});
const state = reactive({
    queryParams: {
        pageNo: 1,
        pageSize: 10,
        memberId: "",
        account: "",
    },
    walletList: [],
    loading: true,
    total: 0,
});
const queryFormRef = ref(ElForm);
const { queryParams } = toRefs(state);
const handleQuery = async () => {
    state.queryParams.memberId = props.memberId;
    let { data } =
        props.status == 1
            ? await experienceWalletEvents(state.queryParams)
            : await experienceWalletMissions(state.queryParams);
    console.log(data);
    state.walletList = data.content;
    state.total = data.totalElements;
    state.loading = false;
};
onMounted(() => {
    handleQuery();
});

const resetQuery = () => {
    queryFormRef.value.resetFields();
    handleQuery();
};
</script>

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