<template>
  <div class="export-tools-container creo-theme">
    <!-- 导出工具头部 -->
    <div class="export-header">
      <div class="header-content">
        <div class="header-icon">
          <i class="fas fa-download"></i>
        </div>
        <div class="header-text">
          <h2>模型导出工具</h2>
          <p>将当前模型导出为不同格式的文件</p>
        </div>
      </div>
    </div>

    <!-- 当前软件信息 -->
    <div class="export-card">
      <div class="card-header">
        <i class="fas fa-info-circle"></i>
        <h3>当前连接信息</h3>
      </div>
      <div class="card-content">
        <div class="connected-software-info">
          <div class="software-display">
            <div class="software-icon-large">
              <i class="fas fa-cogs"></i>
            </div>
            <div class="software-details">
              <h4>Creo</h4>
              <p>连接状态: <span class="status-connected">已连接</span></p>
              <p class="no-project">未打开模型</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 基础导出设置 -->
    <div class="export-card">
      <div class="card-header">
        <i class="fas fa-cog"></i>
        <h3>导出设置</h3>
      </div>
      <div class="card-content">
        <p>配置模型导出的基本参数和选项</p>

        <div class="export-options">
          <div class="option-group">
            <label for="export-format">导出格式</label>
            <select id="export-format" v-model="exportForm.format" @change="onFormatChange">
              <option value="">请选择导出格式</option>
              <option value="step">STEP (.stp)</option>
            </select>
          </div>

          <div class="option-group">
            <label for="export-path">导出路径</label>
            <input type="text" id="export-path" v-model="exportForm.path" placeholder="D:\model.stp" class="form-input">
            <small class="form-hint">请输入完整的文件路径，包含文件名和.stp扩展名</small>
          </div>
        </div>

        <div class="card-actions">
          <button class="btn btn-export btn-lg btn-full" :disabled="!canExport" @click="startExport">
            <i class="fas fa-download"></i>
            开始导出
          </button>
        </div>
      </div>
    </div>

    <!-- Creo专属高级选项 -->
    <div class="export-card creo-advanced-options">
      <div class="card-header">
        <i class="fas fa-cogs"></i>
        <h3>Creo高级导出选项</h3>
      </div>
      <div class="card-content">
        <p>配置Creo专属的高级导出参数，提供更精细的控制选项。</p>

        <div class="export-options">
          <div class="option-group">
            <label>几何类型 (geom_flags)</label>
            <select id="creo-geom-flags" v-model="exportForm.geomFlags">
              <option value="solids">实体 (Solids)</option>
              <option value="surfaces">曲面 (Surfaces)</option>
              <option value="wireframe">线框 (Wireframe)</option>
              <option value="quilts">面片 (Quilts)</option>
            </select>
            <small class="form-hint">选择要导出的几何体类型</small>
          </div>

          <div class="option-group">
            <label>
              <input type="checkbox" v-model="exportForm.advancedMode">
              启用高级导出模式
            </label>
            <small class="form-hint">提供更多导出控制选项和优化</small>
          </div>

          <div class="option-group">
            <label>
              <input type="checkbox" v-model="exportForm.exportCurrent">
              导出当前活动文件（推荐）
            </label>
            <small class="form-hint">不指定文件名，自动导出当前在Creo中打开的文件</small>
          </div>
        </div>
      </div>
    </div>

    <!-- 导出进度 -->
    <div class="export-progress" id="export-progress" v-show="false">
      <div class="progress-content">
        <div class="progress-icon">
          <i class="fas fa-spinner fa-spin"></i>
        </div>
        <h4>正在导出模型</h4>
        <p id="export-progress-text">正在连接CAD软件...</p>
        <div class="progress-bar">
          <div class="progress-fill" id="export-progress-fill"></div>
        </div>
        <div class="progress-percentage" id="export-progress-percent">0%</div>
      </div>
    </div>

    <!-- 导出结果 -->
    <div class="export-status" id="export-status" v-show="false">
      <div class="status-content">
        <div class="status-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <div class="status-text">
          <h4>导出完成</h4>
          <p id="export-result-text">模型已成功导出</p>
          <div id="export-details" class="export-details">
            <!-- 导出详情将在这里显示 -->
          </div>
        </div>
        <button class="btn btn-primary" id="export-again-btn">
          <i class="fas fa-redo"></i>
          重新导出
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue'
import creoApi from '@/services/creoApi'

// 导出表单数据
const exportForm = reactive({
  format: '',
  path: '',
  geomFlags: 'solids',
  advancedMode: false,
  exportCurrent: true
})

// 计算属性：是否可以开始导出
const canExport = computed(() => {
  return exportForm.format && exportForm.path
})

// 开始导出
const startExport = async () => {
  if (!canExport.value) return

  await creoApi.exportModel(
    exportForm.format,
    exportForm.path,
    {
      geom_flags: exportForm.geomFlags,
      advanced: exportForm.advancedMode
    }
  )
}

// 格式变化时自动设置默认路径
const onFormatChange = () => {
  if (exportForm.format === 'step' && !exportForm.path) {
    exportForm.path = 'D:\\model.stp'
  }
}
</script>

<style scoped>
/* 导出工具样式 - 完全复制参考项目布局 */
.export-tools-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.export-header {
  margin-bottom: 30px;
}

.export-header .header-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.export-header .header-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
}

.export-header .header-text h2 {
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  font-size: 28px;
}

.export-header .header-text p {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 16px;
}

/* 连接软件信息显示 */
.connected-software-info {
  margin-bottom: 15px;
}

.software-display {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 15px;
  background: var(--color-primary-rgb);
  border: 1px solid var(--color-primary-rgb-3);
  border-radius: 10px;
}

.software-icon-large {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  flex-shrink: 0;
}

.software-details {
  flex: 1;
}

.software-details h4 {
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
}

.software-details p {
  color: var(--color-text-secondary);
  margin: 0 0 5px 0;
  font-size: 14px;
}

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

.no-project {
  color: var(--color-warning);
  font-style: italic;
}

.export-card {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
}

.export-card .card-header {
  background: var(--color-bg-tertiary);
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid var(--color-border-primary);
}

.export-card .card-header i {
  font-size: 24px;
  color: var(--color-primary);
}

.export-card .card-header h3 {
  color: var(--color-text-primary);
  margin: 0;
  font-size: 20px;
}

.export-card .card-content {
  padding: 25px;
}

.export-card .card-content p {
  color: var(--color-text-secondary);
  margin-bottom: 20px;
  line-height: 1.6;
}

.export-options {
  margin-bottom: 25px;
}

.option-group {
  margin-bottom: 15px;
}

.option-group label {
  color: var(--color-text-primary);
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
}

/* 输入组 */
.input-group {
  display: flex;
  gap: 10px;
}

.form-input {
  flex: 1;
  padding: 8px 12px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 14px;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.form-hint {
  color: var(--color-text-tertiary);
  margin-top: 5px;
  display: block;
  font-size: 12px;
}

.option-group select {
  width: 200px;
  padding: 8px 12px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border-primary);
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 14px;
}

.option-group select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.option-group input[type="checkbox"] {
  margin-right: 8px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  min-height: 40px;
  white-space: nowrap;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--color-border-primary);
  color: var(--color-text-secondary);
}

.btn-outline:hover:not(:disabled) {
  background: var(--color-bg-hover);
}

.btn-export {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-success) 0%, var(--color-success) 100%);
  border: none;
  box-shadow: var(--color-shadow-btn-success);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  min-width: 150px;
  color: white;
}

.btn-export:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px var(--color-success-rgb-3);
}

.btn-export:disabled {
  background: var(--color-gradient-gray);
  box-shadow: none;
  opacity: 0.7;
}

.btn-lg {
  padding: 12px 24px;
  min-height: 48px;
  font-size: 16px;
}

.btn-full {
  width: 100%;
}

.card-actions {
  display: flex;
  gap: 15px;
}

.export-progress {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
}

.progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.progress-icon i {
  font-size: 48px;
  color: var(--color-primary);
}

.progress-content h4 {
  color: var(--color-text-primary);
  margin: 0;
  font-size: 20px;
}

.progress-content p {
  color: var(--color-text-secondary);
  margin: 0;
  font-size: 14px;
}

.progress-bar {
  width: 100%;
  max-width: 300px;
  height: 8px;
  background: var(--color-bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
  margin: 10px 0;
}

.progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
  width: 0%;
}

.progress-percentage {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.export-status {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  margin-bottom: 20px;
}

.status-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.status-icon i {
  font-size: 48px;
  color: var(--color-primary);
}

.status-text h4 {
  color: var(--color-text-primary);
  margin: 0 0 8px 0;
  font-size: 20px;
}

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

.export-details {
  margin-top: 15px;
  padding: 15px;
  background: var(--color-bg-tertiary);
  border-radius: 6px;
  color: var(--color-text-primary);
}
</style>