yunhaifinance/frontend/src/pages/projects/ProjectsPage.tsx

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Typography, Button, Space, Table, Tag, message, Spin, Modal, Input, Form, Select, InputNumber, DatePicker, Row, Col } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import apiClient from '../../utils/request';
import { useAuthStore } from '../../store/authStore';
import dayjs from 'dayjs';

const { Title, Paragraph } = Typography;

interface Project {
  id: number
  project_code: string
  name: string
  customer_id: number
  customer_name?: string
  status: string
  budget: string
  spent: string
  start_date: string
  end_date: string
  description: string
  manager_name?: string
  progress?: number
  contract_amount?: number
  location?: string
}

const ProjectsPage: React.FC = () => {
  const navigate = useNavigate();
  const [isMobile, setIsMobile] = useState(false);
  const [projects, setProjects] = useState<Project[]>([]);
  const [loading, setLoading] = useState(true);
  const [deleteModalVisible, setDeleteModalVisible] = useState(false);
  const [deleteProjectId, setDeleteProjectId] = useState<number | null>(null);
  const [deletePassword, setDeletePassword] = useState('');
  const [deleteLoading, setDeleteLoading] = useState(false);

  const [createModalVisible, setCreateModalVisible] = useState(false);
  const [createLoading, setCreateLoading] = useState(false);
  const [form] = Form.useForm();
  const [customers, setCustomers] = useState<any[]>([]);
  const [users, setUsers] = useState<any[]>([]);

  const { user: currentUser } = useAuthStore();
  const isAdmin = currentUser?.role === 'admin' || false;

  useEffect(() => {
    const checkMobile = () => setIsMobile(window.innerWidth <= 768);
    checkMobile();
    window.addEventListener('resize', checkMobile);
    return () => window.removeEventListener('resize', checkMobile);
  }, []);

  useEffect(() => { fetchProjects(); }, []);

  const fetchProjects = async () => {
    try {
      const response = await apiClient.get('/projects');
      if (response.data.success) {
        setProjects(response.data.data.map((p: Project) => ({
          ...p,
          key: p.id.toString(),
          progress: p.status === 'completed' ? 100 : (p.phase_progress || 0),
          manager_name: p.manager_name || '未分配'
        })));
      } else {
        message.error(`获取项目列表失败: ${response.data.message}`);
      }
    } catch (error) {
      message.error('获取项目列表失败');
    } finally {
      setLoading(false);
    }
  };

  const fetchCreateOptions = async () => {
    try {
      const [custRes, userRes] = await Promise.all([
        apiClient.get('/customers'),
        apiClient.get('/users'),
      ]);
      if (custRes.data.success) setCustomers(custRes.data.data || []);
      if (userRes.data.success) setUsers(userRes.data.data || []);
    } catch (e) { /* ignore */ }
  };

  const handleCreateClick = () => {
    form.resetFields();
    form.setFieldsValue({ status: 'in_progress', start_date: dayjs() });
    fetchCreateOptions();
    setCreateModalVisible(true);
  };

  const handleCreateSubmit = async () => {
    try {
      const values = await form.validateFields();
      setCreateLoading(true);
      const payload = {
        ...values,
        manager_id: values.project_manager_id,
        start_date: values.start_date?.format('YYYY-MM-DD'),
        end_date: values.end_date?.format('YYYY-MM-DD') || null,
        contract_amount: values.contract_amount || 0,
      };
      const res = await apiClient.post('/projects', payload);
      if (res.data.success) {
        message.success('项目创建成功');
        setCreateModalVisible(false);
        fetchProjects();
      } else {
        message.error(res.data.message || '创建失败');
      }
    } catch (e: any) {
      if (e.response?.data?.message) message.error(e.response.data.message);
    }
    setCreateLoading(false);
  };

  const handleDeleteProject = (projectId: number) => {
    setDeleteProjectId(projectId);
    setDeletePassword('');
    setDeleteModalVisible(true);
  };

  const handleDeleteConfirm = async () => {
    if (!deleteProjectId) return;
    if (deletePassword !== 'X123c321@') {
      message.error('密码错误');
      return;
    }
    setDeleteLoading(true);
    try {
      const response = await apiClient.delete(`/projects/${deleteProjectId}`, {
        headers: { 'x-user-role': 'admin' }
      });
      if (response.data.success) {
        message.success('项目删除成功');
        setDeleteModalVisible(false);
        fetchProjects();
      } else {
        message.error(response.data.message || '删除失败');
      }
    } catch (error) {
      message.error('删除项目失败');
    } finally {
      setDeleteLoading(false);
    }
  };

  const desktopColumns = [
    {
      title: '项目名称', dataIndex: 'name', key: 'name', width: 250, ellipsis: true,
      render: (text: string, record: Project) => (
        <a onClick={() => navigate(`/projects/${record.id}`)}>{text}</a>
      ),
    },
    { title: '项目经理', dataIndex: 'manager_name', key: 'manager_name', width: 100 },
    {
      title: '预算', dataIndex: 'budget', key: 'budget', width: 120,
      render: (amount: string) => {
        const val = parseFloat(amount || '0');
        return val > 0 ? `¥${(val / 10000).toFixed(1)}万` : '-';
      },
    },
    {
      title: '进度', dataIndex: 'progress', key: 'progress', width: 120,
      render: (progress: number) => (
        <div style={{ width: 100 }}>
          <div style={{ background: '#f0f0f0', borderRadius: 10, height: 8 }}>
            <div style={{
              background: progress > 80 ? '#52c41a' : progress > 50 ? '#1890ff' : '#faad14',
              borderRadius: 10, height: 8, width: `${progress}%`,
            }} />
          </div>
          <span style={{ fontSize: 12, color: '#888' }}>{progress}%</span>
        </div>
      ),
    },
    {
      title: '状态', dataIndex: 'status', key: 'status', width: 100,
      render: (status: string) => {
        const statusMap: Record<string, { color: string; text: string }> = {
          planning: { color: 'blue', text: '规划中' }, in_progress: { color: 'processing', text: '进行中' },
          completed: { color: 'success', text: '已完成' }, suspended: { color: 'warning', text: '已暂停' },
          active: { color: 'processing', text: '进行中' },
        };
        const config = statusMap[status] || { color: 'default', text: status };
        return <Tag color={config.color}>{config.text}</Tag>;
      },
    },
    {
      title: '操作', key: 'action', width: 140,
      render: (_: unknown, record: Project) => (
        <Space>
          <Button size="small" onClick={() => navigate(`/projects/${record.id}`)}>查看</Button>
          {isAdmin && <Button size="small" danger icon={<DeleteOutlined />} onClick={() => handleDeleteProject(record.id)}>删除</Button>}
        </Space>
      ),
    },
  ];

  const mobileColumns = [
    {
      title: '项目', dataIndex: 'name', key: 'name', ellipsis: true,
      render: (text: string, record: Project) => (
        <a onClick={() => navigate(`/projects/${record.id}`)}>{text}</a>
      ),
    },
    {
      title: '进度', dataIndex: 'progress', key: 'progress', width: 80,
      render: (progress: number) => (
        <div style={{ width: 60 }}>
          <div style={{ background: '#f0f0f0', borderRadius: 4, height: 6 }}>
            <div style={{
              background: progress > 80 ? '#52c41a' : progress > 50 ? '#1890ff' : '#faad14',
              borderRadius: 4, height: 6, width: `${progress}%`,
            }} />
          </div>
          <span style={{ fontSize: 10, color: '#888' }}>{progress}%</span>
        </div>
      ),
    },
    {
      title: '状态', dataIndex: 'status', key: 'status', width: 70,
      render: (status: string) => {
        const statusMap: Record<string, { color: string; text: string }> = {
          planning: { color: 'blue', text: '规划' }, in_progress: { color: 'processing', text: '进行中' },
          completed: { color: 'success', text: '完成' }, suspended: { color: 'warning', text: '暂停' },
          active: { color: 'processing', text: '进行中' },
        };
        const config = statusMap[status] || { color: 'default', text: status };
        return <Tag color={config.color} style={{ fontSize: 10 }}>{config.text}</Tag>;
      },
    },
    {
      title: '操作', key: 'action', width: 60,
      render: (_: unknown, record: Project) => (
        <Button size="small" onClick={() => navigate(`/projects/${record.id}`)}>查看</Button>
      ),
    },
  ];

  return (
    <div style={{ padding: isMobile ? 8 : 24 }}>
      <div style={{ marginBottom: isMobile ? 12 : 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
        <div>
          <Title level={isMobile ? 3 : 2} style={{ marginBottom: 8 }}>项目管理</Title>
          <Paragraph type="secondary" style={{ marginBottom: 0 }}>管理项目信息、进度和预算</Paragraph>
        </div>
        <Button type="primary" icon={<PlusOutlined />} onClick={handleCreateClick}>
          {isMobile ? '新建' : '新建项目'}
        </Button>
      </div>

      <Card title="项目列表" size="small" styles={{ body: { padding: isMobile ? 8 : 24 } }}>
        {loading ? (
          <div style={{ textAlign: 'center', padding: 40 }}><Spin /></div>
        ) : (
          <Table
            dataSource={projects}
            columns={isMobile ? mobileColumns : desktopColumns}
            pagination={{ pageSize: isMobile ? 5 : 10, size: isMobile ? 'small' : 'default' }}
            scroll={isMobile ? { x: 350 } : undefined}
            size={isMobile ? 'small' : 'middle'}
          />
        )}
      </Card>

      <Modal
        title="快速新建项目"
        open={createModalVisible}
        onOk={handleCreateSubmit}
        onCancel={() => setCreateModalVisible(false)}
        confirmLoading={createLoading}
        okText="创建"
        cancelText="取消"
        width={isMobile ? '95%' : 560}
        style={{ top: isMobile ? 10 : 40 }}
        destroyOnClose
      >
        <Form form={form} layout="vertical" size="middle">
          <Form.Item name="name" label="项目名称" rules={[{ required: true, message: '请输入项目名称' }]}>
            <Input placeholder="如：万象省赛塔尼县22kV线路工程" />
          </Form.Item>

          <Row gutter={8}>
            <Col span={12}>
              <Form.Item name="customer_id" label="客户">
                <Select showSearch optionFilterProp="label" allowClear placeholder="选择客户"
                  options={customers.map((c: any) => ({ value: c.id, label: c.name }))} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="project_manager_id" label="项目经理">
                <Select showSearch optionFilterProp="label" allowClear placeholder="选择项目经理"
                  options={users.map((u: any) => ({ value: u.id, label: u.name || u.username }))} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={8}>
            <Col span={12}>
              <Form.Item name="contract_amount" label="合同金额">
                <InputNumber style={{ width: '100%' }} min={0} placeholder="0" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="status" label="项目状态">
                <Select options={[
                  { value: 'planning', label: '规划中' },
                  { value: 'in_progress', label: '进行中' },
                  { value: 'completed', label: '已完成（补录历史项目）' },
                ]} />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={8}>
            <Col span={12}>
              <Form.Item name="start_date" label="开始日期">
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item name="end_date" label="结束日期">
                <DatePicker style={{ width: '100%' }} />
              </Form.Item>
            </Col>
          </Row>

          <Form.Item name="location" label="项目地点">
            <Input placeholder="如：老挝万象省" />
          </Form.Item>

          <Form.Item name="description" label="项目描述">
            <Input.TextArea rows={2} placeholder="简要描述项目内容" />
          </Form.Item>
        </Form>
      </Modal>

      <Modal
        title="删除确认"
        open={deleteModalVisible}
        onOk={handleDeleteConfirm}
        onCancel={() => setDeleteModalVisible(false)}
        confirmLoading={deleteLoading}
        okText="确认删除"
        cancelText="取消"
      >
        <div style={{ marginBottom: 16 }}>
          <p>确定要删除这个项目吗？此操作不可恢复。</p>
          <p>请输入管理员密码确认删除操作：</p>
        </div>
        <Input.Password placeholder="请输入管理员密码" value={deletePassword} onChange={(e) => setDeletePassword(e.target.value)} size="large" />
      </Modal>
    </div>
  );
};

export default ProjectsPage;