<template>
  <div class="geometry-optimization-result-page">
    <div class="page-header">
      <h2>
        <i class="fas fa-check-circle"></i>
        几何优化分析结果
      </h2>
      <p>薄壳化分析已完成，查看优化结果</p>
    </div>

    <div class="page-content">
      <div class="result-container">
        <!-- 成功状态 -->
        <div class="result-status success">
          <div class="status-icon">
            <i class="fas fa-check-circle"></i>
          </div>
          <div class="status-content">
            <h3>分析完成</h3>
            <p>{{ resultData.message }}</p>
          </div>
        </div>

        <!-- 输出文件信息 -->
        <div class="result-section">
          <h4>
            <i class="fas fa-file"></i>
            输出文件信息
          </h4>
          <div class="info-grid">
            <div class="info-item">
              <label>文件路径</label>
              <span class="file-path">{{ resultData.data.data.output_file }}</span>
            </div>
            <div class="info-item">
              <label>文件大小</label>
              <span class="file-size">{{ resultData.data.data.file_size }}</span>
            </div>
            <div class="info-item">
              <label>导出时间</label>
              <span class="export-time">{{ formatExportTime(resultData.data.data.export_time) }}</span>
            </div>
          </div>
        </div>

        <!-- 使用的参数 -->
        <div class="result-section">
          <h4>
            <i class="fas fa-cogs"></i>
            分析参数
          </h4>
          <div class="params-grid">
            <div class="param-item">
              <label>优化方法</label>
              <span>{{ getMethodName(resultData.data.data.parameters_used.method) }}</span>
            </div>
            <div class="param-item">
              <label>质量等级</label>
              <span>{{ resultData.data.data.parameters_used.quality }}</span>
            </div>
            <div class="param-item">
              <label>填充孔洞</label>
              <span>{{ resultData.data.data.parameters_used.fill_holes ? '是' : '否' }}</span>
            </div>
            <div class="param-item">
              <label>忽略小表面</label>
              <span>{{ resultData.data.data.parameters_used.ignore_small_surfaces ? '是' : '否' }}</span>
            </div>
            <div class="param-item">
              <label>小表面阈值</label>
              <span>{{ resultData.data.data.parameters_used.small_surface_percentage }}%</span>
            </div>
            <div class="param-item">
              <label>忽略拼接</label>
              <span>{{ resultData.data.data.parameters_used.ignore_quilts ? '是' : '否' }}</span>
            </div>
            <div class="param-item">
              <label>忽略骨架</label>
              <span>{{ resultData.data.data.parameters_used.ignore_skeleton ? '是' : '否' }}</span>
            </div>
            <div class="param-item">
              <label>分配质量属性</label>
              <span>{{ resultData.data.data.parameters_used.assign_mass_properties ? '是' : '否' }}</span>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="result-actions">
          <button class="result-btn result-btn-secondary" @click="$emit('back-to-analysis')">
            <i class="fas fa-arrow-left"></i>
            返回分析
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Props
defineProps({
  resultData: {
    type: Object,
    required: true
  }
})

// Emits
defineEmits(['back-to-analysis'])


// 格式化导出时间
const formatExportTime = (timeString) => {
  const date = new Date(timeString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 获取方法名称
const getMethodName = (method) => {
  const methodMap = {
    'creo_native_shrinkwrap': 'Creo原生薄壳化',
    'outer_shell': '外壳优化',
    'inner_core': '内核优化',
    'hybrid': '混合优化'
  }
  return methodMap[method] || method
}

</script>

<style scoped>
.geometry-optimization-result-page {
  padding: var(--spacing-2xl);
  height: 100%;
}

.page-header {
  margin-bottom: var(--spacing-2xl);
}

.page-header h2 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.page-header h2 i {
  color: var(--color-success);
}

.page-header p {
  color: var(--color-text-secondary);
  margin: 0;
}

.page-content {
  height: calc(100% - 100px);
  overflow: auto;
}

/* 结果容器 */
.result-container {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  padding: var(--spacing-xl);
  box-shadow: var(--color-shadow-card);
  backdrop-filter: blur(10px);
}

/* 成功状态 */
.result-status {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-bg-success);
  border: 1px solid var(--color-success-rgb-3);
  border-radius: var(--size-border-radius);
  margin-bottom: var(--spacing-xl);
}

.status-icon {
  font-size: var(--font-size-4xl);
  color: var(--color-success);
}

.status-content h3 {
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-success);
}

.status-content p {
  margin: 0;
  color: var(--color-text-secondary);
}

/* 结果区块 */
.result-section {
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-lg);
}

.result-section h4 {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: 0 0 var(--spacing-lg) 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

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

/* 信息网格 */
.info-grid {
  display: grid;
  gap: var(--spacing-lg);
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.info-item label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.file-path {
  font-family: 'Courier New', monospace;
  background: var(--color-bg-tertiary);
  padding: var(--spacing-sm);
  border-radius: var(--size-border-radius);
  border: 1px solid var(--color-border-primary);
  word-break: break-all;
  color: var(--color-text-primary);
}

.file-size {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  font-size: var(--font-size-lg);
}

.export-time {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* 参数网格 */
.params-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.param-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
}

.param-item label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.param-item span {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* 操作按钮 */
.result-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-lg);
  border-top: 1px solid var(--color-border-primary);
}

.result-btn {
  padding: var(--spacing-md) var(--spacing-xl);
  border: none;
  border-radius: var(--size-border-radius);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.result-btn-secondary {
  background: var(--color-bg-tertiary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
}

.result-btn-secondary:hover {
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

.result-btn-primary {
  background: var(--color-primary-gradient);
  color: white;
  box-shadow: 0 4px 12px rgba(var(--color-primary-base), 0.3);
}

.result-btn-primary:hover {
  background: var(--color-primary-gradient-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(var(--color-primary-base), 0.4);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .result-container {
    padding: var(--spacing-lg);
  }

  .result-status {
    flex-direction: column;
    text-align: center;
  }

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

  .param-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }

  .result-actions {
    flex-direction: column;
  }

  .result-btn {
    justify-content: center;
  }
}
</style>