<template>
  <GiPageLayout>
    <template #header>
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <a-button type="text" size="small" @click="goBack">
            <template #icon><icon-arrow-left /></template>
          </a-button>
          <h2 class="ml-2">{{ projectTitle }}</h2>
          <a-tag class="ml-2" :color="getStatusColor(projectData.status)" v-if="projectData.status">{{ projectData.status }}</a-tag>
        </div>
        <div class="flex items-center">
          <a-button v-permission="['project:update']" type="primary" class="mr-2" @click="editProject">
            <template #icon><icon-edit /></template>编辑项目
          </a-button>
          <a-button v-permission="['project:delete']" status="danger" @click="confirmDelete">
            <template #icon><icon-delete /></template>删除项目
          </a-button>
        </div>
      </div>
    </template>

    <a-tabs default-active-key="1">
      <a-tab-pane key="1" title="详细信息">
        <a-card class="general-card" title="项目基本信息">
          <a-descriptions :data="projectInfos" layout="horizontal" bordered column="3" />
          
          <a-divider />
          
          <div class="card-header">
            <div class="card-title">项目收支情况</div>
          </div>
          
          <div class="finance-cards grid grid-cols-3 gap-4 mb-6">
            <a-card class="finance-card">
              <div class="finance-title">利润</div>
              <div class="finance-amount" :class="{ 'text-danger': finance.profit < 0 }">{{ finance.profit.toFixed(2) }}</div>
            </a-card>
            <a-card class="finance-card">
              <div class="finance-title">收入</div>
              <div class="finance-amount text-success">{{ finance.income.toFixed(2) }}</div>
            </a-card>
            <a-card class="finance-card">
              <div class="finance-title">支出</div>
              <div class="finance-amount text-warning">{{ finance.expense.toFixed(2) }}</div>
            </a-card>
          </div>
          
          <a-descriptions title="合同金额" :data="contractInfos" layout="horizontal" bordered />
        </a-card>
      </a-tab-pane>
        
      <a-tab-pane key="2" title="执行情况">
        <a-card class="general-card" title="项目进度跟踪">
          <div class="flex items-center justify-between mb-6">
            <div class="flex-1">
              <h3>项目进度: {{ projectData.progress || 0 }}%</h3>
              <a-progress :percent="projectData.progress || 0" />
            </div>
            <div>
              <a-button type="primary" class="ml-2" @click="openAddTaskModal">
                <template #icon><icon-plus /></template>新建任务
              </a-button>
              <a-button type="outline" class="ml-2" @click="openAddTaskGroupModal">
                <template #icon><icon-plus /></template>新增任务组
              </a-button>
            </div>
          </div>
            
          <a-card :bordered="false" class="mt-4">
            <a-row :gutter="16" class="task-container">
              <a-col :span="6" v-for="(column, index) in taskColumns" :key="index">
                <div class="task-column">
                  <div class="task-column-header" :class="getTaskColumnHeaderClass(column.status)">
                    <span class="column-title">{{ column.title }}</span>
                    <a-tag>{{ column.tasks.length }}</a-tag>
                  </div>
                  
                  <div class="task-list">
                    <div 
                      v-for="task in column.tasks" 
                      :key="task.id" 
                      class="task-card"
                      @click="openTaskDetail(task)"
                    >
                      <div class="task-card-title">{{ task.taskName }}</div>
                      <div class="task-card-desc text-gray-500 text-xs mt-1">{{ task.description || '暂无描述' }}</div>
                      <div class="task-card-footer flex items-center justify-between mt-2">
                        <div class="flex items-center">
                          <icon-calendar class="mr-1 text-gray-500" />
                          <span class="text-xs">{{ formatDate(task.taskPeriod?.[0]) }} - {{ formatDate(task.taskPeriod?.[1]) }}</span>
                        </div>
                        <div class="text-xs">
                          <a-progress :percent="task.progress" size="small" />
                        </div>
                      </div>
                      <div class="task-card-members mt-2">
                        <a-avatar :size="24" v-for="(user, idx) in task.participants?.slice(0, 3)" :key="idx">{{ user.substring(0, 1) }}</a-avatar>
                        <a-avatar :size="24" v-if="task.participants?.length > 3">+{{ task.participants.length - 3 }}</a-avatar>
                      </div>
                    </div>
                    
                                    <div
                  class="add-task-placeholder"
                  @click="handleAddTaskClick(column.status)"
                >
                  <icon-plus />
                  <span>添加任务</span>
                </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </a-card>
      </a-tab-pane>
        
      <a-tab-pane key="3" title="附件">
        <a-card class="general-card" title="项目附件">
          <div class="attachment-section">
            <a-upload
              list-type="picture-card"
              :file-list="attachments"
              @change="handleAttachmentChange"
            >
              <template #upload-button>
                <div class="upload-button-content">
                  <icon-plus />
                  <div class="mt-1">上传附件</div>
                </div>
              </template>
            </a-upload>
          </div>
        </a-card>
      </a-tab-pane>
    </a-tabs>

    <!-- 新增任务弹窗 -->
    <a-modal
      v-model:visible="addTaskModalVisible"
      title="新增任务"
      @cancel="resetTaskForm"
      @before-ok="handleTaskSubmit"
    >
      <a-form ref="taskFormRef" :model="taskForm" label-position="left" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
        <a-form-item field="taskName" label="任务名称" required>
          <a-input v-model="taskForm.taskName" placeholder="请输入" />
        </a-form-item>
        <a-form-item field="taskCode" label="任务编号" required>
          <a-input v-model="taskForm.taskCode" placeholder="请输入" />
        </a-form-item>
        <a-form-item field="responsiblePerson" label="负责人" required>
          <a-select v-model="taskForm.responsiblePerson" placeholder="请选择">
            <a-option value="请选择">请选择</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="participants" label="参与人">
          <a-select v-model="taskForm.participants" multiple placeholder="请选择">
            <a-option value="全部员工">全部员工</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="taskPeriod" label="任务计划周期" required>
          <a-range-picker v-model="taskForm.taskPeriod" style="width: 100%" />
        </a-form-item>
        <a-form-item field="plannedHours" label="计划工时" required>
          <a-input-number v-model="taskForm.plannedHours" style="width: 100%" />
        </a-form-item>
        <a-form-item field="description" label="备注说明">
          <a-textarea v-model="taskForm.description" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 新增任务组弹窗 -->
    <a-modal
      v-model:visible="addTaskGroupModalVisible"
      title="新增任务组"
      @cancel="resetTaskGroupForm"
      @before-ok="handleTaskGroupSubmit"
    >
      <a-form ref="taskGroupFormRef" :model="taskGroupForm" label-position="left" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
        <a-form-item field="groupName" label="组名称" required>
          <a-input v-model="taskGroupForm.groupName" placeholder="请输入" />
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 任务详情弹窗 -->
    <a-modal
      v-model:visible="taskDetailModalVisible"
      title="任务详情"
      @cancel="closeTaskDetail"
    >
      <div v-if="currentTask">
        <a-descriptions :data="taskDetailInfos" layout="horizontal" bordered />
        
        <div class="mt-4">
          <h4>任务进度</h4>
          <a-progress :percent="currentTask.progress || 0" />
          
          <a-form class="mt-4">
            <a-form-item label="更新进度">
              <a-input-number v-model="updateProgress" :min="0" :max="100" style="width: 100%" />
            </a-form-item>
            <a-button type="primary" @click="submitProgressUpdate">更新</a-button>
          </a-form>
        </div>
      </div>
    </a-modal>
  </GiPageLayout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Message, Modal } from '@arco-design/web-vue'
import { getProject, deleteProject } from '@/apis/project'
import { addTask, addTaskGroup, listTask, updateTaskProgress } from '@/apis/project/task'
import dayjs from 'dayjs'

defineOptions({ name: 'ProjectDetail' })

const route = useRoute()
const router = useRouter()
const projectId = computed(() => Number(route.params.id))
const projectData = ref<any>({})
const attachments = ref([])
const taskFormRef = ref()
const taskGroupFormRef = ref()
const loading = ref(false)
const addTaskModalVisible = ref(false)
const addTaskGroupModalVisible = ref(false)
const taskDetailModalVisible = ref(false)
const currentTask = ref<any>(null)
const updateProgress = ref(0)
const initialTaskStatus = ref('')

// 任务看板列
const taskColumns = ref([
  { title: '计划中', status: '计划中', tasks: [] as any[] },
  { title: '正在做', status: '正在做', tasks: [] as any[] },
  { title: '待复核', status: '待复核', tasks: [] as any[] },
  { title: '已完成', status: '已完成', tasks: [] as any[] },
  { title: '其他', status: '其他', tasks: [] as any[] }
])

const taskForm = reactive({
  taskName: '',
  taskCode: '',
  projectId: projectId.value,
  responsiblePerson: '',
  participants: [] as string[],
  taskPeriod: [] as string[],
  plannedHours: 1,
  status: '',
  description: ''
})

const taskGroupForm = reactive({
  groupName: '',
  projectId: projectId.value
})

const finance = reactive({
  profit: -6160.84,
  income: 0.00,
  expense: 6160.84
})

const projectTitle = computed(() => {
  return projectData.value?.projectName || '项目详情'
})

const projectInfos = computed(() => [
  { label: '项目编号', value: projectData.value?.projectCode },
  { label: '项目负责人', value: projectData.value?.projectManager },
  { label: '参与人', value: projectData.value?.projectStaff?.join(', ') },
  { label: '项目周期', value: projectData.value?.projectPeriod ? `${projectData.value.projectPeriod[0]} 至 ${projectData.value.projectPeriod[1]}` : '' },
  { label: '客户', value: projectData.value?.commissionUnit },
  { label: '备注', value: projectData.value?.projectIntro || '无' }
])

const contractInfos = computed(() => [
  { label: '合同金额', value: '0.00' },
  { label: '结算金额', value: '0.00' },
  { label: '实收金额', value: '0.00' },
  { label: '开票金额', value: '0.00' }
])

const taskDetailInfos = computed(() => {
  if (!currentTask.value) return []
  
  return [
    { label: '任务名称', value: currentTask.value.taskName },
    { label: '任务编号', value: currentTask.value.taskCode },
    { label: '负责人', value: currentTask.value.responsiblePerson },
    { label: '参与人', value: currentTask.value.participants?.join(', ') },
    { label: '任务周期', value: currentTask.value.taskPeriod ? `${formatDate(currentTask.value.taskPeriod[0])} 至 ${formatDate(currentTask.value.taskPeriod[1])}` : '' },
    { label: '计划工时', value: `${currentTask.value.plannedHours || 0} 小时` },
    { label: '状态', value: currentTask.value.status },
    { label: '描述', value: currentTask.value.description || '无' }
  ]
})

const getStatusColor = (status: string) => {
  switch (status) {
    case '施工中':
      return 'blue'
    case '已完成':
      return 'green'
    case '未开始':
      return 'orange'
    default:
      return 'gray'
  }
}

const getTaskColumnHeaderClass = (status: string) => {
  switch (status) {
    case '计划中':
      return 'bg-gray-100'
    case '正在做':
      return 'bg-blue-50'
    case '待复核':
      return 'bg-orange-50'
    case '已完成':
      return 'bg-green-50'
    default:
      return 'bg-gray-50'
  }
}

const formatDate = (date: string) => {
  if (!date) return ''
  return dayjs(date).format('YYYY-MM-DD')
}

const fetchProjectData = async () => {
  loading.value = true
  try {
    const res = await getProject(projectId.value)
    projectData.value = res.data
  } catch (error) {
    console.error(error)
    Message.error('获取项目详情失败')
  } finally {
    loading.value = false
  }
}

const fetchTaskData = async () => {
  try {
    const res = await listTask({ 
      projectId: projectId.value,
      page: 1,
      size: 100
    })
    
    // 重置任务列表
    taskColumns.value.forEach(column => {
      column.tasks = []
    })
    
    const tasks = res.data?.list || []
    
    // 分配任务到对应的列
    tasks.forEach((task: any) => {
      const column = taskColumns.value.find(col => col.status === task.status)
      if (column) {
        column.tasks.push(task)
      } else {
        taskColumns.value.find(col => col.status === '其他')?.tasks.push(task)
      }
    })
  } catch (error) {
    console.error(error)
    Message.error('获取任务数据失败')
  }
}

const goBack = () => {
  router.push('/project')
}

const editProject = () => {
  Message.info('编辑项目功能开发中')
}

const confirmDelete = () => {
  Modal.warning({
    title: '确认删除',
    content: `确定要删除项目"${projectData.value?.projectName}"吗？`,
    onOk: () => deleteProjectItem(),
  })
}

const deleteProjectItem = async () => {
  try {
    await deleteProject(projectId.value)
    Message.success('删除成功')
    router.push('/project')
  } catch (error) {
    console.error(error)
    Message.error('删除失败')
  }
}

const handleAttachmentChange = (files: any) => {
  attachments.value = files
}

const resetTaskForm = () => {
  taskFormRef.value?.resetFields()
  taskForm.status = initialTaskStatus.value
}

const resetTaskGroupForm = () => {
  taskGroupFormRef.value?.resetFields()
}

// 添加任务的函数，接受状态参数
const openAddTaskModal = (status: string = '计划中') => {
  initialTaskStatus.value = status
  taskForm.status = status
  taskForm.projectId = projectId.value
  addTaskModalVisible.value = true
}

// 作为点击事件的处理函数
const handleAddTaskClick = (status: string) => {
  return (event: MouseEvent) => {
    event.preventDefault()
    openAddTaskModal(status)
  }
}

const openAddTaskGroupModal = () => {
  taskGroupForm.projectId = projectId.value
  addTaskGroupModalVisible.value = true
}

const handleTaskSubmit = async () => {
  const valid = await taskFormRef.value?.validate()
  if (!valid) return false

  try {
    await addTask({
      ...taskForm,
      projectId: projectId.value
    })
    Message.success('添加任务成功')
    fetchTaskData()
    return true
  } catch (error) {
    console.error(error)
    Message.error('添加任务失败')
    return false
  }
}

const handleTaskGroupSubmit = async () => {
  const valid = await taskGroupFormRef.value?.validate()
  if (!valid) return false

  try {
    await addTaskGroup({
      ...taskGroupForm,
      projectId: projectId.value
    })
    Message.success('添加任务组成功')
    return true
  } catch (error) {
    console.error(error)
    Message.error('添加任务组失败')
    return false
  }
}

const openTaskDetail = (task: any) => {
  currentTask.value = task
  updateProgress.value = task.progress || 0
  taskDetailModalVisible.value = true
}

const closeTaskDetail = () => {
  currentTask.value = null
  updateProgress.value = 0
  taskDetailModalVisible.value = false
}

const submitProgressUpdate = async () => {
  if (!currentTask.value) return

  try {
    await updateTaskProgress({ progress: updateProgress.value }, currentTask.value.id)
    Message.success('更新进度成功')
    
    // 更新本地数据
    currentTask.value.progress = updateProgress.value
    
    // 刷新任务列表
    await fetchTaskData()
  } catch (error) {
    console.error(error)
    Message.error('更新进度失败')
  }
}

onMounted(() => {
  fetchProjectData()
  fetchTaskData()
})
</script>

<style scoped>
.finance-card {
  text-align: center;
}
.finance-title {
  color: #7f7f7f;
  font-size: 14px;
}
.finance-amount {
  font-size: 24px;
  font-weight: bold;
}
.text-danger {
  color: #f53f3f;
}
.text-success {
  color: #00b42a;
}
.text-warning {
  color: #ff7d00;
}
.task-container {
  overflow-x: auto;
  min-height: 600px;
}
.task-column {
  background-color: #f5f5f5;
  border-radius: 4px;
  height: 100%;
  min-height: 600px;
}
.task-column-header {
  padding: 12px;
  border-radius: 4px 4px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}
.task-list {
  padding: 8px;
}
.task-card {
  background-color: white;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s;
}
.task-card:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}
.task-card-title {
  font-weight: bold;
}
.task-card-members {
  display: flex;
  gap: 4px;
}
.add-task-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background-color: #e8e8e8;
  border-radius: 4px;
  color: #7f7f7f;
  cursor: pointer;
  gap: 8px;
}
.add-task-placeholder:hover {
  background-color: #d9d9d9;
}
.upload-button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #7f7f7f;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card-title {
  font-size: 16px;
  font-weight: bold;
}
.general-card {
  margin-bottom: 16px;
}
</style> 