<template>
  <div>
    <el-card shadow="never">
      <template #header>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold">文档管理 - 测试页面</span>
          <el-button type="primary" @click="handleBack">返回项目列表</el-button>
        </div>
      </template>

      <el-empty description="这是文档管理测试页面">
        <template #extra>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="项目ID">{{ projectId }}</el-descriptions-item>
            <el-descriptions-item label="页面状态">测试中</el-descriptions-item>
            <el-descriptions-item label="说明">
              这里将展示项目的文档管理功能
            </el-descriptions-item>
          </el-descriptions>
        </template>
      </el-empty>
    </el-card>
  </div>
</template>

<script setup lang="ts">
interface Props {
  projectId?: number | string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  back: [];
}>();

const handleBack = () => {
  emit('back');
};
</script>

<style scoped lang="scss">
.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}

.text-lg {
  font-size: 1.125rem;
}

.font-bold {
  font-weight: 700;
}
</style>
