<template>
  <GiPageLayout>
    <GiTable
      row-key="id"
      title="立项管理"
      :data="dataList"
      :columns="tableColumns"
      :loading="loading"
      :scroll="{ x: '100%', y: '100%', minWidth: 1800 }"
      :pagination="pagination"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
      @refresh="search"
    >
      <template #top>
        <GiForm 
          v-model="searchForm" 
          search 
          :columns="queryFormColumns" 
          size="medium" 
          @search="search" 
          @reset="reset"
        />
      </template>
      
      <template #toolbar-left>
        <a-space>
          <a-button type="primary" @click="openAddModal">
            <template #icon><icon-plus /></template>
            <template #default>新建立项</template>
          </a-button>
          <a-button @click="batchApprove">
            <template #icon><icon-check /></template>
            <template #default>批量审批</template>
          </a-button>
        </a-space>
      </template>
      
      <!-- 项目类型标签 -->
      <template #projectType="{ record }">
        <a-tag :color="getTypeColor(record.projectType)">
          {{ record.projectType }}
        </a-tag>
      </template>
      
      <!-- 审批状态 -->
      <template #approvalStatus="{ record }">
        <a-tag :color="getStatusColor(record.approvalStatus)">
          {{ getStatusText(record.approvalStatus) }}
        </a-tag>
      </template>
      
      <!-- 预估收益 -->
      <template #estimatedRevenue="{ record }">
        <span class="font-medium text-green-600">￥{{ record.estimatedRevenue.toLocaleString() }}万</span>
      </template>
      
      <!-- 风险等级 -->
      <template #riskLevel="{ record }">
        <a-tag :color="getRiskColor(record.riskLevel)">
          {{ record.riskLevel }}
        </a-tag>
      </template>
      
      <!-- 操作列 -->
      <template #action="{ record }">
        <a-space>
          <a-link @click="viewDetail(record)">详情</a-link>
          <a-link @click="editRecord(record)" v-if="record.approvalStatus === 'draft'">编辑</a-link>
          <a-link @click="approveProject(record)" v-if="record.approvalStatus === 'pending'">审批</a-link>
          <a-link @click="startProject(record)" v-if="record.approvalStatus === 'approved'">启动项目</a-link>
        </a-space>
      </template>
    </GiTable>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'
import type { TableColumnData } from '@arco-design/web-vue'

// 搜索表单
let searchForm = reactive({
  projectName: '',
  projectCode: '',
  projectType: '',
  approvalStatus: '',
  submitDate: '',
  page: 1,
  size: 10
})

// 查询条件配置
const queryFormColumns = [
  {
    field: 'projectName',
    label: '项目名称',
    type: 'input' as const,
    props: {
      placeholder: '请输入项目名称'
    }
  },
  {
    field: 'projectType',
    label: '项目类型',
    type: 'select' as const,
    props: {
      placeholder: '请选择项目类型',
      options: [
        { label: '风电检测', value: '风电检测' },
        { label: '设备采购', value: '设备采购' },
        { label: '技术服务', value: '技术服务' },
        { label: '产品研发', value: '产品研发' },
        { label: '系统集成', value: '系统集成' }
      ]
    }
  },
  {
    field: 'approvalStatus',
    label: '审批状态',
    type: 'select' as const,
    props: {
      placeholder: '请选择审批状态',
      options: [
        { label: '草稿', value: 'draft' },
        { label: '待审批', value: 'pending' },
        { label: '已通过', value: 'approved' },
        { label: '已拒绝', value: 'rejected' },
        { label: '已启动', value: 'started' }
      ]
    }
  }
]

// 表格列配置
const tableColumns: TableColumnData[] = [
  { title: '项目编号', dataIndex: 'projectCode', width: 150 },
  { title: '项目名称', dataIndex: 'projectName', width: 300, ellipsis: true, tooltip: true },
  { title: '项目类型', dataIndex: 'projectType', slotName: 'projectType', width: 120 },
  { title: '申请人', dataIndex: 'applicant', width: 100 },
  { title: '预估收益', dataIndex: 'estimatedRevenue', slotName: 'estimatedRevenue', width: 120 },
  { title: '预估成本', dataIndex: 'estimatedCost', width: 120 },
  { title: '预计工期', dataIndex: 'estimatedDuration', width: 120 },
  { title: '风险等级', dataIndex: 'riskLevel', slotName: 'riskLevel', width: 100 },
  { title: '提交时间', dataIndex: 'submitTime', width: 160 },
  { title: '审批状态', dataIndex: 'approvalStatus', slotName: 'approvalStatus', width: 100 },
  { title: '审批人', dataIndex: 'approver', width: 100 },
  { title: '审批时间', dataIndex: 'approvalTime', width: 160 },
  { title: '项目经理', dataIndex: 'projectManager', width: 100 },
  { title: '优先级', dataIndex: 'priority', width: 80 },
  { title: '操作', slotName: 'action', width: 200, fixed: 'right' }
]

// 数据状态
const loading = ref(false)
const dataList = ref([
  {
    id: 1,
    projectCode: 'PI2024001',
    projectName: '华能新能源风电场智能监测系统集成项目',
    projectType: '系统集成',
    applicant: '李技术总监',
    estimatedRevenue: 850,
    estimatedCost: 520,
    estimatedDuration: '90天',
    riskLevel: '中风险',
    submitTime: '2024-02-01 10:30:00',
    approvalStatus: 'approved',
    approver: '王总经理',
    approvalTime: '2024-02-05 14:20:00',
    projectManager: '张项目经理',
    priority: 'A'
  },
  {
    id: 2,
    projectCode: 'PI2024002',
    projectName: '大唐风电场叶片维修机器人研发项目',
    projectType: '产品研发',
    applicant: '刘研发总监',
    estimatedRevenue: 1200,
    estimatedCost: 800,
    estimatedDuration: '180天',
    riskLevel: '高风险',
    submitTime: '2024-02-10 09:15:00',
    approvalStatus: 'pending',
    approver: '',
    approvalTime: '',
    projectManager: '赵项目经理',
    priority: 'A'
  },
  {
    id: 3,
    projectCode: 'PI2024003',
    projectName: '海上风电场防雷检测服务项目',
    projectType: '风电检测',
    applicant: '孙业务经理',
    estimatedRevenue: 380,
    estimatedCost: 190,
    estimatedDuration: '45天',
    riskLevel: '低风险',
    submitTime: '2024-02-15 16:45:00',
    approvalStatus: 'started',
    approver: '王总经理',
    approvalTime: '2024-02-18 11:00:00',
    projectManager: '陈项目经理',
    priority: 'B'
  }
])

const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 3,
  showTotal: true,
  showPageSize: true
})

// 获取项目类型颜色
const getTypeColor = (type: string) => {
  const colorMap: Record<string, string> = {
    '风电检测': 'blue',
    '设备采购': 'green',
    '技术服务': 'orange',
    '产品研发': 'purple',
    '系统集成': 'cyan'
  }
  return colorMap[type] || 'gray'
}

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: Record<string, string> = {
    'draft': 'gray',
    'pending': 'orange',
    'approved': 'green',
    'rejected': 'red',
    'started': 'blue'
  }
  return colorMap[status] || 'gray'
}

// 获取状态文本
const getStatusText = (status: string) => {
  const textMap: Record<string, string> = {
    'draft': '草稿',
    'pending': '待审批',
    'approved': '已通过',
    'rejected': '已拒绝',
    'started': '已启动'
  }
  return textMap[status] || status
}

// 获取风险等级颜色
const getRiskColor = (level: string) => {
  const colorMap: Record<string, string> = {
    '低风险': 'green',
    '中风险': 'orange',
    '高风险': 'red'
  }
  return colorMap[level] || 'gray'
}

// 搜索和重置
const search = async () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

const reset = () => {
  Object.assign(searchForm, {
    projectName: '',
    projectCode: '',
    projectType: '',
    approvalStatus: '',
    submitDate: '',
    page: 1,
    size: 10
  })
  pagination.current = 1
  search()
}

// 分页处理
const onPageChange = (page: number) => {
  searchForm.page = page
  pagination.current = page
  search()
}

const onPageSizeChange = (size: number) => {
  searchForm.size = size
  searchForm.page = 1
  pagination.pageSize = size
  pagination.current = 1
  search()
}

// 操作方法
const openAddModal = () => {
  Message.info('新建立项功能开发中...')
}

const batchApprove = () => {
  Message.info('批量审批功能开发中...')
}

const viewDetail = (record: any) => {
  Message.info(`查看立项详情: ${record.projectName}`)
}

const editRecord = (record: any) => {
  Message.info(`编辑立项: ${record.projectName}`)
}

const approveProject = (record: any) => {
  Message.info(`审批项目: ${record.projectName}`)
}

const startProject = (record: any) => {
  Message.info(`启动项目: ${record.projectName}`)
}

onMounted(() => {
  search()
})
</script> 