<template>
  <div class="file-submission-panel">
    <!-- 已生成标书文件 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <h3>
            <el-icon><Document /></el-icon>
            已生成标书文件
          </h3>
        </div>
      </template>

      <!-- 商务标书 -->
      <div class="document-item">
        <div class="doc-icon">📑</div>
        <div class="doc-content">
          <div class="doc-header">
            <h4>商务标书</h4>
            <el-tag type="success" size="large">
              <el-icon><CircleCheck /></el-icon>
              {{ businessDoc.status }}
            </el-tag>
          </div>
          <div class="doc-details">
            <div class="detail-row">
              <span class="label">文件名称:</span>
              <span class="value">{{ businessDoc.fileName }}</span>
            </div>
            <div class="detail-row">
              <span class="label">生成时间:</span>
              <span class="value">{{ businessDoc.generateTime }}</span>
            </div>
            <div class="detail-row">
              <span class="label">文件大小:</span>
              <span class="value">{{ businessDoc.fileSize }}</span>
            </div>
            <div class="detail-row">
              <span class="label">页数:</span>
              <span class="value">{{ businessDoc.pages }}页</span>
            </div>
          </div>
          <div class="doc-actions">
            <el-button size="small" @click="previewDoc(businessDoc)">
              <el-icon><View /></el-icon>
              预览
            </el-button>
            <el-button size="small" type="primary" @click="downloadDoc(businessDoc)">
              <el-icon><Download /></el-icon>
              下载
            </el-button>
            <el-button size="small" @click="regenerateDoc(businessDoc)">
              <el-icon><Refresh /></el-icon>
              重新生成
            </el-button>
          </div>
        </div>
      </div>

      <el-divider />

      <!-- 技术标书 -->
      <div class="document-item">
        <div class="doc-icon">📘</div>
        <div class="doc-content">
          <div class="doc-header">
            <h4>技术标书</h4>
            <el-tag type="success" size="large">
              <el-icon><CircleCheck /></el-icon>
              {{ technicalDoc.status }}
            </el-tag>
          </div>
          <div class="doc-details">
            <div class="detail-row">
              <span class="label">文件名称:</span>
              <span class="value">{{ technicalDoc.fileName }}</span>
            </div>
            <div class="detail-row">
              <span class="label">生成时间:</span>
              <span class="value">{{ technicalDoc.generateTime }}</span>
            </div>
            <div class="detail-row">
              <span class="label">文件大小:</span>
              <span class="value">{{ technicalDoc.fileSize }}</span>
            </div>
            <div class="detail-row">
              <span class="label">页数:</span>
              <span class="value">{{ technicalDoc.pages }}页</span>
            </div>
          </div>
          <div class="doc-actions">
            <el-button size="small" @click="previewDoc(technicalDoc)">
              <el-icon><View /></el-icon>
              预览
            </el-button>
            <el-button size="small" type="primary" @click="downloadDoc(technicalDoc)">
              <el-icon><Download /></el-icon>
              下载
            </el-button>
            <el-button size="small" @click="regenerateDoc(technicalDoc)">
              <el-icon><Refresh /></el-icon>
              重新生成
            </el-button>
          </div>
        </div>
      </div>

    </el-card>

    <!-- 关键时间节点 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <h3>
            <el-icon><Calendar /></el-icon>
            关键时间节点
          </h3>
        </div>
      </template>

      <el-timeline>
        <el-timeline-item
          v-for="(milestone, index) in timeMilestones"
          :key="index"
          :timestamp="milestone.time"
          :type="milestone.type"
        >
          <div class="milestone-content">
            <span>{{ milestone.label }}</span>
            <el-tag v-if="milestone.countdown" type="warning" size="small">
              <el-icon><Clock /></el-icon>
              {{ milestone.countdown }}
            </el-tag>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-card>

    <!-- 提交前检查清单 -->
    <el-card class="section-card">
      <template #header>
        <div class="card-header">
          <h3>
            <el-icon><Warning /></el-icon>
            提交前检查清单
          </h3>
          <div class="checklist-progress">
            <span>完成度: {{ checklistProgress }}%</span>
            <el-progress 
              :percentage="checklistProgress" 
              :color="checklistProgress === 100 ? '#10b981' : '#f59e0b'"
              style="width: 200px;"
            />
          </div>
        </div>
      </template>

      <div class="checklist">
        <el-checkbox-group v-model="checkedItems" @change="updateProgress">
          <div 
            v-for="item in checklistItems" 
            :key="item.id"
            class="checklist-item"
          >
            <el-checkbox :label="item.id">
              <span v-if="!item.editing">{{ item.label }}</span>
              <el-input 
                v-else
                v-model="item.label"
                size="small"
                style="width: 300px;"
                @blur="item.editing = false"
                @keyup.enter="item.editing = false"
              />
            </el-checkbox>
            <div class="item-actions">
              <el-tag v-if="item.required" type="danger" size="small">必须</el-tag>
              <el-button 
                v-if="!item.editing"
                link 
                type="primary" 
                size="small"
                @click="editItem(item)"
              >
                <el-icon><Edit /></el-icon>
                编辑
              </el-button>
              <el-button 
                link 
                type="danger" 
                size="small"
                @click="deleteItem(item.id)"
              >
                <el-icon><Delete /></el-icon>
                删除
              </el-button>
            </div>
          </div>
        </el-checkbox-group>

        <!-- 添加新项按钮 -->
        <el-button 
          class="add-item-btn"
          type="primary" 
          plain
          @click="showAddItemDialog = true"
        >
          <el-icon><Plus /></el-icon>
          添加检查项
        </el-button>
      </div>

      <div class="action-buttons">
        <el-button 
          type="success" 
          size="large"
          :disabled="checklistProgress < 100"
          @click="markAsSubmitted"
        >
          <el-icon><CircleCheck /></el-icon>
          标记为已提交
        </el-button>
        <el-button size="large" @click="setReminder">
          <el-icon><Bell /></el-icon>
          设置提醒
        </el-button>
        <el-button size="large" @click="exportChecklist">
          <el-icon><Download /></el-icon>
          导出提交清单
        </el-button>
      </div>
    </el-card>

    <!-- 添加检查项对话框 -->
    <el-dialog
      v-model="showAddItemDialog"
      title="添加检查项"
      width="500px"
    >
      <el-form :model="newItemForm" label-width="80px">
        <el-form-item label="检查项">
          <el-input 
            v-model="newItemForm.label" 
            placeholder="请输入检查项内容"
            maxlength="50"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="是否必须">
          <el-switch v-model="newItemForm.required" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAddItemDialog = false">取消</el-button>
        <el-button type="primary" @click="addNewItem">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Document, CircleCheck, View, Download, Refresh, 
  Calendar, Warning, Edit, Bell, Clock, Delete, Plus
} from '@element-plus/icons-vue'

const props = defineProps({
  project: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update'])

// 文档数据
const businessDoc = ref({
  fileName: '某数据中心发电机组采购-商务标.pdf',
  generateTime: '2024-12-08 14:30:25',
  fileSize: '15.6 MB',
  pages: 85,
  status: '已完成'
})

const technicalDoc = ref({
  fileName: '某数据中心发电机组采购-技术标.pdf',
  generateTime: '2024-12-08 15:45:10',
  fileSize: '28.3 MB',
  pages: 156,
  status: '已完成'
})

// 时间节点
const timeMilestones = ref([
  {
    label: '标书生成开始',
    time: '2024-12-08 09:00:00',
    type: 'success'
  },
  {
    label: '标书生成完成',
    time: '2024-12-09 10:30:00',
    type: 'success'
  },
  {
    label: '内部审核时间',
    time: '2024-12-09 14:00:00 - 16:30:00',
    type: 'success'
  },
  {
    label: '投标截止时间',
    time: '2024-12-14 17:00:00',
    type: 'warning',
    countdown: '还剩5天3小时'
  },
  {
    label: '提交方式',
    time: '线上提交 + 纸质文件',
    type: 'info'
  }
])

// 检查清单
const checklistItems = ref([
  { id: 1, label: '商务标完整性检查', required: true, editing: false },
  { id: 2, label: '技术标完整性检查', required: true, editing: false },
  { id: 3, label: '保证金缴纳凭证', required: true, editing: false },
  { id: 4, label: '资质证书齐全', required: true, editing: false },
  { id: 5, label: '授权委托书签字盖章', required: false, editing: false },
  { id: 6, label: '纸质文件打印装订', required: false, editing: false },
  { id: 7, label: '投标文件密封完好', required: false, editing: false }
])

const checkedItems = ref([1, 2, 3, 4, 5])

const checklistProgress = computed(() => {
  return Math.round((checkedItems.value.length / checklistItems.value.length) * 100)
})

// 新增检查项相关
const showAddItemDialog = ref(false)
const newItemForm = ref({
  label: '',
  required: false
})

let nextItemId = 8

// 方法
const previewDoc = (doc) => {
  ElMessage.info(`预览文件: ${doc.fileName}`)
}

const downloadDoc = (doc) => {
  ElMessage.success(`下载文件: ${doc.fileName}`)
}

const regenerateDoc = (doc) => {
  ElMessage.info(`重新生成: ${doc.fileName}`)
}

const updateProgress = () => {
  // 进度更新逻辑
}

const markAsSubmitted = () => {
  ElMessage.success('项目已标记为已提交')
  emit('update')
}

const setReminder = () => {
  ElMessage.success('提醒已设置')
}

const exportChecklist = () => {
  ElMessage.success('提交清单已导出')
}

// 编辑检查项
const editItem = (item) => {
  item.editing = true
}

// 删除检查项
const deleteItem = (id) => {
  ElMessageBox.confirm('确定要删除这个检查项吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    const index = checklistItems.value.findIndex(item => item.id === id)
    if (index > -1) {
      checklistItems.value.splice(index, 1)
      // 同时从已选中项中移除
      const checkedIndex = checkedItems.value.indexOf(id)
      if (checkedIndex > -1) {
        checkedItems.value.splice(checkedIndex, 1)
      }
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 添加新检查项
const addNewItem = () => {
  if (!newItemForm.value.label.trim()) {
    ElMessage.warning('请输入检查项内容')
    return
  }
  
  checklistItems.value.push({
    id: nextItemId++,
    label: newItemForm.value.label,
    required: newItemForm.value.required,
    editing: false
  })
  
  ElMessage.success('添加成功')
  showAddItemDialog.value = false
  newItemForm.value = {
    label: '',
    required: false
  }
}
</script>

<style lang="scss" scoped>
.file-submission-panel {
  .section-card {
    margin-bottom: 24px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      h3 {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        font-weight: 600;
        color: #1f2937;
        margin: 0;
      }

      .checklist-progress {
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        color: #6b7280;
      }
    }
  }

  .document-item {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #f9fafb;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s;

    &:hover {
      border-color: #a78bfa;
      box-shadow: 0 4px 12px rgba(167, 139, 250, 0.1);
    }

    .doc-icon {
      font-size: 48px;
      flex-shrink: 0;
    }

    .doc-content {
      flex: 1;

      .doc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 2px solid #e5e7eb;

        h4 {
          font-size: 16px;
          font-weight: 600;
          color: #1f2937;
          margin: 0;
        }
      }

      .doc-details {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 16px;

        .detail-row {
          display: flex;
          align-items: center;
          gap: 8px;

          .label {
            font-size: 13px;
            color: #6b7280;
            min-width: 80px;
          }

          .value {
            font-size: 14px;
            color: #1f2937;
            font-weight: 500;

            &.price-amount {
              color: #ef4444;
              font-size: 16px;
              font-weight: 600;
            }
          }
        }
      }

      .doc-actions {
        display: flex;
        gap: 8px;
      }
    }
  }

  .milestone-content {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .checklist {
    .checklist-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 12px 16px;
      margin-bottom: 8px;
      background: #f9fafb;
      border-radius: 8px;
      transition: all 0.2s;

      &:hover {
        background: #f3f4f6;
        
        .item-actions {
          opacity: 1;
        }
      }

      :deep(.el-checkbox) {
        flex: 1;
      }

      .item-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        opacity: 0.6;
        transition: opacity 0.2s;

        .el-tag {
          margin-right: 8px;
        }
      }
    }

    .add-item-btn {
      width: 100%;
      margin-top: 16px;
      border-style: dashed;
      
      &:hover {
        border-color: #7c3aed;
        color: #7c3aed;
      }
    }
  }

  .action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
  }
}
</style>
