<template>
  <div class="simple-test">
    <h3>简单测试组件</h3>
    <p>数据状态: {{ data ? '已加载' : '未加载' }}</p>
    <p>错误: {{ error ? error.message : '无' }}</p>
    <p>加载中: {{ pending ? '是' : '否' }}</p>
    <div v-if="data" class="data-content">
      <h4>{{ data.title }}</h4>
      <p>{{ data.body }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useFetch } from '../compose/useFetch'

// 使用一个简单的 API 进行测试
const { data, error, pending } = useFetch(
  'https://jsonplaceholder.typicode.com/posts/1',
  {
    key: 'post-1',
    server: true,
    transform: (post: any) => ({
      id: post.id,
      title: post.title,
      body: post.body.substring(0, 100) + '...'
    })
  }
)
</script>

<style scoped>
.simple-test {
  background: #f9f9f9;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px 0;
}

.simple-test p {
  margin: 5px 0;
  font-size: 14px;
}
</style>
