<template>
  <div class="projects-page">
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">项目管理</h1>
        <p class="page-description">团队协作的核心，从规划到交付的全流程管理</p>
      </div>
      <div class="header-actions">
        <a-space>
          <a-button type="primary" @click="showCreateModal = true">
            <template #icon>
              <PlusOutlined />
            </template>
            新建项目
          </a-button>
          <a-button @click="exportProjects">导出</a-button>
        </a-space>
      </div>
    </div>

    <!-- 项目筛选 -->
    <a-card class="filter-card">
      <a-row :gutter="[16, 16]">
        <a-col :span="24" :md="12" :lg="8">
          <a-input-search
            v-model:value="searchKeyword"
            placeholder="搜索项目名称、负责人..."
            allow-clear
            @search="handleSearch"
          />
        </a-col>
        <a-col :span="24" :md="12" :lg="8">
          <a-select
            v-model:value="filterStatus"
            placeholder="项目状态"
            style="width: 100%"
            allow-clear
          >
            <a-select-option value="all">全部状态</a-select-option>
            <a-select-option value="planning">规划中</a-select-option>
            <a-select-option value="in_progress">进行中</a-select-option>
            <a-select-option value="delayed">已延期</a-select-option>
            <a-select-option value="completed">已完成</a-select-option>
            <a-select-option value="archived">已归档</a-select-option>
          </a-select>
        </a-col>
        <a-col :span="24" :md="12" :lg="8">
          <a-select
            v-model:value="filterOwner"
            placeholder="负责人"
            style="width: 100%"
            allow-clear
          >
            <a-select-option v-for="owner in owners" :key="owner" :value="owner">
              {{ owner }}
            </a-select-option>
          </a-select>
        </a-col>
      </a-row>
    </a-card>

    <!-- 项目网格 -->
    <div class="projects-grid">
      <a-card
        v-for="project in filteredProjects"
        :key="project.id"
        class="project-card"
        :class="{ 'highlight-card': project.priority === 'high' }"
      >
        <template #title>
          <div class="project-title">
            <span class="project-icon">{{ project.icon }}</span>
            <span>{{ project.name }}</span>
            <a-badge v-if="project.isNew" color="blue" text="NEW" class="new-badge" />
          </div>
        </template>
        
        <div class="project-meta">
          <div class="meta-item">
            <span class="meta-label">负责人</span>
            <span class="meta-value">{{ project.owner }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">截止日期</span>
            <span class="meta-value" :class="{ 'deadline-warning': isDeadlineWarning(project.deadline) }">
              {{ project.deadline }}
            </span>
          </div>
        </div>

        <div class="project-progress">
          <div class="progress-header">
            <span>项目进度</span>
            <span>{{ project.progress }}%</span>
          </div>
          <a-progress
            :percent="project.progress"
            :stroke-color="getProgressColor(project.progress)"
            :show-info="false"
            size="small"
          />
        </div>

        <div class="project-stats">
          <div class="stat-item">
            <div class="stat-number">{{ project.taskCount }}</div>
            <div class="stat-label">任务数</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ project.completedCount }}</div>
            <div class="stat-label">已完成</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">{{ project.memberCount }}</div>
            <div class="stat-label">成员数</div>
          </div>
        </div>

        <div class="project-tags">
          <a-tag v-for="tag in project.tags" :key="tag" color="blue">
            {{ tag }}
          </a-tag>
        </div>

        <template #actions>
          <a-space class="project-actions">
            <a-button type="link" size="small" @click="viewProject(project.id)">
              <EyeOutlined />
              查看
            </a-button>
            <a-button type="link" size="small" @click="editProject(project.id)">
              <EditOutlined />
              编辑
            </a-button>
            <a-button type="link" size="small" danger @click="archiveProject(project.id)">
              <DeleteOutlined />
              归档
            </a-button>
          </a-space>
        </template>
      </a-card>
    </div>

    <!-- 空状态 -->
    <div v-if="filteredProjects.length === 0" class="empty-state">
      <div class="empty-content">
        <span class="empty-icon">📋</span>
        <h3>暂无项目</h3>
        <p>点击"新建项目"按钮开始您的第一个项目</p>
        <a-button type="primary" @click="showCreateModal = true">创建项目</a-button>
      </div>
    </div>

    <!-- 新建项目模态框 -->
    <a-modal
      v-model:open="showCreateModal"
      title="新建项目"
      :footer="null"
      width="600px"
      @cancel="resetForm"
    >
      <a-form
        ref="formRef"
        :model="newProject"
        :rules="formRules"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="24">
            <a-form-item label="项目名称" name="name">
              <a-input v-model:value="newProject.name" placeholder="请输入项目名称" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="项目描述" name="description">
              <a-textarea
                v-model:value="newProject.description"
                placeholder="请输入项目描述"
                :rows="3"
                show-count
                :maxlength="500"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="负责人" name="owner">
              <a-select
                v-model:value="newProject.owner"
                placeholder="选择负责人"
                style="width: 100%"
              >
                <a-select-option v-for="owner in owners" :key="owner" :value="owner">
                  {{ owner }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="优先级" name="priority">
              <a-select
                v-model:value="newProject.priority"
                placeholder="选择优先级"
                style="width: 100%"
              >
                <a-select-option value="low">低</a-select-option>
                <a-select-option value="medium">中</a-select-option>
                <a-select-option value="high">高</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开始日期" name="startDate">
              <a-date-picker
                v-model:value="newProject.startDate"
                placeholder="选择开始日期"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="截止日期" name="deadline">
              <a-date-picker
                v-model:value="newProject.deadline"
                placeholder="选择截止日期"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="项目标签" name="tags">
              <a-select
                v-model:value="newProject.tags"
                mode="tags"
                placeholder="输入标签，按回车添加"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item>
          <a-space>
            <a-button type="primary" :loading="creating" @click="createProject">
              创建项目
            </a-button>
            <a-button @click="resetForm">重置</a-button>
          </a-space>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import type { FormInstance } from 'ant-design-vue'
import { PlusOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'

interface Project {
  id: number
  name: string
  description: string
  icon: string
  owner: string
  progress: number
  taskCount: number
  completedCount: number
  memberCount: number
  deadline: string
  priority: 'low' | 'medium' | 'high'
  status: 'planning' | 'in_progress' | 'delayed' | 'completed' | 'archived'
  tags: string[]
  isNew: boolean
  startDate: string
}

// 数据
const projects = ref<Project[]>([
  {
    id: 1,
    name: '智慧园区管理系统',
    description: '现代化的智慧园区综合管理平台，包含安防、能源、物业等功能模块',
    icon: '🏢',
    owner: '张三',
    progress: 85,
    taskCount: 42,
    completedCount: 36,
    memberCount: 8,
    deadline: '2024-10-30',
    priority: 'high',
    status: 'in_progress',
    tags: ['智慧园区', '物联网', '大数据'],
    isNew: true,
    startDate: '2024-08-01'
  },
  {
    id: 2,
    name: '客户关系管理升级',
    description: 'CRM系统升级，优化客户管理流程，提升销售效率',
    icon: '📊',
    owner: '李四',
    progress: 45,
    taskCount: 28,
    completedCount: 13,
    memberCount: 6,
    deadline: '2024-11-15',
    priority: 'medium',
    status: 'in_progress',
    tags: ['CRM', '销售', '客户管理'],
    isNew: false,
    startDate: '2024-09-01'
  },
  {
    id: 3,
    name: '移动端App开发',
    description: '新一代移动应用开发，包含iOS和Android双平台',
    icon: '📱',
    owner: '王五',
    progress: 92,
    taskCount: 35,
    completedCount: 32,
    memberCount: 10,
    deadline: '2024-10-25',
    priority: 'high',
    status: 'in_progress',
    tags: ['移动端', 'React Native', 'App'],
    isNew: false,
    startDate: '2024-07-15'
  },
  {
    id: 4,
    name: '数据中心建设',
    description: '企业级数据中心建设与迁移项目',
    icon: '🖥️',
    owner: '赵六',
    progress: 68,
    taskCount: 56,
    completedCount: 38,
    memberCount: 12,
    deadline: '2024-11-05',
    priority: 'high',
    status: 'delayed',
    tags: ['数据中心', '云计算', '服务器'],
    isNew: false,
    startDate: '2024-06-01'
  },
  {
    id: 5,
    name: 'Q4市场活动策划',
    description: '第四季度市场推广活动整体策划',
    icon: '🎯',
    owner: '钱七',
    progress: 20,
    taskCount: 18,
    completedCount: 4,
    memberCount: 5,
    deadline: '2024-12-10',
    priority: 'medium',
    status: 'planning',
    tags: ['市场活动', '推广', '策划'],
    isNew: true,
    startDate: '2024-10-01'
  },
  {
    id: 6,
    name: '内部分享平台',
    description: '企业内部知识分享与学习平台',
    icon: '📚',
    owner: '孙八',
    progress: 100,
    taskCount: 24,
    completedCount: 24,
    memberCount: 4,
    deadline: '2024-09-30',
    priority: 'low',
    status: 'completed',
    tags: ['知识管理', '学习平台', '内部工具'],
    isNew: false,
    startDate: '2024-07-01'
  }
])

// 负责人列表
const owners = computed(() => {
  const allOwners = projects.value.map(p => p.owner)
  return [...new Set(allOwners)]
})

// 筛选条件
const searchKeyword = ref('')
const filterStatus = ref('all')
const filterOwner = ref('')

// 筛选后的项目
const filteredProjects = computed(() => {
  return projects.value.filter(project => {
    // 搜索关键词
    if (searchKeyword.value) {
      const keyword = searchKeyword.value.toLowerCase()
      const matches = project.name.toLowerCase().includes(keyword) ||
                     project.description.toLowerCase().includes(keyword) ||
                     project.owner.toLowerCase().includes(keyword)
      if (!matches) return false
    }

    // 状态筛选
    if (filterStatus.value && filterStatus.value !== 'all') {
      if (project.status !== filterStatus.value) return false
    }

    // 负责人筛选
    if (filterOwner.value) {
      if (project.owner !== filterOwner.value) return false
    }

    return true
  })
})

// 新建项目相关
const showCreateModal = ref(false)
const creating = ref(false)
const formRef = ref<FormInstance>()
const newProject = ref({
  name: '',
  description: '',
  owner: '',
  priority: 'medium' as const,
  startDate: null,
  deadline: null,
  tags: []
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 50, message: '项目名称长度为2-50个字符', trigger: 'blur' }
  ],
  description: [
    { required: true, message: '请输入项目描述', trigger: 'blur' }
  ],
  owner: [
    { required: true, message: '请选择负责人', trigger: 'change' }
  ]
}

// 方法
function handleSearch() {
  // 搜索逻辑已在computed中实现
}

function getProgressColor(progress: number) {
  if (progress < 30) return '#ff4d4f'
  if (progress < 70) return '#faad14'
  return '#52c41a'
}

function isDeadlineWarning(deadline: string) {
  const deadlineDate = new Date(deadline)
  const today = new Date()
  const diffDays = Math.ceil((deadlineDate.getTime() - today.getTime()) / (1000 * 60 * 60 * 24))
  return diffDays <= 7 && diffDays > 0
}

function viewProject(id: number) {
  navigateTo(`/oa/projects/${id}`)
}

function editProject(id: number) {
  const project = projects.value.find(p => p.id === id)
  if (project) {
    Object.assign(newProject.value, {
      name: project.name,
      description: project.description,
      owner: project.owner,
      priority: project.priority,
      tags: [...project.tags]
    })
    showCreateModal.value = true
    message.info('编辑功能开发中...')
  }
}

function archiveProject(id: number) {
  const projectIndex = projects.value.findIndex(p => p.id === id)
  if (projectIndex !== -1) {
    projects.value[projectIndex].status = 'archived'
    message.success('项目已归档')
  }
}

function exportProjects() {
  const data = JSON.stringify(filteredProjects.value, null, 2)
  const blob = new Blob([data], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = `projects-${new Date().getTime()}.json`
  link.click()
  URL.revokeObjectURL(url)
  message.success('导出成功')
}

async function createProject() {
  try {
    await formRef.value?.validate()
    
    creating.value = true
    
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const newId = projects.value.length + 1
    const project: Project = {
      id: newId,
      name: newProject.value.name,
      description: newProject.value.description,
      icon: getRandomIcon(),
      owner: newProject.value.owner,
      progress: 0,
      taskCount: 0,
      completedCount: 0,
      memberCount: 1,
      deadline: newProject.value.deadline?.format('YYYY-MM-DD') || '',
      priority: newProject.value.priority,
      status: 'planning',
      tags: newProject.value.tags,
      isNew: true,
      startDate: newProject.value.startDate?.format('YYYY-MM-DD') || ''
    }
    
    projects.value.unshift(project)
    message.success('项目创建成功')
    showCreateModal.value = false
    resetForm()
    
  } catch (error) {
    console.error('创建失败:', error)
  } finally {
    creating.value = false
  }
}

function resetForm() {
  newProject.value = {
    name: '',
    description: '',
    owner: '',
    priority: 'medium',
    startDate: null,
    deadline: null,
    tags: []
  }
  formRef.value?.resetFields()
}

function getRandomIcon() {
  const icons = ['🏢', '📊', '📱', '🖥️', '🎯', '📚', '🚀', '💼', '🏭', '🏥', '🏫', '🛒']
  return icons[Math.floor(Math.random() * icons.length)]
}

onMounted(() => {
  // 页面初始化逻辑
})
</script>

<style scoped>
.projects-page {
  min-height: calc(100vh - 140px);
  max-width: 100%;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.header-content {
  flex: 1;
  min-width: 0;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
}

.page-description {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin: 4px 0 0;
}

.header-actions {
  flex-shrink: 0;
}

.filter-card {
  margin-bottom: 24px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.project-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.project-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.highlight-card {
  border-left: 4px solid #1890ff;
}

.project-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.project-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.new-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
}

.project-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}

.meta-item {
  display: flex;
  flex-direction: column;
}

.meta-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 2px;
}

.meta-value {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
}

.deadline-warning {
  color: #fa541c;
  font-weight: 600;
}

.project-progress {
  margin-bottom: 16px;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.65);
}

.project-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.stat-item {
  text-align: center;
  padding: 8px;
  background: #fafafa;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.stat-item:hover {
  background: #f0f0f0;
}

.stat-number {
  font-size: 18px;
  font-weight: 600;
  color: #1890ff;
  margin-bottom: 2px;
}

.stat-label {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
}

.project-tags {
  margin-top: auto;
  margin-bottom: 16px;
}

.project-tags :deep(.ant-tag) {
  margin-bottom: 4px;
}

.project-actions {
  width: 100%;
  display: flex;
  justify-content: center;
  border-top: 1px solid #f0f0f0;
  padding-top: 16px;
  margin-top: auto;
}

.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  text-align: center;
  background: #fafafa;
  border-radius: 8px;
  margin-top: 24px;
}

.empty-content {
  padding: 48px;
}

.empty-icon {
  font-size: 64px;
  margin-bottom: 16px;
  display: block;
}

.empty-state h3 {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 8px;
}

.empty-state p {
  color: rgba(0, 0, 0, 0.45);
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
  
  .page-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .header-actions {
    width: 100%;
  }
}
</style>