<template>
  <div class="workspace-list">
    <el-card>
      <template #header>
        <span>工作空间管理</span>
      </template>
      <el-table :data="list" v-loading="loading" stripe>
        <el-table-column label="ID" width="200">
          <template #default="{ row }">{{ row._id || row.id }}</template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="user_id" label="用户ID" width="200" />
        <el-table-column prop="created_at" label="创建时间" width="180" />
      </el-table>
      <el-pagination
        v-model:current-page="page"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[10, 20, 50]"
        layout="total, sizes, prev, pager, next"
        @current-change="fetchList"
        @size-change="fetchList"
        style="margin-top: 16px"
      />
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getWorkspaces } from '../../api/admin'

const list = ref([])
const loading = ref(false)
const page = ref(1)
const pageSize = ref(20)
const total = ref(0)

const fetchList = async () => {
  loading.value = true
  try {
    const res = await getWorkspaces({ page: page.value, page_size: pageSize.value })
    list.value = res.list || []
    total.value = res.total || 0
  } catch (e) {
    ElMessage.error(e.message)
  } finally {
    loading.value = false
  }
}

onMounted(fetchList)
</script>
