<template>
  <div class="center-info-page">
    <h3>{{ t('project.management.detail.menu.centerInfo') }}</h3>
    <el-divider />
    <div class="info-section">
      <p><strong>{{ t('project.management.detail.content.projectId') }}:</strong> {{ projectId }}</p>
      <p class="info-tip">{{ t('project.management.detail.content.centerInfoTip') }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { inject } from 'vue';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

// 接收从父组件传递的项目ID
const projectId = inject<any>('projectId');
</script>

<style scoped>
.center-info-page {
  height: 100%;
}

.info-section {
  padding: 16px 0;
}

.info-section p {
  line-height: 2;
  font-size: 14px;
  color: #606266;
  margin: 8px 0;
}

.info-section strong {
  color: #303133;
  margin-right: 8px;
}

h3 {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0;
}

.info-tip {
  color: #909399;
  font-style: italic;
  margin-top: 16px;
}
</style>
