<template>
  <div class="study-list">
    <el-card>
      <div class="header">
        <h3>项目列表</h3>
      </div>
      <el-table :data="studies" style="width: 100%" v-loading="loading">
        <el-table-column prop="code" label="项目编号" width="160" />
        <el-table-column prop="name" label="项目名称" />
        <el-table-column prop="status" label="状态" width="120" />
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button type="primary" size="small" @click="enterStudy(scope.row)">进入项目</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { fetchStudies } from "../api/studies";
import { useStudyStore } from "../store/study";
import type { Study } from "../types/api";

const studies = ref<Study[]>([]);
const loading = ref(false);
const router = useRouter();
const studyStore = useStudyStore();

const loadStudies = async () => {
  loading.value = true;
  try {
    const { data } = await fetchStudies();
    studies.value = data.items;
  } finally {
    loading.value = false;
  }
};

const enterStudy = (study: Study) => {
  studyStore.setCurrentStudy(study);
  router.push("/study/home");
};

onMounted(() => {
  loadStudies();
});
</script>

<style scoped>
.study-list {
  padding: 16px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
</style>
