<template>
  <div class="project-info-dashboard creo-theme">
    <!-- 模型基础信息 -->
    <div class="project-header">
      <div class="project-title">
        <i class="fas fa-project-diagram"></i>
        <h3>{{ modelData.data?.fileName || '未知模型' }}</h3>
      </div>
      <div class="project-meta">
        <div class="meta-item">
          <i class="fas fa-cogs"></i>
          <span>软件: {{ modelData.data?.sourceSoftware || 'Creo Parametric' }}</span>
        </div>
        <div class="meta-item">
          <i class="fas fa-calendar"></i>
          <span>打开时间: {{ formatDate(modelData.data?.openTime) }}</span>
        </div>
        <div class="meta-item">
          <i class="fas fa-wifi"></i>
          <span class="status connected">
            状态: {{ modelData.data?.connectionStatus || '已连接' }}
          </span>
        </div>
        <div class="meta-item" v-if="modelData.data?.basicStats?.fileSize">
          <i class="fas fa-hdd"></i>
          <span>文件大小: {{ formattedFileSize }}</span>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="project-content">
      <!-- 左侧：模型统计信息 -->
      <div class="project-details">
        <!-- Creo模型统计 -->
        <div class="info-section">
          <h4><i class="fas fa-chart-bar"></i> 模型统计</h4>
          <div class="stats-grid">
            <div class="stat-item">
              <label>零件数量:</label>
              <span>{{ modelData.data?.partCount || 0 }}个</span>
            </div>
            <div class="stat-item">
              <label>装配层级:</label>
              <span>{{ modelData.data?.assemblyLevel || 0 }}级</span>
            </div>
            <div class="stat-item">
              <label>模型类型:</label>
              <span>{{ getModelType() }}</span>
            </div>
            <div class="stat-item">
              <label>连接状态:</label>
              <span class="connected">已连接</span>
            </div>
          </div>
        </div>

        <!-- Creo模型结构 -->
        <div class="info-section">
          <h4><i class="fas fa-sitemap"></i> 模型结构</h4>
          <div class="model-tree">
            <div class="tree-item">
              <i class="fas fa-cube"></i>
              <span>{{ modelData.data?.fileName || '主装配体' }}</span>
            </div>
            <div class="tree-item level-1" v-if="modelData.data?.partCount > 1">
              <i class="fas fa-cubes"></i>
              <span>子装配体 ({{ Math.max(0, (modelData.data?.partCount || 1) - 1) }}个零件)</span>
            </div>
            <div class="tree-note">
              <i class="fas fa-info-circle"></i>
              <span>结构信息来自 {{ modelData.data?.sourceSoftware || 'Creo Parametric' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧：快捷操作 -->
      <div class="project-actions-panel">
        <h4><i class="fas fa-bolt"></i> 快捷操作</h4>
        <div class="action-buttons">
          <button class="action-btn-simple" @click="refreshModel">
            <i class="fas fa-sync-alt"></i>
            <span>刷新模型</span>
          </button>
          <button class="action-btn-simple" @click="captureScreenshot">
            <i class="fas fa-camera"></i>
            <span>截图</span>
          </button>
          <button class="action-btn-simple" @click="exportModelInfo">
            <i class="fas fa-download"></i>
            <span>导出信息</span>
          </button>
          <button class="action-btn-simple" @click="basicCheck">
            <i class="fas fa-search"></i>
            <span>基础检测</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 移除未使用的import
import { ElNotification } from 'element-plus'
import { computed } from 'vue'

const props = defineProps({
  modelData: {
    type: Object,
    required: true
  }
})

// 处理文件大小显示（将文件数量减1）
const formattedFileSize = computed(() => {
  const fileSize = props.modelData.data?.basicStats?.fileSize
  if (!fileSize) return ''

  // 匹配 "xxx (from N files)" 格式
  const match = fileSize.match(/^(.*?)\s*\(from\s+(\d+)\s+files?\)(.*)$/)
  if (match) {
    const [, sizeStr, fileCount, rest] = match
    const adjustedCount = Math.max(0, parseInt(fileCount) - 1)
    const fileText = adjustedCount === 1 ? 'file' : 'files'
    return `${sizeStr} (from ${adjustedCount} ${fileText})${rest || ''}`
  }
  return fileSize
})

// 格式化日期
const formatDate = (dateValue) => {
  if (!dateValue) return '未知'

  try {
    let date
    if (typeof dateValue === 'string') {
      date = new Date(dateValue)
    } else if (dateValue instanceof Date) {
      date = dateValue
    } else {
      return '未知'
    }

    if (isNaN(date.getTime())) return '未知'

    return date.toLocaleString('zh-CN')
  } catch (error) {
    throw new Error(`日期格式化失败: ${error.message}`)
  }
}

// 获取模型类型
const getModelType = () => {
  // 根据零件数量判断是否为装配体
  if (props.modelData.data?.partCount > 1) {
    return '装配体'
  }
  return '零件'
}

// 快捷操作方法
const refreshModel = () => {
  ElNotification({
    title: '刷新模型',
    message: '模型刷新功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--notification-duration-success'))
  })
}

const captureScreenshot = () => {
  ElNotification({
    title: '截图',
    message: '截图功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--notification-duration-success'))
  })
}

const exportModelInfo = () => {
  ElNotification({
    title: '导出信息',
    message: '导出功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--notification-duration-success'))
  })
}

const basicCheck = () => {
  ElNotification({
    title: '基础检测',
    message: '基础检测功能暂未实现',
    type: 'info',
    position: 'top-right',
    duration: parseInt(getComputedStyle(document.documentElement).getPropertyValue('--notification-duration-success'))
  })
}
</script>

<style scoped>
.project-info-dashboard {
  padding: var(--model-viewer-padding);
  background: var(--color-bg-primary);
  border-radius: var(--model-viewer-border-radius);
  min-height: var(--model-viewer-min-height);
}

.project-header {
  margin-bottom: var(--model-viewer-section-margin);
  padding-bottom: var(--model-viewer-section-padding);
  border-bottom: 1px solid var(--color-border-primary);
}

.project-title {
  display: flex;
  align-items: center;
  gap: var(--model-viewer-header-gap);
  margin-bottom: var(--model-viewer-header-gap);
}

.project-title i {
  color: var(--color-primary);
  font-size: var(--font-size-icon);
}

.project-title h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.meta-item i {
  color: var(--color-primary);
}

.status.connected {
  color: var(--color-success);
  font-weight: var(--font-weight-medium);
}

.project-content {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--model-viewer-section-margin);
}

.info-section {
  background: var(--color-bg-card);
  border-radius: var(--size-border-radius);
  padding: var(--model-viewer-section-padding);
  margin-bottom: var(--model-viewer-section-padding);
  border: 1px solid var(--color-border-primary);
}

.info-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.info-section h4 i {
  color: var(--color-primary);
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--color-white-rgb-1);
}

.stat-item:last-child {
  border-bottom: none;
}

.stat-item label {
  color: var(--color-text-secondary);
  font-size: 14px;
}

.stat-item span {
  color: var(--color-text-primary);
  font-weight: 500;
  font-size: 14px;
}

.stat-item .connected {
  color: var(--color-success);
}

.model-tree {
  padding: 12px 0;
}

.tree-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: var(--color-text-primary);
  font-size: 14px;
}

.tree-item.level-1 {
  margin-left: 20px;
  color: var(--color-text-secondary);
}

.tree-item i {
  color: var(--color-primary);
  width: 16px;
}

.tree-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-white-rgb-1);
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.tree-note i {
  color: var(--color-primary);
}

.project-actions-panel {
  background: var(--color-bg-card);
  border-radius: 8px;
  padding: 16px;
  border: 1px solid var(--color-border-primary);
  height: fit-content;
}

.project-actions-panel h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: 600;
}

.project-actions-panel h4 i {
  color: var(--color-primary);
}

.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.action-btn-simple {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: var(--transition-all);
  font-size: 14px;
}

.action-btn-simple:hover {
  background: var(--color-white-rgb-1);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.action-btn-simple i {
  color: var(--color-primary);
  font-size: 14px;
}

@media (max-width: 768px) {
  .project-content {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .project-meta {
    flex-direction: column;
    gap: 8px;
  }
}
</style>