<template>
  <div class="export-tools-container pdms-theme">
    <!-- 导出工具头部 -->
    <div class="export-header">
      <div class="header-content">
        <div class="header-icon">
          <i class="fas fa-industry"></i>
        </div>
        <div class="header-text">
          <h2>PDMS 导出工具</h2>
          <p>将当前PDMS模型导出为 RVM 格式文件</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-project-diagram"></i>
            </div>
            <div class="software-details">
              <h4>PDMS</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" disabled>
              <option value="RVM">模型导出（RVM）</option>
            </select>
            <small class="form-hint">系统当前支持直接导出标准 RVM 模型</small>
          </div>

          <div class="option-group">
            <label for="export-dir">输出目录 (必填)</label>
            <input
              type="text"
              id="export-dir"
              v-model="exportForm.exportPath"
              placeholder="例如: D:\"
              class="form-input"
            >
            <small class="form-hint">指定服务端导出的文件夹路径。强烈建议使用绝对路径(例如 D:\)</small>
          </div>

          <div class="option-group">
            <label for="file-name">文件名称 (选填)</label>
            <input
              type="text"
              id="file-name"
              v-model="exportForm.fileName"
              placeholder="例如: model.rvm"
              class="form-input"
            >
            <small class="form-hint">指定导出的文件名称(需带.rvm后缀)。留空则自动生成按时间戳命名文件</small>
          </div>

          <div class="option-group checkbox-group">
            <label class="checkbox-label">
              <input type="checkbox" v-model="exportForm.overwrite">
              覆盖现有文件
            </label>
            <small class="form-hint">勾选则自动覆盖同名文件（带 OVERWRITE 选项），否则按 READ 策略处理</small>
          </div>

          <div class="option-group">
            <label for="selections">导出对象选择命令</label>
            <input
              type="text"
              id="selections"
              v-model="exportForm.selections"
              placeholder="/EQUIP, /PIPES"
              class="form-input"
            >
            <small class="form-hint">支持多个命令，用逗号分隔（不含 EXPORT 前缀也行）</small>
          </div>

          <div class="option-group">
            <label for="export-system">导出驱动 (高级选项)</label>
            <input
              type="text"
              id="export-system"
              v-model="exportForm.exportSystem"
              placeholder="不建议填写"
              class="form-input"
            >
            <small class="form-hint" style="color:#e74c3c;">仅在明确需要特定系统驱动时传参，随意指定容易触发许可证错误！</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>
            开始 {{ exportForm.format }} 模型导出
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from 'vue'
import pdmsApi from '@/services/pdmsApi'
import { ElMessage } from 'element-plus'

// 导出表单数据
const exportForm = reactive({
  format: 'RVM',
  exportPath: 'D:\\',
  fileName: '',
  exportSystem: '',
  overwrite: true,
  selections: '/EQUIP, /PIPES'
})

// 计算属性：是否可以开始导出
const canExport = computed(() => {
  return !!exportForm.exportPath.trim() // 输出目录是必填项
})

// 开始导出
const startExport = async () => {
  try {
    if (pdmsApi.exportIfc) {
       const params = {
         Overwrite: exportForm.overwrite
       }
       if (exportForm.exportPath && exportForm.exportPath.trim()) {
         params.ExportPath = exportForm.exportPath.trim()
       }
       if (exportForm.fileName && exportForm.fileName.trim()) {
         params.FileName = exportForm.fileName.trim()
       }
       if (exportForm.exportSystem && exportForm.exportSystem.trim()) {
         params.ExportSystem = exportForm.exportSystem.trim()
       }
       if (exportForm.selections && exportForm.selections.trim()) {
         params.Selections = exportForm.selections.split(',').map(s => s.trim()).filter(s => s)
       }

       ElMessage.info(`正在请求 RVM 模型导出，请稍候...`)
       const response = await pdmsApi.exportIfc(params)
       
       if (response && response.data && response.data.Success) {
         ElMessage.success(`RVM导出成功！文件耗时 ${response.data.DurationSeconds}s，保存至: ${response.data.FullPath}`)
       } else {
         ElMessage.success(`已触发导出流程`)
       }
    } else {
       ElMessage.warning(`尚未找到相关导出接口`)
    }
  } catch(e) {
    if (e.response && e.response.data && e.response.data.message) {
      ElMessage.error(`模型导出失败: ${e.response.data.message}`)
    } else {
      ElMessage.error(`模型导出请求失败: ${e.message || '未知错误'}`)
    }
  }
}
</script>

<style scoped>
.export-tools-container {
  padding: var(--model-viewer-padding);
  max-width: 800px;
  margin: 0 auto;
}

.export-header {
  margin-bottom: var(--spacing-3xl);
}

.export-header .header-content {
  display: flex;
  align-items: center;
  gap: var(--model-viewer-header-gap);
}

.export-header .header-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f5a623 0%, #e67e22 100%);
  border-radius: var(--size-border-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-icon);
  color: white;
  box-shadow: 0 4px 15px rgba(245, 166, 35, 0.3);
}

.export-header .header-text h2 {
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

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

.connected-software-info {
  margin-bottom: var(--spacing-lg);
}

.software-display {
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-lg);
  background: rgba(245, 166, 35, 0.05);
  border: 1px solid rgba(245, 166, 35, 0.2);
  border-radius: var(--size-border-radius);
}

.software-icon-large {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #f5a623 0%, #e67e22 100%);
  border-radius: var(--size-border-radius-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-3xl);
  color: white;
  flex-shrink: 0;
}

.software-details {
  flex: 1;
}

.software-details h4 {
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}

.software-details p {
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-base);
}

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

.no-project {
  color: #e67e22;
  font-style: italic;
}

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

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

.export-card .card-header i {
  font-size: var(--font-size-icon);
  color: #e67e22;
}

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

.export-card .card-content {
  padding: var(--spacing-2xl);
}

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

.export-options {
  margin-bottom: var(--spacing-2xl);
}

.option-group {
  margin-bottom: var(--spacing-lg);
}

.option-group label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-sm);
  display: block;
}

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

.form-input:focus {
  outline: none;
  border-color: #e67e22;
}

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

.option-group select {
  width: 200px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-input);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--size-border-radius);
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.option-group select:focus {
  outline: none;
  border-color: #e67e22;
}

.option-group.checkbox-group label {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.option-group input[type="checkbox"] {
  margin-right: var(--spacing-sm);
  accent-color: #e67e22;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-xl);
  border: none;
  border-radius: var(--size-border-radius-button);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.3s;
}

.btn-export {
  background: linear-gradient(135deg, #f5a623 0%, #e67e22 100%);
  color: white;
}

.btn-export:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(245, 166, 35, 0.4);
}

.btn-export:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-2xl);
  height: 48px;
  font-size: var(--font-size-lg);
}

.btn-full {
  width: 100%;
}

.card-actions {
  display: flex;
}
</style>
