yunhaifinance/frontend/src/pages/approval/ExecutionManagement.tsx

import React, { useState, useEffect } from 'react';
import { Card, Table, Tag, Button, Space, Modal, Form, Input, Select, DatePicker, message, Tabs, Badge, Descriptions, Divider, List, Upload } from 'antd';
import { CheckOutlined, CloseOutlined, EyeOutlined, DollarOutlined, EditOutlined, UndoOutlined, ClockCircleOutlined, FileImageOutlined, UploadOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';

const { TextArea } = Input;

// 项目支出分类
const PROJECT_EXPENSE_CATEGORIES = [
  { value: 'material_purchase', label: '材料采购' },
  { value: 'equipment_purchase', label: '设备采购' },
  { value: 'pole_crossarm', label: '电杆横担支出' },
  { value: 'freight', label: '运费支出' },
  { value: 'construction', label: '施工费支出' },
  { value: 'other', label: '其他支出' }
];

// 公司支出分类
const COMPANY_EXPENSE_CATEGORIES = [
  { value: 'office_operations', label: '通用运营（房租/耗材）' },
  { value: 'transportation', label: '交通通勤' },
  { value: 'marketing', label: '业扩营销' },
  { value: 'power_system', label: '电力系统关系' },
  { value: 'employee_welfare', label: '员工福利' },
  { value: 'logistics', label: '快递物流' },
  { value: 'other', label: '其他支出' }
];

// 执行记录类型
interface ExecutionRecord {
  id: string;
  applyCode: string;
  applyType: string;
  applicant: string;
  amount: number;
  currency: string;
  action: 'execute' | 'reject';
  operator: string;
  operatorRole: string;
  timestamp: string;
  executeMethod?: string;
  voucherNo?: string;
  rejectReason?: string;
  remark?: string;
}

const ExecutionManagement: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [detailModalVisible, setDetailModalVisible] = useState(false);
  const [editModalVisible, setEditModalVisible] = useState(false);
  const [selectedRecord, setSelectedRecord] = useState<any>(null);
  const [fullDetail, setFullDetail] = useState<any>(null);
  const [form] = Form.useForm();
  const [editForm] = Form.useForm();
  const [voucherFiles, setVoucherFiles] = useState<any[]>([]);
  const [isRejecting, setIsRejecting] = useState(false);

  // 待执行数据
  const [pendingData, setPendingData] = useState([]);

  // 已执行数据
  const [executedData, setExecutedData] = useState([]);
  
  // 已执行列表筛选状态
  const [searchKeyword, setSearchKeyword] = useState('');
  const [filterType, setFilterType] = useState<string | null>(null);
  const [sortField, setSortField] = useState<string>('executeDate');
  const [sortOrder, setSortOrder] = useState<'ascend' | 'descend'>('descend');
  
  // 项目列表
  const [projects, setProjects] = useState<any[]>([]);

  // 从后端获取待执行数据
  useEffect(() => {
    const fetchPendingData = async () => {
      setLoading(true);
      try {
        const response = await fetch('/api/executions/pending');
        if (response.ok) {
          const data = await response.json();
          if (data.success && Array.isArray(data.data)) {
            setPendingData(data.data.map((item: any, index: number) => ({ 
              ...item, 
              key: item.id || index,
              rawData: item
            })));
          } else {
            message.error('获取待执行数据失败：数据格式错误');
          }
        } else {
          message.error('获取待执行数据失败：' + response.statusText);
        }
      } catch (error) {
        console.error('获取待执行数据错误:', error);
        message.error('网络错误，获取待执行数据失败');
      } finally {
        setLoading(false);
      }
    };

    fetchPendingData();
  }, []);
  
  // 获取项目列表
  useEffect(() => {
    const fetchProjects = async () => {
      try {
        const response = await fetch('/api/projects');
        if (response.ok) {
          const data = await response.json();
          if (data.success && Array.isArray(data.data)) {
            setProjects(data.data);
          }
        }
      } catch (error) {
        console.error('获取项目列表失败:', error);
      }
    };

    fetchProjects();
  }, []);

  // 从后端获取已执行数据
  useEffect(() => {
    const fetchExecutedData = async () => {
      setLoading(true);
      try {
        const response = await fetch('/api/executions/executed');
        if (response.ok) {
          const data = await response.json();
          if (data.success && Array.isArray(data.data)) {
            setExecutedData(data.data.map((item: any, index: number) => ({ 
              ...item, 
              key: item.id || index,
              rawData: item
            })));
          } else {
            message.error('获取已执行数据失败：数据格式错误');
          }
        } else {
          message.error('获取已执行数据失败：' + response.statusText);
        }
      } catch (error) {
        console.error('获取已执行数据错误:', error);
        message.error('网络错误，获取已执行数据失败');
      } finally {
        setLoading(false);
      }
    };

    fetchExecutedData();
  }, []);

  const formatAmount = (amount: number, currency: string = 'CNY') => {
    const symbols: Record<string, string> = { CNY: '¥', USD: '$', LAK: '₭', THB: '฿' };
    return (symbols[currency] || '¥') + (amount || 0).toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  };

  const formatNumberWithSeparator = (value: number | undefined, currency: string): string => {
    if (value === undefined || value === null) return '';
    const symbols: Record<string, string> = { CNY: '¥', USD: '$', LAK: '₭', THB: '฿' };
    return (symbols[currency] || '¥') + value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  };

  const parseFormattedNumber = (value: string): number => {
    const cleaned = value.replace(/[¥$₭฿,]/g, '');
    return parseFloat(cleaned) || 0;
  };

  const getTypeTag = (type: string) => {
    const colors: Record<string, string> = { '预支申请': 'blue', '报销申请': 'green', '付款申请': 'orange', '核销申请': 'purple', '采购申请': 'cyan' };
    return <Tag color={colors[type] || 'default'}>{type}</Tag>;
  };

  const getStatusTag = (status: string) => {
    const statusMap: Record<string, { color: string; text: string }> = {
      pending: { color: 'processing', text: '待执行' },
      executed: { color: 'success', text: '已执行' },
      rejected: { color: 'error', text: '已退回' },
      approved: { color: 'success', text: '已批准' },
    };
    const config = statusMap[status] || { color: 'default', text: status };
    return <Tag color={config.color}>{config.text}</Tag>;
  };
  
  // 根据项目ID获取项目名称
  const getProjectName = (projectId: any) => {
    if (!projectId) return '-';
    const project = projects.find(p => p.id === projectId);
    return project ? project.name : `项目ID: ${projectId}`;
  };



  // 查看详情
  const handleViewDetail = async (record: any) => {
    setSelectedRecord(record);
    form.resetFields();
    form.setFieldsValue({ execute_date: dayjs(), execute_method: 'bank' });
    setVoucherFiles([]);
    setIsRejecting(false);
    
    // 获取完整详情
    if (record.type === '采购申请') {
      try {
        const response = await fetch(`/api/purchase-requests/${record.id}`);
        const data = await response.json();
        if (data.success) {
          setFullDetail(data.data);
        }
      } catch (error) {
        console.error('获取采购申请详情失败:', error);
        // 如果获取失败，使用record中的数据
        setFullDetail(record);
      }
    } else {
      // 其他类型使用record中的数据
      setFullDetail(record);
    }
    
    setDetailModalVisible(true);
  };

  // 处理执行
  const handleExecute = async () => {
    try {
      // 检查是否为核销申请
      const isVerification = selectedRecord.type === '核销申请';
      // 检查是否为退款类型的核销申请
      const isRefundVerification = isVerification && fullDetail.settlement && fullDetail.settlement_amount > 0;
      // 检查是否为非结算核销
      const isNonSettlementVerification = isVerification && !fullDetail.settlement;
      
      // 非结算核销不需要验证执行方式和付款凭证
      if (isNonSettlementVerification) {
        // 直接执行，不需要验证表单
        setLoading(true);
        
        // 调用执行API
        const executeResponse = await fetch('/api/executions', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            apply_id: selectedRecord.id,
            apply_type: 'verification',
            action: 'execute',
            execute_method: 'none', // 非结算核销不需要执行方式
            voucher_files: [], // 非结算核销不需要付款凭证
            remark: form.getFieldValue('remark') || ''
          })
        });
        
        if (executeResponse.ok) {
          setPendingData(pendingData.filter(item => item.key !== selectedRecord.key));
          // 刷新已执行数据
          const fetchExecutedData = async () => {
            try {
              const response = await fetch('/api/executions/executed');
              if (response.ok) {
                const data = await response.json();
                if (data.success && Array.isArray(data.data)) {
                  setExecutedData(data.data.map((item: any, index: number) => ({ 
                    ...item, 
                    key: item.id || index,
                    rawData: item
                  })));
                }
              }
            } catch (error) {
              console.error('获取已执行数据错误:', error);
            }
          };
          fetchExecutedData();
          message.success(`执行成功：${selectedRecord.code}`);
          setDetailModalVisible(false);
        } else {
          message.error('执行操作失败，请重试');
        }
      } else {
        // 其他类型的申请需要验证表单
        const values = await form.validateFields();
        
        // 检查是否需要上传付款凭证
        if (!isRefundVerification && (!voucherFiles || voucherFiles.length === 0)) {
          message.error('请上传付款凭证');
          return;
        }
        
        setLoading(true);
        
        // 获取已上传文件的URL列表（如果需要）
        let voucherFileUrls = [];
        if (!isRefundVerification) {
          voucherFileUrls = voucherFiles
            .map(f => f.url || f.response?.data?.url || f.response?.url)
            .filter(url => url); // 过滤掉空值
        }
        
        
        // 调用执行API
        const executeResponse = await fetch('/api/executions', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            apply_id: selectedRecord.id,
            apply_type: selectedRecord.type === '预支申请' ? 'advance' : selectedRecord.type === '报销申请' ? 'reimbursement' : selectedRecord.type === '付款申请' ? 'payment' : selectedRecord.type === '采购申请' ? 'purchase' : 'verification',
            action: 'execute',
            execute_method: isRefundVerification ? 'refund' : values.execute_method,
            voucher_files: voucherFileUrls,
            remark: values.remark
          })
        });
        
        if (executeResponse.ok) {
          setPendingData(pendingData.filter(item => item.key !== selectedRecord.key));
          // 刷新已执行数据
          const fetchExecutedData = async () => {
            try {
              const response = await fetch('/api/executions/executed');
              if (response.ok) {
                const data = await response.json();
                if (data.success && Array.isArray(data.data)) {
                  setExecutedData(data.data.map((item: any, index: number) => ({ 
                    ...item, 
                    key: item.id || index,
                    rawData: item
                  })));
                }
              }
            } catch (error) {
              console.error('获取已执行数据错误:', error);
            }
          };
          fetchExecutedData();
          message.success(`执行成功：${selectedRecord.code}`);
          setDetailModalVisible(false);
        } else {
          message.error('执行操作失败，请重试');
        }
      }
    } catch (error) {
      console.error('执行操作失败:', error);
      message.error('网络错误，操作失败');
    } finally {
      setLoading(false);
    }
  };

  // 处理退回
  const handleReject = async () => {
    try {
      setIsRejecting(true);
      // 只验证退回原因字段
      const values = await form.validateFields(['rejectReason'], { force: true });
      
      setLoading(true);
      
      // 调用退回API
      const rejectResponse = await fetch('/api/executions', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          apply_id: selectedRecord.id,
          apply_type: selectedRecord.type === '预支申请' ? 'advance' : selectedRecord.type === '报销申请' ? 'reimbursement' : selectedRecord.type === '付款申请' ? 'payment' : selectedRecord.type === '采购申请' ? 'purchase' : 'verification',
          action: 'reject',
          reject_reason: values.rejectReason
        })
      });
      
      if (rejectResponse.ok) {
        setPendingData(pendingData.filter(item => item.key !== selectedRecord.key));
        message.success(`已退回：${selectedRecord.code}，申请人可编辑后重新提交`);
        setDetailModalVisible(false);
      } else {
        message.error('退回操作失败，请重试');
      }
    } catch (error) {
      console.error('退回操作失败:', error);
      message.error('网络错误，操作失败');
    } finally {
      setLoading(false);
    }
  };



  const handleEdit = (record: any) => {
    setSelectedRecord(record);
    editForm.setFieldsValue({ amount: record.amount, reason: record.reason });
    setEditModalVisible(true);
  };

  const handleEditSubmit = () => {
    editForm.validateFields().then(values => {
      message.success('修改成功，已重新提交审批');
      setEditModalVisible(false);
    });
  };

  // 渲染附件列表
  const renderAttachments = (attachments: any) => {
    // 处理字符串类型的 attachments（JSON字符串）
    let attachmentList = attachments;
    if (typeof attachments === 'string') {
      try {
        attachmentList = JSON.parse(attachments);
      } catch (e) {
        return null;
      }
    }
    
    // 确保是数组
    if (!Array.isArray(attachmentList) || attachmentList.length === 0) return null;
    
    return (
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
        {attachmentList.map((item: any, index: number) => {
          // 确保item是字符串类型的URL
          const url = typeof item === 'string' ? item : item?.url;
          if (!url) return null;
          
          return (
            <div key={index} style={{ position: 'relative' }}>
              {url.match(/\.(jpg|jpeg|png|gif|webp)$/i) ? (
                <img 
                  src={url} 
                  alt={`附件${index + 1}`}
                  style={{ width: 120, height: 120, objectFit: 'cover', borderRadius: 4, border: '1px solid #f0f0f0', cursor: 'pointer' }}
                  onClick={() => window.open(url, '_blank')}
                />
              ) : (
                <a href={url} target="_blank" rel="noopener noreferrer">
                  <div style={{ width: 120, height: 120, display: 'flex', alignItems: 'center', justifyContent: 'center', border: '1px solid #f0f0f0', borderRadius: 4, background: '#f5f5f5' }}>
                    <FileImageOutlined style={{ fontSize: 32, color: '#999' }} />
                  </div>
                </a>
              )}
            </div>
          );
        })}
      </div>
    );
  };

  // 获取支出分类的中文名称
  const getCategoryName = (category: string) => {
    if (!category) return '-';
    // 特殊分类映射
    const specialCategories: Record<string, string> = {
      // Project expense categories
      accommodation: '住宿',
      food: '餐饮',
      fuel: '加油',
      materials: '零散材料',
      customer_relations: '客户关系',
      subcontract_relations: '分包关系',
      edl_relations: 'EDL关系',
      extra_construction: '额外施工',
      // Company expense categories
      general_operations: '通用运营（房租/耗材）',
      transportation: '交通通勤',
      business_expansion: '业扩营销',
      power_system_relations: '电力系统关系',
      employee_benefits: '员工福利',
      express_logistics: '快递物流',
      other: '其他'
    };
    // 先检查特殊分类
    if (specialCategories[category]) return specialCategories[category];
    // 再从项目支出分类中查找
    const projectCategory = PROJECT_EXPENSE_CATEGORIES.find(c => c.value === category);
    if (projectCategory) return projectCategory.label;
    // 再从公司支出分类中查找
    const companyCategory = COMPANY_EXPENSE_CATEGORIES.find(c => c.value === category);
    if (companyCategory) return companyCategory.label;
    // 如果都找不到，返回原始值
    return category;
  };

  // 渲染明细清单
  const renderDetailItems = (detailItems: any) => {
    // 处理字符串类型的 detailItems（JSON字符串）
    let itemsList = detailItems;
    if (typeof detailItems === 'string') {
      try {
        itemsList = JSON.parse(detailItems);
      } catch (e) {
        return null;
      }
    }
    
    // 确保是数组
    if (!Array.isArray(itemsList) || itemsList.length === 0) return null;
    
    return (
      <List
        size="small"
        bordered
        dataSource={itemsList}
        renderItem={(item: any, index: number) => (
          <List.Item>
            <div style={{ width: '100%' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                <span><strong>明细 {index + 1}:</strong> {item.description || getCategoryName(item.category) || '-'}</span>
                <span style={{ fontWeight: 'bold', color: '#1890ff' }}>{formatAmount(item.amount, item.currency)}</span>
              </div>
              {item.category && (
                <div style={{ marginBottom: 8, fontSize: 13, color: '#666' }}>
                  <strong>支出分类：</strong>{getCategoryName(item.category)}
                </div>
              )}
              {item.attachments && (
                <div style={{ marginTop: 8 }}>
                  <span style={{ color: '#666', fontSize: 12 }}>明细附件：</span>
                  {renderAttachments(item.attachments)}
                </div>
              )}
            </div>
          </List.Item>
        )}
      />
    );
  };



  const pendingColumns = [
    { title: '事由', dataIndex: 'reason', key: 'reason', ellipsis: true, render: (v: string, r: any) => <a onClick={() => handleViewDetail(r)}>{v}</a> },
    { title: '类型', dataIndex: 'type', key: 'type', width: 100, render: (v: string) => getTypeTag(v) },
    { title: '申请人', dataIndex: 'applicant', key: 'applicant', width: 80 },
    { title: '金额', dataIndex: 'amount', key: 'amount', width: 120, render: (v: number, r: any) => <span style={{ fontWeight: 'bold', color: '#1890ff' }}>{formatAmount(v, r.currency)}</span> },
    { title: '收款方', dataIndex: 'payee', key: 'payee', ellipsis: true, render: (v: string, r: any) => v || r.applicant },
    { title: '审批日期', dataIndex: 'approveDate', key: 'approveDate', width: 100 },
    { title: '编号', dataIndex: 'code', key: 'code', width: 140 },
    {
      title: '操作', key: 'action', width: 200,
      render: (_: any, record: any) => (
        <Space wrap>
          <Button size="small" type="primary" icon={<DollarOutlined />} onClick={() => handleViewDetail(record)}>执行</Button>
          <Button size="small" icon={<EditOutlined />} onClick={() => handleEdit(record)}>编辑</Button>
        </Space>
      )
    }
  ];

  // 筛选和排序已执行数据
  const getFilteredExecutedData = () => {
    let data = [...executedData];
    
    // 按事由搜索
    if (searchKeyword) {
      data = data.filter(item => 
        (item.reason || '').toLowerCase().includes(searchKeyword.toLowerCase()) ||
        (item.code || '').toLowerCase().includes(searchKeyword.toLowerCase()) ||
        (item.applicant || '').toLowerCase().includes(searchKeyword.toLowerCase())
      );
    }
    
    // 按类型筛选
    if (filterType) {
      data = data.filter(item => item.type === filterType);
    }
    
    // 排序
    data.sort((a, b) => {
      let aValue = a[sortField];
      let bValue = b[sortField];
      
      // 处理日期排序
      if (sortField === 'executeDate') {
        aValue = a.execute_date || a.executeDate || '';
        bValue = b.execute_date || b.executeDate || '';
      }
      
      if (sortOrder === 'ascend') {
        return aValue > bValue ? 1 : -1;
      } else {
        return aValue < bValue ? 1 : -1;
      }
    });
    
    return data;
  };

  const executedColumns = [
    { title: '事由', dataIndex: 'reason', key: 'reason', ellipsis: true, render: (v: string, r: any) => <a onClick={() => handleViewDetail(r)}>{v || '-'}</a> },
    { title: '类型', dataIndex: 'type', key: 'type', width: 100, render: (v: string) => getTypeTag(v) },
    { title: '申请人', dataIndex: 'applicant', key: 'applicant', width: 80 },
    { title: '金额', dataIndex: 'amount', key: 'amount', width: 140, render: (v: number, r: any) => (
        <>
          <div>{formatAmount(v, r.currency)}</div>
          {r.currency !== 'CNY' && r.amount_cny && <div style={{ color: '#999', fontSize: 12 }}>≈ ¥{r.amount_cny.toLocaleString('zh-CN', {minimumFractionDigits: 2})}</div>}
        </>
      ) },
    { title: '执行日期', dataIndex: 'executeDate', key: 'executeDate', width: 100, sorter: true, render: (v: string) => v || '-' },
    { title: '执行方式', dataIndex: 'executeMethod', key: 'executeMethod', width: 100, render: (v: string) => v || '-' },
    { title: '状态', dataIndex: 'status', key: 'status', width: 100, render: (v: string) => getStatusTag(v) },
    { title: '编号', dataIndex: 'code', key: 'code', width: 140 },
  ];

  // 已执行列表的筛选和排序控件
  const ExecutedListControls = () => (
    <div style={{ marginBottom: 16, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
      <Input.Search
        placeholder="搜索事由、编号或申请人"
        value={searchKeyword}
        onChange={(e) => setSearchKeyword(e.target.value)}
        onSearch={(value) => setSearchKeyword(value)}
        style={{ width: 250 }}
        allowClear
      />
      <Select
        placeholder="筛选类型"
        value={filterType}
        onChange={(value) => setFilterType(value)}
        style={{ width: 150 }}
        allowClear
      >
        <Select.Option value="预支申请">预支申请</Select.Option>
        <Select.Option value="报销申请">报销申请</Select.Option>
        <Select.Option value="付款申请">付款申请</Select.Option>
        <Select.Option value="核销申请">核销申请</Select.Option>
        <Select.Option value="采购申请">采购申请</Select.Option>
      </Select>
      <Select
        placeholder="排序方式"
        value={`${sortField}_${sortOrder}`}
        onChange={(value) => {
          const [field, order] = (value as string).split('_');
          setSortField(field);
          setSortOrder(order as 'ascend' | 'descend');
        }}
        style={{ width: 180 }}
      >
        <Select.Option value="executeDate_descend">执行日期（最新）</Select.Option>
        <Select.Option value="executeDate_ascend">执行日期（最早）</Select.Option>
        <Select.Option value="amount_descend">金额（从高到低）</Select.Option>
        <Select.Option value="amount_ascend">金额（从低到高）</Select.Option>
      </Select>
    </div>
  );

  const tabItems = [
    { key: 'pending', label: <span>待执行 <Badge count={pendingData.length} style={{ marginLeft: 8 }} /></span>, children: <Table columns={pendingColumns} dataSource={pendingData} loading={loading} pagination={{ pageSize: 10 }} scroll={{ x: 1300 }} /> },
    { key: 'executed', label: '已执行', children: (
      <>
        <ExecutedListControls />
        <Table 
          columns={executedColumns} 
          dataSource={getFilteredExecutedData()} 
          loading={loading} 
          pagination={{ pageSize: 10 }} 
          scroll={{ x: 1400 }}
          onChange={(pagination, filters, sorter: any) => {
            if (sorter.field) {
              setSortField(sorter.field);
              setSortOrder(sorter.order || 'descend');
            }
          }}
        />
      </>
    )},
  ];

  // 上传配置
  const uploadProps = {
    name: 'file',
    action: '/api/upload/single',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info: any) {
      // 更新文件列表状态
      setVoucherFiles(info.fileList);
      
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        // 如果上传成功，将返回的URL添加到文件对象中
        const updatedFileList = info.fileList.map((file: any) => {
          if (file.uid === info.file.uid && file.response) {
            return {
              ...file,
              url: file.response.data?.url || file.response.url || file.response
            };
          }
          return file;
        });
        setVoucherFiles(updatedFileList);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    fileList: voucherFiles,
  };

  return (
    <div style={{ padding: 24 }}>
      <div style={{ marginBottom: 24 }}><h2 style={{ marginBottom: 8 }}>执行管理</h2><p style={{ color: '#888', marginBottom: 0 }}>执行已审批通过的付款申请</p></div>
      <Card><Tabs items={tabItems} /></Card>

      {/* 详情模态框 */}
      <Modal 
        title={`${selectedRecord?.type}详情`} 
        open={detailModalVisible} 
        onCancel={() => setDetailModalVisible(false)} 
        width={900}
        footer={
          selectedRecord?.status === 'approved' || selectedRecord?.status === 'pending' ? (
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 8 }}>
              <Button onClick={() => setDetailModalVisible(false)}>取消</Button>
              <Button danger icon={<CloseOutlined />} onClick={handleReject}>退回</Button>
              <Button type="primary" icon={<CheckOutlined />} onClick={handleExecute}>执行</Button>
            </div>
          ) : (
            <Button onClick={() => setDetailModalVisible(false)}>关闭</Button>
          )
        }
      >
        {fullDetail && (
          <>
            {/* 基本信息 */}
            <Descriptions bordered column={2} size="small">
              <Descriptions.Item label="申请类型">{getTypeTag(selectedRecord.type)}</Descriptions.Item>
              <Descriptions.Item label="申请编号">{selectedRecord.code}</Descriptions.Item>
              <Descriptions.Item label="申请人">{selectedRecord.applicant}</Descriptions.Item>
              <Descriptions.Item label="申请日期">{selectedRecord.date || fullDetail.advance_date || fullDetail.reimbursement_date || fullDetail.payment_date || fullDetail.verification_date}</Descriptions.Item>
              <Descriptions.Item label="金额">
                {formatAmount(selectedRecord.amount, selectedRecord.currency)}
                {selectedRecord.currency !== 'CNY' && fullDetail.amount_cny > 0 && (
                  <span style={{ color: '#999', marginLeft: 8 }}>≈ ¥{fullDetail.amount_cny.toLocaleString('zh-CN', {minimumFractionDigits: 2})}</span>
                )}
              </Descriptions.Item>
              <Descriptions.Item label="状态">{getStatusTag(selectedRecord.status)}</Descriptions.Item>
              <Descriptions.Item label="事由" span={2}>{selectedRecord.reason}</Descriptions.Item>
              
              {/* 付款申请特有字段 */}
              {selectedRecord.type === '付款申请' && (
                <>
                  <Descriptions.Item label="收款单位类型">
                    {fullDetail.payee_type === 'subcontractor' ? '分包商' : 
                     fullDetail.payee_type === 'supplier' ? '供应商' : 
                     fullDetail.payee_type === 'customer' ? '客户' : '其他'}
                  </Descriptions.Item>
                  <Descriptions.Item label="收款方">{fullDetail.payee || '-'}</Descriptions.Item>
                  <Descriptions.Item label="银行名称">{fullDetail.bank_name || '-'}</Descriptions.Item>
                  <Descriptions.Item label="银行账号">{fullDetail.bank_account || '-'}</Descriptions.Item>
                  <Descriptions.Item label="支出类型">
                    {fullDetail.expense_type === 'company' ? '公司支出' : '项目支出'}
                  </Descriptions.Item>
                  {fullDetail.expense_type === 'project' && fullDetail.project_id && (
                    <Descriptions.Item label="关联项目">{getProjectName(fullDetail.project_id)}</Descriptions.Item>
                  )}
                  <Descriptions.Item label="支出分类">
                    {fullDetail.expense_type === 'project' 
                      ? (PROJECT_EXPENSE_CATEGORIES.find(c => c.value === fullDetail.expense_category)?.label || fullDetail.expense_category)
                      : (COMPANY_EXPENSE_CATEGORIES.find(c => c.value === fullDetail.expense_category)?.label || fullDetail.expense_category)
                    }
                  </Descriptions.Item>
                </>
              )}
              
              {/* 报销申请特有字段 */}
              {selectedRecord.type === '报销申请' && fullDetail.expense_type && (
                <>
                  <Descriptions.Item label="支出类型">
                    {fullDetail.expense_type === 'company' ? '公司支出' : '项目支出'}
                  </Descriptions.Item>
                  {fullDetail.project_id && (
                    <Descriptions.Item label="关联项目">{getProjectName(fullDetail.project_id)}</Descriptions.Item>
                  )}
                </>
              )}
              
              {/* 核销申请特有字段 */}
              {selectedRecord.type === '核销申请' && fullDetail.advance_code && (
                <>
                  <Descriptions.Item label="关联预支单">{fullDetail.advance_code}</Descriptions.Item>
                  <Descriptions.Item label="预支金额">{formatAmount(fullDetail.advance_amount, fullDetail.currency)}</Descriptions.Item>
                  <Descriptions.Item label="结算核销">
                    <span style={{ fontWeight: 'bold', color: fullDetail.settlement ? '#52c41a' : '#fa8c16' }}>
                      {fullDetail.settlement ? '是' : '否'}
                    </span>
                  </Descriptions.Item>
                  <Descriptions.Item label="已核销金额">{formatAmount(fullDetail.total_reimbursed || 0, fullDetail.currency)}</Descriptions.Item>
                  <Descriptions.Item label="剩余核销金额">{formatAmount((fullDetail.advance_amount || 0) - (fullDetail.total_reimbursed || 0), fullDetail.currency)}</Descriptions.Item>
                  {fullDetail.settlement && fullDetail.settlement_amount && (
                    <Descriptions.Item label="核销结算金额" span={2}>
                      {fullDetail.settlement_amount > 0 ? `退款 ${formatAmount(fullDetail.settlement_amount, fullDetail.currency)}` : `补款 ${formatAmount(Math.abs(fullDetail.settlement_amount), fullDetail.currency)}`}
                    </Descriptions.Item>
                  )}
                </>
              )}
              
              {/* 采购申请特有字段 */}
              {selectedRecord.type === '采购申请' && (
                <>
                  <Descriptions.Item label="采购类型">
                    {fullDetail.purchase_type === 'project' ? '项目采购' : '库存采购'}
                  </Descriptions.Item>
                  {fullDetail.purchase_type === 'project' && fullDetail.project_id && (
                    <Descriptions.Item label="关联项目">{getProjectName(fullDetail.project_id)}</Descriptions.Item>
                  )}
                  <Descriptions.Item label="供应商">{fullDetail.supplier_name || '-'}</Descriptions.Item>
                  <Descriptions.Item label="支出分类">
                    {fullDetail.expense_category === 'material' ? '材料' : 
                     fullDetail.expense_category === 'equipment' ? '设备' : 
                     fullDetail.expense_category === 'pole' ? '电杆' : '其他'}
                  </Descriptions.Item>
                  <Descriptions.Item label="币种">{fullDetail.currency}</Descriptions.Item>
                  <Descriptions.Item label="申请日期">{fullDetail.request_date}</Descriptions.Item>
                  <Descriptions.Item label="事由" span={2}>{fullDetail.brief_description || '-'}</Descriptions.Item>
                  {fullDetail.remark && (
                    <Descriptions.Item label="备注" span={2}>{fullDetail.remark}</Descriptions.Item>
                  )}
                </>
              )}
            </Descriptions>
            
            {/* 采购申请供应商收款信息 */}
            {selectedRecord.type === '采购申请' && fullDetail.supplier_payment_infos && fullDetail.supplier_payment_infos.length > 0 && (
              <>
                <Divider>供应商收款信息</Divider>
                <Descriptions bordered column={2} size="small">
                  {fullDetail.supplier_payment_infos.filter((p: any) => p.is_primary).map((payment: any, index: number) => (
                    <React.Fragment key={index}>
                      <Descriptions.Item label="收款户名">{payment.account_name || '-'}</Descriptions.Item>
                      <Descriptions.Item label="银行账号">{payment.bank_account || '-'}</Descriptions.Item>
                      <Descriptions.Item label="开户银行">{payment.bank_name || '-'}</Descriptions.Item>
                      {payment.qr_code && (
                        <Descriptions.Item label="收款码">
                          <img src={payment.qr_code} alt="收款码" style={{ width: 100, height: 100, objectFit: 'contain' }} />
                        </Descriptions.Item>
                      )}
                    </React.Fragment>
                  ))}
                </Descriptions>
              </>
            )}
            
            {/* 采购申请商品明细 */}
            {selectedRecord.type === '采购申请' && fullDetail.items && fullDetail.items.length > 0 && (
              <>
                <Divider>采购明细</Divider>
                <List
                  size="small"
                  bordered
                  dataSource={fullDetail.items}
                  renderItem={(item: any, index: number) => (
                    <List.Item>
                      <div style={{ width: '100%' }}>
                        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 8 }}>
                          <span><strong>{index + 1}. {item.product_name}</strong></span>
                          <span style={{ fontWeight: 'bold', color: '#1890ff' }}>
                            {fullDetail.currency} {item.total_price?.toLocaleString('zh-CN', {minimumFractionDigits: 2})}
                          </span>
                        </div>
                        <div style={{ fontSize: 13, color: '#666' }}>
                          规格: {item.specification || '-'} | 单位: {item.unit || '-'} | 
                          数量: {item.quantity} | 单价: {fullDetail.currency} {item.unit_price?.toLocaleString('zh-CN', {minimumFractionDigits: 2})}
                        </div>
                      </div>
                    </List.Item>
                  )}
                />
              </>
            )}

            {/* 明细清单 */}
            {fullDetail.detail_items && fullDetail.detail_items.length > 0 && (
              <>
                <Divider>明细清单</Divider>
                {renderDetailItems(fullDetail.detail_items)}
              </>
            )}

            {/* 审批意见 */}
            {fullDetail.approval_remark && (
              <>
                <Divider>审批意见</Divider>
                <div style={{ padding: '12px', background: '#f5f5f5', borderRadius: '4px' }}>
                  <p style={{ margin: 0, color: '#666' }}>{fullDetail.approval_remark}</p>
                </div>
              </>
            )}

            {/* 申请凭证附件或退款凭证 */}
            {fullDetail.attachments && fullDetail.attachments.length > 0 && (
              <>
                <Divider>{fullDetail.settlement && fullDetail.settlement_amount > 0 ? '退款凭证' : '申请凭证附件'}</Divider>
                {renderAttachments(fullDetail.attachments)}
              </>
            )}

            {/* 执行表单 */}
            {(selectedRecord.status === 'approved' || selectedRecord.status === 'pending') && (
              <>
                <Divider>执行信息</Divider>
                <Form form={form} layout="vertical">
                  {/* 执行/确认日期 */}
                  <Form.Item name="execute_date" label={selectedRecord.type === '核销申请' && fullDetail.settlement && fullDetail.settlement_amount > 0 ? "确认日期" : "执行日期"} rules={[{ required: true }]}>
                    <DatePicker style={{ width: '100%' }} />
                  </Form.Item>
                  
                  {/* 执行方式或收款方式 - 非结算核销不需要 */}
                  {!(selectedRecord.type === '核销申请' && !fullDetail.settlement) && (
                    selectedRecord.type === '核销申请' && fullDetail.settlement && fullDetail.settlement_amount > 0 ? (
                      <Form.Item name="execute_method" label="收款方式" rules={[{ required: true }]}>
                        <Select options={[{ value: 'bank', label: '银行转账' }, { value: 'cash', label: '现金' }, { value: 'wechat', label: '微信' }, { value: 'other', label: '其他' }]} />
                      </Form.Item>
                    ) : (
                      <Form.Item name="execute_method" label="执行方式" rules={[{ required: true }]}>
                        <Select options={[{ value: 'bank', label: '银行转账' }, { value: 'cash', label: '现金' }, { value: 'wechat', label: '微信' }, { value: 'other', label: '其他' }]} />
                      </Form.Item>
                    )
                  )}
                  
                  {/* 只有退款类型的核销申请和非结算核销不需要上传付款凭证，其他类型的申请都需要 */}
                  {!(selectedRecord.type === '核销申请' && (fullDetail.settlement && fullDetail.settlement_amount > 0 || !fullDetail.settlement)) && (
                    <Form.Item label="付款凭证" required>
                      <Upload {...uploadProps}>
                        <Button icon={<UploadOutlined />}>上传付款凭证</Button>
                      </Upload>
                      <div style={{ marginTop: 8, color: '#666', fontSize: 12 }}>
                        请上传付款凭证（银行转账回单、现金收据等），支持图片和PDF格式
                      </div>
                    </Form.Item>
                  )}
                  
                  {/* 退款的核销申请显示提示 */}
                  {selectedRecord.type === '核销申请' && fullDetail.settlement && fullDetail.settlement_amount > 0 && (
                    <div style={{ margin: '16px 0', padding: '12px', backgroundColor: '#f6ffed', border: '1px solid #b7eb8f', borderRadius: '4px' }}>
                      <p style={{ margin: 0, color: '#389e0d' }}>此核销申请为退款类型，无需上传付款凭证</p>
                    </div>
                  )}
                  
                  {/* 非结算核销的核销申请显示提示 */}
                  {selectedRecord.type === '核销申请' && !fullDetail.settlement && (
                    <div style={{ margin: '16px 0', padding: '12px', backgroundColor: '#e6f7ff', border: '1px solid #91d5ff', borderRadius: '4px' }}>
                      <p style={{ margin: 0, color: '#1890ff' }}>此核销申请为非结算核销，无需上传付款凭证</p>
                    </div>
                  )}
                  
                  {/* 根据操作类型显示不同的字段 */}
                  {!isRejecting ? (
                    // 执行操作时显示的字段
                    <>
                      {/* 收款确认信息（仅退款类型）或备注 */}
                      {selectedRecord.type === '核销申请' && fullDetail.settlement && fullDetail.settlement_amount > 0 ? (
                        <Form.Item name="remark" label="收款确认信息" rules={[{ required: true, message: '请填写收款确认信息' }]}>
                          <TextArea rows={3} placeholder="请填写收款确认信息，如收款账号、收款时间等" />
                        </Form.Item>
                      ) : (
                        <Form.Item name="remark" label="备注">
                          <TextArea rows={2} placeholder="可选：填写执行备注" />
                        </Form.Item>
                      )}
                    </>
                  ) : (
                    // 退回操作时显示的字段
                    <Form.Item name="rejectReason" label="退回原因" rules={[{ required: true, message: '请填写退回原因' }]}>
                      <TextArea rows={3} placeholder="请填写退回原因" />
                    </Form.Item>
                  )}
                </Form>
              </>
            )}
          </>
        )}
      </Modal>

      <Modal title={`编辑申请：${selectedRecord?.code}`} open={editModalVisible} onCancel={() => setEditModalVisible(false)} onOk={handleEditSubmit} width={600}>
        <Form form={editForm} layout="vertical">
          <Form.Item label="申请类型"><Input value={selectedRecord?.type} disabled /></Form.Item>
          <Form.Item label="申请人"><Input value={selectedRecord?.applicant} disabled /></Form.Item>
          <Form.Item name="amount" label="金额" rules={[{ required: true }]}><Input type="number" style={{ width: '100%' }} /></Form.Item>
          <Form.Item name="reason" label="事由" rules={[{ required: true }]}><TextArea rows={3} /></Form.Item>
        </Form>
      </Modal>


    </div>
  );
};

export default ExecutionManagement;