<script setup lang="ts">
const { data, pending, error, refresh } = await useHttpFetch('/api/hello')

const userCount = computed(() => data.value?.users?.length ?? 0)
</script>

<template>

    <h1>Person Panel</h1>
    <UAlert title="Heads up!" />

    <p v-if="pending">加载中...</p>

    <div v-else-if="error">
        <p>接口请求失败：{{ error.message }}</p>
        <button type="button" @click="refresh()">重试</button>
    </div>

    <section v-else>
        <p>hello: {{ data?.hello }}</p>
        <p>users count: {{ userCount }}</p>
        <button type="button" @click="refresh()">刷新数据</button>
        <div v-if="Array.isArray(data?.users)">
            <ul>
                <li v-for="user in data.users" :key="user.id">
                    <span v-if="user.name">姓名：{{ user.name }}</span>
                    <span v-if="user.email" style="margin-left: 1em;">邮箱：{{ user.email }}</span>
                    <span v-if="user.age !== undefined" style="margin-left: 1em;">年龄：{{ user.age }}</span>
                </li>
            </ul>
        </div>
        <div v-else>
            <p>暂无用户信息</p>
        </div>
    </section>
</template>