<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="id"
                label="用户ID"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="username"
                label="用户名"
                align="center"
                width="200"
            ></el-table-column>
            <el-table-column
                prop="thawedBalance"
                label="已解锁体验金"
                align="center"
                width="120"
                ><template #default="scope">
                    {{ truncation(scope.row.thawedBalance) }}
                </template></el-table-column
            >
            <el-table-column
                prop="totalBalance"
                label="已获得体验金"
                align="center"
                width="120"
                ><template #default="scope">
                    <div @click="goDetail(scope.row, 1)" style="color: #2d8cf0">
                        {{ truncation(scope.row.totalBalance) }}
                    </div>
                </template></el-table-column
            >
            <el-table-column
                prop="balance"
                label="可用体验金余额"
                align="center"
                width="120"
                ><template #default="scope">
                    {{ truncation(scope.row.balance) }}
                </template></el-table-column
            >
            <el-table-column
                prop="numberOfInvitee"
                label="推荐总人数"
                align="center"
                width="100"
            ></el-table-column>
            <el-table-column
                prop="numberOfMissionA"
                label="任务A人数"
                align="center"
                width="100"
            >
                <template #default="scope">
                    <div @click="goDetail(scope.row, 2)" style="color: #2d8cf0">
                        {{ scope.row.numberOfMissionA }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                prop="numberOfMissionB"
                label="任务B人数"
                align="center"
                width="100"
            >
                <template #default="scope">
                    <div @click="goDetail(scope.row, 2)" style="color: #2d8cf0">
                        {{ scope.row.numberOfMissionB }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="signin" label="今日签到" align="center"
                ><template #default="scope">
                    {{ scope.row.signin ? "是" : "否" }}
                </template></el-table-column
            >
            <el-table-column
                prop="signCount"
                label="已签到天数"
                align="center"
                width="100"
            ></el-table-column>
            <el-table-column
                prop="numberOfTodaySign"
                label="今日签到人数"
                align="center"
                width="120"
            ></el-table-column>
            <el-table-column
                prop="numberOfCompletedSign"
                label="满30天签到人数"
                align="center"
                width="120"
            ></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"
        />
        <el-dialog
            v-model="state.status"
            :title="state.status == 1 ? '余额变动明细' : '任务列表'"
            width="50%"
            align-center
            destroy-on-close
        >
            <ExperienceWalletEvents
                :memberId="state.memberId"
                :status="state.status"
            />
        </el-dialog>
    </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 from "./components/experienceWalletEvents.vue";
import { experienceWallet } from "@/api/activity";
import { truncation, timestampToTime } from "@/utils/filter";
const state = reactive({
    list: [],
    queryParams: {
        pageNo: 1,
        pageSize: 15,
        memberId: "",
        account: "",
    },
    walletList: [],
    loading: true,
    total: 0,
    status: 0 as any,
    memberId: "",
});
const queryFormRef = ref(ElForm);
const { queryParams } = toRefs(state);
const handleQuery = () => {
    experienceWallet(state.queryParams).then((res: any) => {
        if (res.code == 0) {
            state.walletList = res.data.content;
            state.total = res.data.totalElements;
            state.loading = false;
        }
    });
};
onMounted(() => {
    handleQuery();
});
const goDetail = (item: any, index: number) => {
    state.status = index;
    state.memberId = item.id;
};

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

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