<template>
  <a-modal
    v-model:visible="visible"
    title="生成检测报告"
    :width="1000"
    :footer="false"
    @cancel="handleCancel"
  >
    <div class="report-wizard">
      <!-- 步骤指示器 -->
      <div class="wizard-header">
        <a-steps :current="currentStep" size="small" class="wizard-steps">
          <a-step title="报告选项" />
          <a-step title="预览报告" />
          <a-step title="导出报告" />
        </a-steps>
      </div>

      <!-- 步骤内容 -->
      <div class="wizard-content">
        <!-- 第一步：报告选项 -->
        <div v-if="currentStep === 0" class="step-content">
          <div class="form-sections">
            <!-- 报告基本信息 -->
            <div class="form-section">
              <h3 class="section-title">报告基本信息</h3>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="主机商">
                    <a-input v-model="reportForm.manufacturer" placeholder="风力发电机组叶片检查报告" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="制作商">
                    <a-input v-model="reportForm.producer" placeholder="2023年度定期检查" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="检测单位">
                    <a-input v-model="reportForm.inspectionUnit" placeholder="风电运维中心" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="报告日期">
                    <a-date-picker v-model="reportForm.reportDate" style="width: 100%" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>

            <!-- 检测概况 -->
            <div class="form-section">
              <h3 class="section-title">检测概况</h3>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="检测日期">
                    <a-date-picker v-model="reportForm.inspectionDate" style="width: 100%" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="检测区域">
                    <a-input v-model="reportForm.inspectionArea" placeholder="风电场1号机组" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="24">
                  <a-form-item label="检测内容">
                    <a-textarea v-model="reportForm.inspectionContent" placeholder="叶片外观检查、内部结构检查、表面缺陷检测" :rows="3" />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="16">
                <a-col :span="12">
                  <a-form-item label="检测方式">
                    <a-input v-model="reportForm.inspectionMethod" placeholder="无人机检测、人工检查" />
                  </a-form-item>
                </a-col>
                <a-col :span="12">
                  <a-form-item label="检测人员">
                    <a-select v-model="reportForm.inspectionPersonnel" mode="tags" placeholder="张三、李四、王五" allow-create>
                      <a-option value="张三">张三</a-option>
                      <a-option value="李四">李四</a-option>
                      <a-option value="王五">王五</a-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </a-row>
            </div>

            <!-- 成果提交 -->
            <div class="form-section">
              <h3 class="section-title">成果提交</h3>
              <a-row :gutter="16">
                <a-col :span="8">
                  <a-form-item label="报告期限">
                    <a-input v-model="reportForm.reportDeadline" placeholder="十五" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="报告数量">
                    <a-input v-model="reportForm.reportQuantity" placeholder="叁份" />
                  </a-form-item>
                </a-col>
                <a-col :span="8">
                  <a-form-item label="报告形式">
                    <a-input v-model="reportForm.reportFormat" placeholder="纸七" />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </div>
        </div>

        <!-- 第二步：预览报告 -->
        <div v-if="currentStep === 1" class="step-content">
          <div class="report-preview">
            <div class="preview-header">
              <h1 class="report-title">{{ reportForm.manufacturer }}</h1>
              <h2 class="report-subtitle">{{ reportForm.producer }}</h2>
            </div>

            <div class="preview-content">
              <!-- 项目概况 -->
              <div class="content-section">
                <h3>一、项目概况</h3>
                <table class="info-table">
                  <tbody>
                    <tr>
                      <td class="label">风电名称</td>
                      <td>{{ reportForm.manufacturer }}</td>
                      <td class="label">被检单位</td>
                      <td>{{ reportForm.inspectionUnit }}</td>
                    </tr>
                    <tr>
                      <td class="label">检查日期</td>
                      <td>{{ formatDate(reportForm.inspectionDate) }}</td>
                      <td class="label">报告日期</td>
                      <td>{{ formatDate(reportForm.reportDate) }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <!-- 检测方案 -->
              <div class="content-section">
                <h3>二、检测方案</h3>
                <table class="info-table">
                  <tbody>
                    <tr>
                      <td class="label">工作内容</td>
                      <td class="label">人员配置</td>
                      <td class="label">设备配置</td>
                      <td class="label">备注</td>
                    </tr>
                    <tr>
                      <td>无人机外场检测</td>
                      <td>1人：主操作手1人</td>
                      <td>无人机</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>叶片缺陷检查</td>
                      <td>2人：数据专业技术员2人</td>
                      <td>检查设备</td>
                      <td></td>
                    </tr>
                    <tr>
                      <td>无人机外场检查等</td>
                      <td>2人：主操作手1人、副操控员1人</td>
                      <td>防面检查设备</td>
                      <td></td>
                    </tr>
                  </tbody>
                </table>
              </div>

              <!-- 检测信息 -->
              <div class="content-section">
                <h3>三、检测信息</h3>
                <div class="inspection-summary">
                  <p><strong>检测区域：</strong>{{ reportForm.inspectionArea }}</p>
                  <p><strong>检测内容：</strong>{{ reportForm.inspectionContent }}</p>
                  <p><strong>检测方式：</strong>{{ reportForm.inspectionMethod }}</p>
                  <p><strong>检测人员：</strong>{{ Array.isArray(reportForm.inspectionPersonnel) ? reportForm.inspectionPersonnel.join('、') : reportForm.inspectionPersonnel }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 第三步：导出报告 -->
        <div v-if="currentStep === 2" class="step-content">
          <div class="export-content">
            <div class="success-icon">
              <icon-check-circle-fill :size="64" style="color: #52c41a" />
            </div>
            <h3 class="success-title">报告已准备就绪，点击下方按钮导出Word文档</h3>
            <div class="export-actions">
              <a-button type="primary" size="large" @click="handleExportWord" :loading="exporting">
                <template #icon><icon-download /></template>
                导出Word报告
              </a-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作按钮 -->
      <div class="wizard-footer">
        <a-space>
          <a-button v-if="currentStep > 0" @click="handlePrevStep">上一步</a-button>
          <a-button @click="handleCancel">取消</a-button>
          <a-button v-if="currentStep < 2" type="primary" @click="handleNextStep">下一步</a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import { IconCheckCircleFill, IconDownload } from '@arco-design/web-vue/es/icon'
import dayjs from 'dayjs'

interface UnitData {
  id: string
  name: string
  type: 'project' | 'turbine' | 'part'
}

const props = defineProps<{
  isVisible: boolean
  unitData?: UnitData
}>()

const emit = defineEmits<{
  'update:isVisible': [visible: boolean]
  'generate': [reportData: any]
}>()

const visible = computed({
  get: () => props.isVisible,
  set: (value) => emit('update:isVisible', value)
})

const currentStep = ref(0)
const exporting = ref(false)

// 报告表单数据
const reportForm = ref({
  manufacturer: '风力发电机组叶片检查报告',
  producer: '2023年度定期检查',
  inspectionUnit: '风电运维中心',
  reportDate: dayjs(),
  inspectionDate: dayjs(),
  inspectionArea: '风电场1号机组',
  inspectionContent: '叶片外观检查、内部结构检查、表面缺陷检测',
  inspectionMethod: '无人机检测、人工检查',
  inspectionPersonnel: ['张三', '李四', '王五'],
  reportDeadline: '十五',
  reportQuantity: '叁份',
  reportFormat: '纸七'
})

// 当单位数据变化时，更新报告数据
watch(() => props.unitData, (newUnitData) => {
  if (newUnitData) {
    reportForm.value.manufacturer = `${newUnitData.name}检查报告`
    reportForm.value.inspectionArea = `${newUnitData.name}`
  }
}, { immediate: true })

// 格式化日期
const formatDate = (date: any): string => {
  if (!date) return ''
  return dayjs(date).format('YYYY-MM-DD')
}

// 处理步骤切换
const handleNextStep = () => {
  if (currentStep.value < 2) {
    currentStep.value++
  }
}

const handlePrevStep = () => {
  if (currentStep.value > 0) {
    currentStep.value--
  }
}

// 处理取消
const handleCancel = () => {
  visible.value = false
  currentStep.value = 0
}

// 处理导出Word
const handleExportWord = async () => {
  try {
    exporting.value = true
    
    // 这里应该调用后端接口生成和下载Word文档
    const reportData = {
      ...reportForm.value,
      reportDate: formatDate(reportForm.value.reportDate),
      inspectionDate: formatDate(reportForm.value.inspectionDate),
      inspectionPersonnel: Array.isArray(reportForm.value.inspectionPersonnel) 
        ? reportForm.value.inspectionPersonnel.join('、') 
        : reportForm.value.inspectionPersonnel
    }
    
    // 模拟下载延迟
    await new Promise(resolve => setTimeout(resolve, 2000))
    
    Message.success('Word报告已生成并下载')
    emit('generate', reportData)
    visible.value = false
    currentStep.value = 0
  } catch (error) {
    console.error('导出报告失败:', error)
    Message.error('导出报告失败')
  } finally {
    exporting.value = false
  }
}
</script>

<style scoped lang="scss">
.report-wizard {
  .wizard-header {
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 24px;

    .wizard-steps {
      max-width: 600px;
      margin: 0 auto;
    }
  }

  .wizard-content {
    min-height: 500px;
    padding: 0 24px;

    .step-content {
      .form-sections {
        .form-section {
          margin-bottom: 32px;

          .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #1d2129;
            margin-bottom: 16px;
            padding-bottom: 8px;
            border-bottom: 2px solid #165dff;
          }
        }
      }

      .report-preview {
        background: white;
        padding: 24px;
        border: 1px solid #e5e6eb;
        border-radius: 6px;
        max-height: 600px;
        overflow-y: auto;

        .preview-header {
          text-align: center;
          margin-bottom: 32px;

          .report-title {
            font-size: 24px;
            font-weight: 600;
            color: #1d2129;
            margin-bottom: 8px;
          }

          .report-subtitle {
            font-size: 18px;
            color: #4e5969;
            margin-bottom: 0;
          }
        }

        .preview-content {
          .content-section {
            margin-bottom: 24px;

            h3 {
              font-size: 16px;
              font-weight: 600;
              color: #1d2129;
              margin-bottom: 12px;
            }

            .info-table {
              width: 100%;
              border-collapse: collapse;
              margin-bottom: 16px;

              td {
                padding: 8px 12px;
                border: 1px solid #e5e6eb;
                font-size: 14px;

                &.label {
                  background: #f7f8fa;
                  font-weight: 500;
                  width: 120px;
                }
              }
            }

            .inspection-summary {
              p {
                margin-bottom: 8px;
                font-size: 14px;
                line-height: 1.6;
              }
            }
          }
        }
      }

      .export-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 60px 0;

        .success-icon {
          margin-bottom: 24px;
        }

        .success-title {
          font-size: 18px;
          color: #1d2129;
          margin-bottom: 32px;
        }

        .export-actions {
          .arco-btn {
            font-size: 16px;
            height: 44px;
            padding: 0 32px;
          }
        }
      }
    }
  }

  .wizard-footer {
    padding: 16px 24px 0;
    border-top: 1px solid #f0f0f0;
    margin-top: 24px;
    text-align: right;
  }
}

// 美化滚动条
.report-preview::-webkit-scrollbar {
  width: 6px;
}

.report-preview::-webkit-scrollbar-track {
  background: #f1f3f4;
  border-radius: 3px;
}

.report-preview::-webkit-scrollbar-thumb {
  background: #c1c4c7;
  border-radius: 3px;

  &:hover {
    background: #a8abb2;
  }
}
</style>