<template>
  <div class="page">
    <el-card class="mb-12">
      <div class="actions">
        <h3>伦理与启动管理</h3>
        <PermissionAction action="milestone.create">
          <el-button type="primary" @click="openCreate">新建节点</el-button>
        </PermissionAction>
      </div>
    </el-card>

    <el-card>
      <el-table :data="milestones" v-loading="loading" style="width: 100%">
        <el-table-column prop="name" label="名称" />
        <el-table-column label="类型" width="160">
          <template #default="scope">
            {{ typeLabel(scope.row.type) }}
          </template>
        </el-table-column>
        <el-table-column prop="planned_date" label="计划日期" width="140" />
        <el-table-column prop="actual_date" label="实际日期" width="140" />
        <el-table-column label="状态" width="140">
          <template #default="scope">
            {{ statusLabel(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column prop="owner_id" label="负责人" width="160" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <PermissionAction action="milestone.create">
              <el-button type="primary" link size="small" @click="openEdit(scope.row)">编辑</el-button>
            </PermissionAction>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <MilestoneForm v-model="showForm" :milestone="editingMilestone" @success="loadMilestones" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage } from "element-plus";
import { fetchMilestones } from "../api/milestones";
import { useStudyStore } from "../store/study";
import PermissionAction from "../components/PermissionAction.vue";
import { usePermission } from "../utils/permission";
import MilestoneForm from "../components/MilestoneForm.vue";

const study = useStudyStore();
const { can } = usePermission();

const milestones = ref<any[]>([]);
const loading = ref(false);
const showForm = ref(false);
const editingMilestone = ref<any | null>(null);

const loadMilestones = async () => {
  if (!study.currentStudy) return;
  loading.value = true;
  try {
    const { data } = await fetchMilestones(study.currentStudy.id);
    milestones.value = data.items || data;
  } catch (e: any) {
    ElMessage.error(e?.response?.data?.message || "里程碑加载失败");
  } finally {
    loading.value = false;
  }
};

const openCreate = () => {
  editingMilestone.value = null;
  showForm.value = true;
};

const openEdit = (row: any) => {
  editingMilestone.value = row;
  showForm.value = true;
};

onMounted(() => {
  loadMilestones();
});

const typeLabel = (v: string) =>
  ({
    ETHICS_SUBMISSION: "伦理递交",
    ETHICS_APPROVAL: "伦理批件",
    SIV: "启动会",
    FPI: "首例入组",
    LPI: "末例入组",
    DBL: "揭盲",
    CSR: "总结报告",
  }[v] || v);

const statusLabel = (v: string) =>
  ({
    NOT_STARTED: "未开始",
    IN_PROGRESS: "进行中",
    DONE: "已完成",
    BLOCKED: "阻塞",
  }[v] || v);
</script>

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