<template>
  <div class="geometry-optimization-params-page">
    <div class="page-header">
      <h2>
        <i class="fas fa-shapes"></i>
        几何优化分析参数设置
      </h2>
      <p>配置几何优化分析的相关参数</p>
    </div>

    <div class="page-content">
      <div class="geometry-params-container">
        <div class="geometry-params-form">
          <!-- 基础配置 -->
          <div class="params-section" :class="{ collapsed: !sections.basic.expanded }" data-group="basic">
            <div class="params-section-header" @click="toggleSection('basic')">
              <h4>
                <i class="fas fa-cog"></i>
                基础配置
              </h4>
              <i class="fas fa-chevron-down section-toggle"></i>
            </div>
            <div class="params-section-content">
              <div class="param-group">
                <label class="param-label">项目名称</label>
                <div class="param-description">当前处理的模型项目名称</div>
                <input type="text" class="param-input" v-model="parameters.project_name" readonly>
              </div>

            </div>
          </div>

          <!-- 几何优化方法 -->
          <div class="params-section" :class="{ collapsed: !sections.method.expanded }" data-group="method">
            <div class="params-section-header" @click="toggleSection('method')">
              <h4>
                <i class="fas fa-shapes"></i>
                几何优化方法
              </h4>
              <i class="fas fa-chevron-down section-toggle"></i>
            </div>
            <div class="params-section-content">
              <div class="param-group">
                <label class="param-label">优化方法选择</label>
                <div class="param-description">选择几何优化的策略方法</div>
                <div class="param-radio-group">
                  <div class="radio-option"
                       :class="{ selected: parameters.method === 'outer_shell' }"
                       @click="selectMethod('outer_shell')">
                    <input type="radio" name="optimization-method" value="outer_shell"
                           class="param-radio" v-model="parameters.method">
                    <div class="radio-content">
                      <div class="radio-title">外壳优化</div>
                      <div class="radio-description">保留外部轮廓，优化内部结构（推荐）</div>
                    </div>
                  </div>
                  <div class="radio-option"
                       :class="{ selected: parameters.method === 'inner_core' }"
                       @click="selectMethod('inner_core')">
                    <input type="radio" name="optimization-method" value="inner_core"
                           class="param-radio" v-model="parameters.method">
                    <div class="radio-content">
                      <div class="radio-title">内核优化</div>
                      <div class="radio-description">保留内部核心，简化外部表面</div>
                    </div>
                  </div>
                  <div class="radio-option"
                       :class="{ selected: parameters.method === 'hybrid' }"
                       @click="selectMethod('hybrid')">
                    <input type="radio" name="optimization-method" value="hybrid"
                           class="param-radio" v-model="parameters.method">
                    <div class="radio-content">
                      <div class="radio-title">混合优化</div>
                      <div class="radio-description">综合内外优化，平衡性能与效果</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 质量与精度设置 -->
          <div class="params-section" :class="{ collapsed: !sections.quality.expanded }" data-group="quality">
            <div class="params-section-header" @click="toggleSection('quality')">
              <h4>
                <i class="fas fa-sliders-h"></i>
                质量与精度设置
              </h4>
              <i class="fas fa-chevron-down section-toggle"></i>
            </div>
            <div class="params-section-content">
              <div class="param-group">
                <label class="param-label">质量等级</label>
                <div class="param-description">控制优化后的模型质量，数值越高质量越好（1-10）</div>
                <div class="param-slider-container">
                  <input type="range" class="param-slider"
                         min="1" max="10" v-model="parameters.quality">
                  <div class="slider-value">{{ parameters.quality }}</div>
                </div>
              </div>

              <div class="param-group">
                <label class="param-label">弦高度 (Chord Height)</label>
                <div class="param-description">控制曲面近似精度，值越小精度越高（单位：毫米）</div>
                <input type="number" class="param-input"
                       v-model="parameters.chord_height" min="0.01" max="10" step="0.01">
              </div>

              <div class="param-group">
                <label class="param-label">输出类型</label>
                <div class="param-description">选择优化后模型的输出格式</div>
                <select class="param-select" v-model="parameters.output_type">
                  <option value="solid_surface">实体表面</option>
                  <option value="mesh_only">仅网格</option>
                  <option value="wireframe">线框模式</option>
                </select>
              </div>
            </div>
          </div>

          <!-- 表面处理选项 -->
          <div class="params-section" :class="{ collapsed: !sections.surface.expanded }" data-group="surface">
            <div class="params-section-header" @click="toggleSection('surface')">
              <h4>
                <i class="fas fa-layer-group"></i>
                表面处理选项
              </h4>
              <i class="fas fa-chevron-down section-toggle"></i>
            </div>
            <div class="params-section-content">
              <div class="param-group">
                <div class="param-checkbox-group">
                  <input type="checkbox" class="param-checkbox" v-model="parameters.fill_holes">
                  <label class="checkbox-label">填充孔洞</label>
                </div>
                <div class="param-description">自动填充模型中的小孔洞和缺口</div>
              </div>

              <div class="param-group">
                <div class="param-checkbox-group">
                  <input type="checkbox" class="param-checkbox" v-model="parameters.ignore_small_surfaces">
                  <label class="checkbox-label">忽略小表面</label>
                </div>
                <div class="param-description">忽略过小的表面，提高处理效率</div>
              </div>

              <div class="param-group">
                <label class="param-label">小表面阈值百分比</label>
                <div class="param-description">定义"小表面"的面积阈值（占总面积的百分比）</div>
                <input type="number" class="param-input"
                       v-model="parameters.small_surface_percentage" min="0.1" max="5" step="0.1">
              </div>
            </div>
          </div>

          <!-- 高级选项 -->
          <div class="params-section" :class="{ collapsed: !sections.advanced.expanded }" data-group="advanced">
            <div class="params-section-header" @click="toggleSection('advanced')">
              <h4>
                <i class="fas fa-tools"></i>
                高级选项
              </h4>
              <i class="fas fa-chevron-down section-toggle"></i>
            </div>
            <div class="params-section-content">
              <div class="param-group">
                <div class="param-checkbox-group">
                  <input type="checkbox" class="param-checkbox" v-model="parameters.ignore_quilts">
                  <label class="checkbox-label">忽略拼接 (Quilts)</label>
                </div>
                <div class="param-description">跳过表面拼接处理，适用于简单几何体</div>
              </div>

              <div class="param-group">
                <div class="param-checkbox-group">
                  <input type="checkbox" class="param-checkbox" v-model="parameters.ignore_skeleton">
                  <label class="checkbox-label">忽略骨架 (Skeleton)</label>
                </div>
                <div class="param-description">不处理模型骨架元素，加快处理速度</div>
              </div>

              <div class="param-group">
                <div class="param-checkbox-group">
                  <input type="checkbox" class="param-checkbox" v-model="parameters.assign_mass_properties">
                  <label class="checkbox-label">分配质量属性</label>
                </div>
                <div class="param-description">为优化后的模型计算并分配质量属性</div>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="params-actions">
            <button class="params-btn params-btn-cancel" @click="$emit('close')">
              <i class="fas fa-times"></i>
              取消
            </button>
            <button class="params-btn params-btn-primary" @click="startOptimization">
              <i class="fas fa-play"></i>
              开始优化
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getGeometryOptimizationDefaults } from '@/config/cad.js'
import { creoApi } from '@/services/creoApi.js'

// Emits
const emit = defineEmits(['close', 'start-optimization'])

// 响应式数据
const sections = ref({
  basic: { expanded: true },
  method: { expanded: true },
  quality: { expanded: true },
  surface: { expanded: false },
  advanced: { expanded: false }
})

// 从配置文件获取默认参数
const configDefaults = getGeometryOptimizationDefaults()

// 当前参数
const parameters = ref({
  software_type: configDefaults.SOFTWARE_TYPE,
  project_name: window.appState?.currentProject?.name || 'Unknown Project',
  method: configDefaults.METHOD,
  quality: configDefaults.QUALITY,
  chord_height: configDefaults.CHORD_HEIGHT,
  fill_holes: configDefaults.FILL_HOLES,
  ignore_small_surfaces: configDefaults.IGNORE_SMALL_SURFACES,
  small_surface_percentage: configDefaults.SMALL_SURFACE_PERCENTAGE,
  output_file_path: '自定义名字',
  output_type: configDefaults.OUTPUT_TYPE,
  ignore_quilts: configDefaults.IGNORE_QUILTS,
  ignore_skeleton: configDefaults.IGNORE_SKELETON,
  assign_mass_properties: configDefaults.ASSIGN_MASS_PROPERTIES
})

// 切换参数分组展开/收起
const toggleSection = (groupId) => {
  sections.value[groupId].expanded = !sections.value[groupId].expanded
}

// 选择优化方法
const selectMethod = (method) => {
  parameters.value.method = method
}


// 开始几何优化
const startOptimization = async () => {
  // 构建API参数，使用"通过接口获取"作为project_name的占位符
  const apiParams = {
    software_type: parameters.value.software_type,
    project_name: "通过接口获取",
    method: parameters.value.method,
    quality: parameters.value.quality,
    chord_height: parameters.value.chord_height,
    fill_holes: parameters.value.fill_holes,
    ignore_small_surfaces: parameters.value.ignore_small_surfaces,
    small_surface_percentage: parameters.value.small_surface_percentage,
    output_file_path: parameters.value.output_file_path,
    output_type: parameters.value.output_type,
    ignore_quilts: parameters.value.ignore_quilts,
    ignore_skeleton: parameters.value.ignore_skeleton,
    assign_mass_properties: parameters.value.assign_mass_properties
  }

  // 调用API
  const result = await creoApi.startShrinkwrapShell(apiParams)

  // 发射事件通知父组件
  emit('start-optimization', { result, parameters: { ...parameters.value } })
}

</script>

<style scoped>
.geometry-optimization-params-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-primary);
}

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

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

/* 几何优化参数设置容器 */
.geometry-params-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);
}

/* 参数分组样式 */
.params-section {
  background: var(--color-white-rgb-05);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
}

.params-section-header {
  background: var(--color-bg-hover);
  padding: var(--spacing-lg) var(--spacing-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-primary);
  transition: all var(--transition-duration) var(--transition-timing);
}

.params-section-header:hover {
  background: var(--color-bg-active);
}

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

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

.section-toggle {
  color: var(--color-primary);
  transition: transform var(--transition-duration) var(--transition-timing);
}

.params-section.collapsed .section-toggle {
  transform: rotate(-90deg);
}

.params-section-content {
  padding: var(--spacing-xl);
  transition: all var(--transition-duration) var(--transition-timing);
}

.params-section.collapsed .params-section-content {
  display: none;
}

/* 参数项样式 */
.param-group {
  margin-bottom: var(--spacing-lg);
}

.param-group:last-child {
  margin-bottom: 0;
}

.param-label {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-base);
}

.param-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--spacing-md);
  line-height: 1.4;
}

/* 输入控件样式 */
.param-input {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  font-size: var(--font-size-base);
  transition: all var(--transition-duration) var(--transition-timing);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  box-sizing: border-box;
}

.param-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-base), 0.2);
  background: var(--color-bg-secondary);
}

.param-input:read-only {
  background: var(--color-bg-tertiary);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

.param-select {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  font-size: var(--font-size-base);
  background: var(--color-bg-input);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
  box-sizing: border-box;
}

.param-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--color-primary-base), 0.2);
}

/* 滑块样式 */
.param-slider-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.param-slider {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--color-border-primary);
  outline: none;
  transition: all var(--transition-duration) var(--transition-timing);
  -webkit-appearance: none;
}

.param-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary-gradient);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(var(--color-primary-base), 0.3);
  transition: all var(--transition-duration) var(--transition-timing);
}

.param-slider::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 3px 8px rgba(var(--color-primary-base), 0.4);
}

.slider-value {
  min-width: 40px;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-bg-active);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  text-align: center;
  font-weight: var(--font-weight-medium);
  color: var(--color-primary);
}

/* 复选框样式 */
.param-checkbox-group {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.param-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.checkbox-label {
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
}

/* 单选按钮组样式 */
.param-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.radio-option {
  display: flex;
  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);
  cursor: pointer;
  transition: all var(--transition-duration) var(--transition-timing);
}

.radio-option:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-border-secondary);
}

.radio-option.selected {
  background: var(--color-bg-active);
  border-color: var(--color-primary);
}

.param-radio {
  margin-right: var(--spacing-md);
  accent-color: var(--color-primary);
}

.radio-content {
  flex: 1;
}

.radio-title {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.radio-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: 1.3;
}

/* 操作按钮区域 */
.params-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);
}

.params-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);
}

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

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

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

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

.params-btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

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

  .params-section-content {
    padding: var(--spacing-lg);
  }

  .param-slider-container {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

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

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