<template>
  <div class="basic-info-page">
    <div v-if="projectData" class="info-container">
      <!-- 基本信息卡片 -->
      <el-card shadow="hover" class="info-card">
        <template #header>
          <div class="card-header">
            <span class="header-title">{{ t('project.management.form.sectionBasic') }}</span>
          </div>
        </template>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.code') }}</label>
              <div class="info-value">{{ projectData.code || '-' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.name') }}</label>
              <div class="info-value">{{ projectData.name || '-' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.language') }}</label>
              <div class="info-value">
                <dict-tag :options="project_language" :value="projectData.language" />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.type') }}</label>
              <div class="info-value">
                <dict-tag :options="project_type" :value="projectData.type" />
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.status') }}</label>
              <div class="info-value">{{ projectData.status || '-' }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 负责人信息卡片 -->
      <el-card shadow="hover" class="info-card">
        <template #header>
          <div class="card-header">
            <span class="header-title">{{ t('project.management.form.sectionResponsible') }}</span>
          </div>
        </template>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.pdGpd') }}</label>
              <div class="info-value">{{ projectData.pdGpd || '-' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.pmGpm') }}</label>
              <div class="info-value">{{ projectData.pmGpm || '-' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.ctaGcta') }}</label>
              <div class="info-value">{{ projectData.ctaGcta || '-' }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 合作方信息卡片 -->
      <el-card shadow="hover" class="info-card">
        <template #header>
          <div class="card-header">
            <span class="header-title">{{ t('project.management.form.sectionPartner') }}</span>
          </div>
        </template>
        <el-row :gutter="24">
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.sponsor') }}</label>
              <div class="info-value">{{ projectData.sponsor || '-' }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.cro') }}</label>
              <div class="info-value">{{ projectData.cro || '-' }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 时间信息卡片 -->
      <el-card shadow="hover" class="info-card">
        <template #header>
          <div class="card-header">
            <span class="header-title">{{ t('project.management.detail.content.timeInfo') }}</span>
          </div>
        </template>
        
        <!-- 项目时间线进度条 -->
        <div class="timeline-section">
          <div class="timeline-header">
            <div class="timeline-label">
              <span class="label-text">{{ t('project.management.table.startTime') }}</span>
              <span class="time-value">{{ parseTime(projectData.startTime, '{y}-{m}-{d}') || '-' }}</span>
            </div>
            <div class="timeline-label">
              <span class="label-text">{{ t('project.management.table.endTime') }}</span>
              <span class="time-value">{{ parseTime(projectData.endTime, '{y}-{m}-{d}') || '-' }}</span>
            </div>
          </div>
          
          <!-- 进度条 -->
          <div class="progress-container">
            <el-progress 
              :percentage="projectProgress" 
              :color="progressColor"
              :stroke-width="12"
              :show-text="false"
            />
          </div>
        </div>

        <!-- 创建和更新时间 -->
        <el-divider style="margin: 20px 0" />
        <el-row :gutter="24">
          <el-col :span="12">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.createTime') }}</label>
              <div class="info-value text-secondary">{{ parseTime(projectData.createTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-item">
              <label class="info-label">{{ t('project.management.table.updateTime') }}</label>
              <div class="info-value text-secondary">{{ parseTime(projectData.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') || '-' }}</div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <!-- 备注信息 -->
      <el-card shadow="hover" class="info-card" v-if="projectData.note">
        <template #header>
          <div class="card-header">
            <span class="header-title">{{ t('project.management.table.note') }}</span>
          </div>
        </template>
        <div class="note-content">{{ projectData.note }}</div>
      </el-card>
    </div>

    <el-empty v-else description="暂无数据" class="empty-container" />
  </div>
</template>

<script setup lang="ts">
import { inject, computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { ManagementVO } from '@/api/project/management/types';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { t } = useI18n();
const { project_type, project_language } = toRefs<any>(proxy?.useDict('project_type', 'project_language'));

// 接收从父组件传递的项目数据
const projectData = inject<any>('projectData');

// 计算项目进度
const projectProgress = computed(() => {
  if (!projectData?.value?.startTime || !projectData?.value?.endTime) {
    return 0;
  }
  
  const start = new Date(projectData.value.startTime).getTime();
  const end = new Date(projectData.value.endTime).getTime();
  const now = Date.now();
  
  if (now < start) {
    return 0; // 项目未开始
  }
  
  if (now > end) {
    return 100; // 项目已结束
  }
  
  const total = end - start;
  const elapsed = now - start;
  const progress = (elapsed / total) * 100;
  
  return Math.min(Math.max(Math.round(progress), 0), 100);
});

// 进度条颜色
const progressColor = computed(() => {
  const progress = projectProgress.value;
  if (progress >= 100) {
    return '#909399'; // 灰色 - 已完成
  } else if (progress >= 75) {
    return '#F56C6C'; // 红色 - 即将结束
  } else if (progress >= 50) {
    return '#E6A23C'; // 橙色 - 进行中后期
  } else if (progress >= 25) {
    return '#409EFF'; // 蓝色 - 进行中
  } else {
    return '#67C23A'; // 绿色 - 刚开始
  }
});

</script>

<style scoped>
.basic-info-page {
  height: 100%;
  overflow-y: auto;
}

.info-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 卡片样式 */
.info-card {
  border-radius: 8px;
  transition: all 0.3s ease;
}

.info-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.info-card :deep(.el-card__header) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 16px 20px;
  border-bottom: none;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header-title {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.info-card :deep(.el-card__body) {
  padding: 24px;
}

/* 信息项样式 */
.info-item {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.info-label {
  display: block;
  font-size: 13px;
  color: #909399;
  margin-bottom: 8px;
  font-weight: 500;
}

.info-value {
  font-size: 15px;
  color: #303133;
  font-weight: 500;
  word-break: break-all;
}

.text-secondary {
  color: #909399;
  font-size: 14px;
  font-weight: normal;
}

/* 备注内容 */
.note-content {
  padding: 16px;
  background-color: #f9fafb;
  border-radius: 6px;
  border-left: 4px solid #667eea;
  line-height: 1.8;
  color: #606266;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 空状态 */
.empty-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

/* 滚动条美化 */
.basic-info-page::-webkit-scrollbar {
  width: 6px;
}

.basic-info-page::-webkit-scrollbar-thumb {
  background-color: rgba(144, 147, 153, 0.3);
  border-radius: 3px;
}

.basic-info-page::-webkit-scrollbar-thumb:hover {
  background-color: rgba(144, 147, 153, 0.5);
}

/* 时间线进度条样式 */
.timeline-section {
  margin-bottom: 10px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.timeline-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.label-text {
  font-size: 13px;
  color: #909399;
  font-weight: 500;
}

.time-value {
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.progress-container {
  position: relative;
}

.progress-container :deep(.el-progress__text) {
  display: none;
}

.progress-container :deep(.el-progress-bar__outer) {
  border-radius: 6px;
  background-color: #f0f0f0;
}

.progress-container :deep(.el-progress-bar__inner) {
  border-radius: 6px;
  transition: all 0.6s ease;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .info-card :deep(.el-card__body) {
    padding: 16px;
  }
  
  .info-item {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }
  
  .timeline-header {
    flex-direction: column;
    gap: 12px;
  }
  
  .time-value {
    font-size: 14px;
  }
}
</style>
