<template>
  <view class="circles">
    <view class="circle-list">
      <view class="circle-card" v-for="item in list" :key="item.id" @tap="goDetail(item.id)">
        <text class="circle-name">#{{ item.name }}</text>
        <text class="circle-desc">{{ item.description }}</text>
        <view class="circle-meta">
          <text class="circle-count">{{ item._count?.members || 0 }} 人加入</text>
          <text class="circle-tags">{{ item.tags }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { api } from '../../api/index'

const list = ref<any[]>([])

onMounted(async () => {
  try {
    const res: any = await api.circles.list({ pageSize: 20 })
    list.value = res.items || []
  } catch (e) { console.error(e) }
})

const goDetail = (id: number) => uni.navigateTo({ url: `/pages/circle-detail/index?id=${id}` })
</script>

<style scoped>
.circles { padding: 30rpx; }
.circle-card {
  background: var(--card); border-radius: 16rpx; padding: 28rpx; margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.circle-name { font-size: 32rpx; font-weight: bold; color: var(--brand); display: block; }
.circle-desc { font-size: 26rpx; color: var(--muted-foreground); margin-top: 12rpx; display: block; }
.circle-meta { display: flex; justify-content: space-between; margin-top: 16rpx; }
.circle-count { font-size: 22rpx; color: var(--muted-foreground); }
.circle-tags { font-size: 22rpx; color: var(--brand); }
</style>
