<template>
    <div class="app-container">
        <el-card class="box-card">
            <el-form ref="queryFormRef" :model="queryParams" :inline="true">
                <el-form-item label="关键词" prop="keyword">
                    <el-input v-model="queryParams.keyword" placeholder="用户名/昵称" clearable style="width: 200px"
                        @keyup.enter="loadList" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" :icon="Search" @click="loadList">搜索</el-button>
                    <el-button :icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <el-table v-loading="loading" :data="userList" border stripe style="width: 100%">
                <el-table-column prop="username" label="用户名/昵称" align="center">
                    <template #default="{ row }">
                        {{ row.username || row.nickname }}
                    </template>
                </el-table-column>
                <el-table-column prop="mobile" label="手机号" align="center">
                    <template #default="{ row }">{{ row.mobile || '--' }}</template>
                </el-table-column>
                <!-- <el-table-column prop="district" label="地区" align="center" /> -->
                <el-table-column prop="gender_text" label="性别" align="center">
                    <template #default="{ row }">{{ row.gender_text || '--' }}</template>
                </el-table-column>
                <el-table-column prop="birthday_text" label="年龄" align="center">
                    <template #default="{ row }">{{ row.birthday_text || '--' }}</template>
                </el-table-column>
                <el-table-column prop="created_at" label="创建时间" align="center">
                    <template #default="{ row }">{{ row.created_at || '--' }}</template>
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center">
                    <template #default="{ row }">
                        <el-tag>{{ statusData[row.state] }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="detection_number" label="总检测次数" align="center">
                    <template #default="{ row }">{{ row.detection_number || '--' }}</template>
                </el-table-column>
            </el-table>

            <pagination :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.size"
                @pagination="loadList" />
        </el-card>
    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
import { getUserDetectionList } from '@/api/user';
import { ElMessage } from 'element-plus';
import { getAreaList } from '@/api/area'
import { Search, Refresh } from '@element-plus/icons-vue';

const statusData: Record<number, string> = {
    1: '检测过一次',
    2: '分析中',
    3: '有问题',
    4: '已退款',
    5: '正常',
};
const getaddress = async () => {
    const res = await getAreaList();
    console.log(res, 'res')
}
getaddress()
const loading = ref(false);
const total = ref(0);
const userList = ref<any[]>([]);
const queryFormRef = ref();
const queryParams = reactive({
    page: 1,
    size: 10,
    keyword: '',
});

function normalizePageData(data: any): { list: any[]; total: number } {
    if (Array.isArray(data)) return { list: data, total: data.length };
    const list = data?.list ?? data?.data ?? [];
    const total = Number(data?.total);
    return { list, total: Number.isFinite(total) ? total : list.length };
}

// 加载列表
const loadList = () => {
    loading.value = true;
    getUserDetectionList(queryParams)
        .then(({ data }) => {
            const { list, total: t } = normalizePageData(data);
            userList.value = list;
            total.value = t;
        })
        .catch((err: any) => ElMessage.error(err.message || '获取用户列表失败'))
        .finally(() => (loading.value = false));
};

// 重置
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.page = 1;
    loadList();
};

loadList();
</script>

<style lang="scss" scoped>
.app-container {
    padding: 20px;
}
</style>
