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

            <el-table v-loading="loading" :data="list">
                <el-table-column prop="uid" label="UID" width="72" />
                <el-table-column prop="nickname" label="昵称" min-width="140" show-overflow-tooltip />
                <!-- <el-table-column prop="openid" label="OpenID" min-width="200" show-overflow-tooltip /> -->
                <el-table-column label="手机号" width="120">
                    <template #default="{ row }">
                        {{ row.phone ?? "-" }}
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="等级" min-width="140" ><template #default="{ row }">
                        {{ row.level?.name ?? "-" }}
                    </template>
                </el-table-column>

                <el-table-column prop="brokerage_price" label="佣金余额" width="100" align="right" />
                <el-table-column label="剪辑师" width="88" align="center">
                    <template #default="{ row }">
                        <el-tag :type="row.is_cutter ? 'success' : 'info'" size="small">
                            {{ row.is_cutter ? "是" : "否" }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                    <template #default="{ row }">
                        <el-switch
                            :model-value="Number(row.status)"
                            :active-value="1"
                            :inactive-value="0"
                            inline-prompt
                            active-text="正常"
                            inactive-text="禁用"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="(val) => changeStatus(row, val)"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="login_ip" label="登录IP" width="130" show-overflow-tooltip />
                <el-table-column prop="login_at" label="最后登录" min-width="160" show-overflow-tooltip />
                <el-table-column prop="created_at" label="注册时间" min-width="160" show-overflow-tooltip />
                <el-table-column prop="updated_at" label="更新时间" min-width="160" show-overflow-tooltip />
            </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>
export default {
    name: "UserList",
    data() {
        return {
            loading: false,
            list: [],
            total: 0,
            query: { page: 1, limit: 10 }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        userPk(row) {
            return row.uid ?? row.id;
        },
        async getList() {
            this.loading = true;
            try {
                const res = await this.$API.user.list.get(this.query);
                if (res.code !== 1) {
                    this.$message.error(res.msg || "获取用户列表失败");
                    return;
                }
                const data = res.data || {};
                this.list = data.list || data.data || [];
                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();
        },
        async changeStatus(row, status) {
            const id = this.userPk(row);
            if (id == null) {
                this.$message.error("缺少用户标识");
                return;
            }
            const res = await this.$API.user.setStatus.get(id, status);
            if (res.code !== 1) {
                this.$message.error(res.msg || "状态更新失败");
                this.getList();
                return;
            }
            this.$message.success(res.msg || "状态更新成功");
            row.status = status;
        }
    }
};
</script>

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