<template>
  <div class="case-library-root">
    <!-- 列表页 -->
    <CaseList 
      v-if="viewMode === 'list'"
      @add="handleAdd"
      @edit="handleEdit"
      @view="handleView"
    />

    <!-- 详情页 -->
    <CaseDetail
      v-else-if="viewMode === 'detail'"
      :case-data="currentCase"
      @back="viewMode = 'list'"
      @upload-files="handleUploadFiles"
    />

    <!-- 表单弹窗 -->
    <CaseForm
      v-model="formVisible"
      :initial-data="currentCase"
      @submit="handleFormSubmit"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import CaseList from '@/components/CaseLibrary/CaseList.vue';
import CaseForm from '@/components/CaseLibrary/CaseForm.vue';
import CaseDetail from '@/components/CaseLibrary/CaseDetail.vue';

const props = defineProps<{
  currentTab?: string;
}>();

const viewMode = ref<'list' | 'detail'>('list');
const formVisible = ref(false);
const currentCase = ref<any>(null);

const emit = defineEmits(['upload-files']);

const handleUploadFiles = (files: File[]) => {
  emit('upload-files', files);
};

const handleAdd = () => {
  currentCase.value = null;
  formVisible.value = true;
};

const handleEdit = (row: any) => {
  currentCase.value = { ...row };
  formVisible.value = true;
};

const handleView = (row: any) => {
  currentCase.value = { ...row };
  viewMode.value = 'detail';
};

const handleFormSubmit = (data: any) => {
  console.log('Form submitted:', data);
  // 这里应该调用 API 刷新列表
};
</script>

<style scoped lang="scss">
.case-library-root {
  height: 100%;
  width: 100%;
  background: var(--color-bg);
  padding: 0;
  overflow: hidden;
}

:deep(.case-list-container) {
  padding: 20px;
}
</style>