<template>
    <el-main>
        <el-card shadow="never">
            <template #header>
                <span>用户提现</span>
            </template>

            <el-table v-loading="loading" :data="list">
                <el-table-column prop="id" label="ID" width="80" />
                <el-table-column label="用户" min-width="100" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ row.uid || row.user_id || "-" }}
                    </template>
                </el-table-column>
                <el-table-column label="提现金额" width="120">
                    <template #default="{ row }">
                        {{ row.extract_price ?? row.price ?? row.amount ?? "-" }}
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template #default="{ row }">
                        {{ formatStatus(row.status) }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" min-width="140" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ row.mark || row.remark || row.fail_msg || "-" }}
                    </template>
                </el-table-column>
                <el-table-column label="申请时间" min-width="160" show-overflow-tooltip>
                    <template #default="{ row }">
                        {{ formatTime(row.add_time || row.create_time || row.created_at) }}
                    </template>
                </el-table-column>
            </el-table>

            <div class="pager">
                <el-pagination
                    background
                    layout="total, prev, pager, next, sizes"
                    :total="total"
                    :current-page="query.page"
                    :page-size="query.limit"
                    :page-sizes="[5, 10, 20, 50]"
                    @current-change="handlePageChange"
                    @size-change="handleSizeChange"
                />
            </div>
        </el-card>
    </el-main>
</template>

<script>
const STATUS_MAP = {
    "-1": "已拒绝",
    0: "审核中",
    1: "已通过",
    2: "已打款"
};

export default {
    name: "ExtractList",
    data() {
        return {
            loading: false,
            list: [],
            total: 0,
            query: { page: 1, limit: 10 }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        formatStatus(status) {
            if (status == null || status === "") return "-";
            const key = String(status);
            return STATUS_MAP[key] ?? STATUS_MAP[status] ?? key;
        },
        formatTime(val) {
            if (val == null || val === "") return "-";
            const n = Number(val);
            if (!Number.isNaN(n) && String(val).length <= 12) {
                const ms = n < 1e12 ? n * 1000 : n;
                const d = new Date(ms);
                if (!Number.isNaN(d.getTime())) return d.toLocaleString();
            }
            return String(val);
        },
        async getList() {
            this.loading = true;
            try {
                const res = await this.$API.finance.extract.list.get(this.query);
                if (res.code !== 1) {
                    this.$message.error(res.msg || "获取提现列表失败");
                    return;
                }
                const data = res.data || {};
                this.list = data.data || data.list || [];
                this.total = Number(data.count || data.total || this.list.length || 0);
            } finally {
                this.loading = false;
            }
        },
        handlePageChange(page) {
            this.query.page = page;
            this.getList();
        },
        handleSizeChange(limit) {
            this.query.limit = limit;
            this.query.page = 1;
            this.getList();
        }
    }
};
</script>

<style scoped>
.pager {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}
</style>
