// 引入组件和类型
import { Gantt, Task, ViewMode } from './libs/gantt-task-react/index.modern.js';
import './libs/gantt-task-react/index.css'; // 引入样式

// 或者使用 CommonJS 格式
// const { Gantt, Task, ViewMode } = require('./libs/gantt-task-react/index.js');

import { Gantt, Task, ViewMode } from 'gantt-task-react';
import 'gantt-task-react/dist/index.css';

import React, { useState } from 'react';
import { Gantt, Task, ViewMode } from './libs/gantt-task-react/index.modern.js';
import { Modal, Input, Select, Button, DatePicker, Form, InputNumber } from 'antd';
import dayjs from 'dayjs';
import './libs/gantt-task-react/index.css';

const { Option } = Select;
const { RangePicker } = DatePicker;

// 新增任务弹框组件
const AddTaskModal: React.FC<{
  isOpen: boolean;
  onClose: () => void;
  parentTaskId: string;
  onConfirm: (taskData: Partial<Task>) => void;
}> = ({ isOpen, onClose, parentTaskId, onConfirm }) => {
  const [form] = Form.useForm();

  const handleSubmit = () => {
    form.validateFields().then((values) => {
      const taskData: Partial<Task> = {
        name: values.name,
        type: values.type,
        start: values.dateRange[0].toDate(),
        end: values.dateRange[1].toDate(),
        // 计划时间
        plannedStart: values.plannedDateRange ? values.plannedDateRange[0].toDate() : values.dateRange[0].toDate(),
        plannedEnd: values.plannedDateRange ? values.plannedDateRange[1].toDate() : values.dateRange[1].toDate(),
        // 实际时间
        actualStart: values.actualDateRange ? values.actualDateRange[0].toDate() : values.dateRange[0].toDate(),
        actualEnd: values.actualDateRange ? values.actualDateRange[1].toDate() : values.dateRange[1].toDate(),
        progress: values.progress || 0,
        project: parentTaskId,
      };
      onConfirm(taskData);
      form.resetFields();
      onClose();
    });
  };

  return (
    <Modal
      title="新增子任务"
      open={isOpen}
      onCancel={onClose}
      footer={[
        <Button key="back" onClick={onClose}>取消</Button>,
        <Button key="submit" type="primary" onClick={handleSubmit}>确定</Button>,
      ]}
    >
      <Form form={form} layout="vertical">
        <Form.Item name="name" label="任务名称" rules={[{ required: true, message: "请输入任务名称" }]}>
          <Input placeholder="请输入任务名称" />
        </Form.Item>
        <Form.Item name="type" label="任务类型" initialValue="task">
          <Select>
            <Option value="task">任务</Option>
            <Option value="milestone">里程碑</Option>
          </Select>
        </Form.Item>
        <Form.Item name="dateRange" label="基础时间范围" rules={[{ required: true, message: "请选择时间范围" }]}>
          <RangePicker showTime style={{ width: "100%" }} />
        </Form.Item>
        <Form.Item name="plannedDateRange" label="计划时间范围（可选）">
          <RangePicker showTime style={{ width: "100%" }} placeholder={["计划开始时间", "计划结束时间"]} />
        </Form.Item>
        <Form.Item name="actualDateRange" label="实际时间范围（可选）">
          <RangePicker showTime style={{ width: "100%" }} placeholder={["实际开始时间", "实际结束时间"]} />
        </Form.Item>
        <Form.Item name="progress" label="进度 (%)" initialValue={0}>
          <InputNumber min={0} max={100} style={{ width: "100%" }} />
        </Form.Item>
      </Form>
    </Modal>
  );
};

const MyGanttComponent = () => {
  const [tasks, setTasks] = useState<Task[]>([
    {
      start: new Date(2024, 0, 1),
      end: new Date(2024, 0, 15),
      name: '示例项目',
      id: 'ProjectSample',
      type: 'project',
      progress: 25,
      // 计划时间
      plannedStart: new Date(2024, 0, 1),
      plannedEnd: new Date(2024, 0, 15),
      // 实际时间 - 准时完成
      actualStart: new Date(2024, 0, 1),
      actualEnd: new Date(2024, 0, 15),
    },
    {
      start: new Date(2024, 0, 1),
      end: new Date(2024, 0, 5),
      name: '任务 1',
      id: 'Task1',
      type: 'task',
      progress: 50,
      project: 'ProjectSample',
      // 计划时间
      plannedStart: new Date(2024, 0, 1),
      plannedEnd: new Date(2024, 0, 5),
      // 实际时间 - 延误完成
      actualStart: new Date(2024, 0, 2),
      actualEnd: new Date(2024, 0, 7),
    }
  ]);

  // 弹框状态管理
  const [showAddModal, setShowAddModal] = useState(false);
  const [selectedParentTask, setSelectedParentTask] = useState<Task | null>(null);

  // 处理新增任务
  const handleAddTask = (parentTask: Task) => {
    setSelectedParentTask(parentTask);
    setShowAddModal(true);
  };

  // 处理任务变化
  const handleTaskChange = (task: Task) => {
    setTasks(tasks.map(t => (t.id === task.id ? task : t)));
  };

  return (
    <div>
      <Gantt
        tasks={tasks}
        viewMode={ViewMode.Day}
        onDateChange={handleTaskChange}
        onAddTask={handleAddTask}
        listCellWidth="140px"
        nameColumnWidth="200px"
        timeColumnLabels={{
          plannedStart: "计划开始时间",
          plannedEnd: "计划结束时间",
          actualStart: "实际开始时间",
          actualEnd: "实际结束时间",
        }}
        timeColumnWidths={{
          plannedStart: "180px",
          plannedEnd: "180px",
          actualStart: "180px",
          actualEnd: "180px",
        }}
        ganttHeight={400}
        columnWidth={65}
        operationsColumnWidth="120px"
        operationsColumnLabel="操作"
        // 自定义展开/折叠图标
        expandIcon={<PlusSquareOutlined style={{ fontSize: '14px' }} />}
        collapseIcon={<MinusSquareOutlined style={{ fontSize: '14px' }} />}
        // 双条形图样式配置
        barActualColor="#4CAF50"           // 实际条颜色 - 绿色
        barActualSelectedColor="#45a049"   // 选中状态实际条颜色
        barDelayColor="#FF9800"            // 延误部分颜色 - 橙色
        barBackgroundColor="#e0e0e0"       // 计划条背景颜色 - 灰色
        barBackgroundSelectedColor="#d0d0d0" // 选中状态计划条背景颜色
        // 表格样式配置
        tableStyles={{
          height: 400,                    // 表格高度
          borderColor: '#d9d9d9',        // 边框颜色
          rowBackgroundColor: '#ffffff',  // 奇数行背景色
          rowEvenBackgroundColor: '#f5f5f5', // 偶数行背景色
          cellPadding: '8px 12px',       // 单元格内边距
          headerBackgroundColor: '#fafafa', // 表头背景色
          headerTextColor: '#333333',    // 表头文字颜色
        }}
      />
      
      {/* 新增任务弹框 */}
      {showAddModal && selectedParentTask && (
        <AddTaskModal
          isOpen={showAddModal}
          onClose={() => {
            setShowAddModal(false);
            setSelectedParentTask(null);
          }}
          parentTaskId={selectedParentTask.id}
          onConfirm={(taskData) => {
            const newTask: Task = {
              id: `Task_${Date.now()}`,
              name: taskData.name || "新任务",
              type: taskData.type || "task",
              start: taskData.start || new Date(),
              end: taskData.end || new Date(),
              progress: taskData.progress || 0,
              project: selectedParentTask?.id,
              displayOrder: tasks.length + 1,
              plannedStart: taskData.plannedStart,
              plannedEnd: taskData.plannedEnd,
              actualStart: taskData.actualStart,
              actualEnd: taskData.actualEnd,
            };
            setTasks([...tasks, newTask]);
            setShowAddModal(false);
            setSelectedParentTask(null);
          }}
        />
      )}
    </div>
  );
};

export default MyGanttComponent;

<Gantt
  tasks={tasks}
  // 计划条（基线）
  barBackgroundColor="#e0e0e0"
  barBackgroundSelectedColor="#d0d0d0"
  // 实际条
  barActualColor="#4CAF50"
  barActualSelectedColor="#45a049"
  // 延误部分
  barDelayColor="#FF9800"
  // 其他...
/>

import React, { useRef } from 'react';
import { Gantt, ViewMode } from 'gantt-task-react';

export default function Demo() {
  const ref = useRef<any>(null);
  return (
    <>
      <button onClick={() => ref.current?.scrollToDate(new Date(), { align: 'center' })}>滚到今天(居中)</button>
      <Gantt
        // 需要依赖库版本 >= 本仓库当前版本
        // @ts-ignore
        ref={ref}
        tasks={[]}
        viewMode={ViewMode.Day}
      />
    </>
  );
}

<Gantt
  tasks={tasks}
  tableStyles={{
    height: 600,              // 设置表格高度为 600px
    borderColor: '#d9d9d9',   // 设置边框颜色
  }}
/>

<Gantt
  tasks={tasks}
  tableStyles={{
    // 设置表格高度（支持多种格式）
    height: 600,                    // 数字，自动转换为 "600px"
    // height: "600px",             // 字符串像素值
    // height: "100%",              // 百分比
    
    // 设置表格容器样式
    container: {
      borderRadius: '8px',
      boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      overflow: 'hidden',
    },
    
    // 设置边框颜色
    borderColor: '#d9d9d9',
    
    // 设置行背景色（斑马纹效果）
    rowBackgroundColor: '#ffffff',        // 奇数行背景色
    rowEvenBackgroundColor: '#f5f5f5',   // 偶数行背景色
    
    // 设置单元格内边距
    cellPadding: '8px 12px',
    
    // 设置表头样式
    headerBackgroundColor: '#fafafa',
    headerTextColor: '#333333',
    
    // 设置表头单元格样式
    headerCell: {
      fontWeight: 'bold',
      textTransform: 'uppercase',
      fontSize: '12px',
    },
    
    // 设置单元格样式
    cell: {
      fontSize: '14px',
      lineHeight: '1.5',
      color: '#333',
    },
    
    // 动态行样式（使用函数）
    row: (rowIndex) => ({
      // 每 5 行添加一个分隔线
      borderBottom: rowIndex % 5 === 0 
        ? '2px solid #1890ff' 
        : '1px solid #e8e8e8',
      // 根据行索引设置不同的背景色
      backgroundColor: rowIndex % 2 === 0 
        ? '#ffffff' 
        : '#f9f9f9',
    }),
  }}
/>

<Gantt
  tasks={tasks}
  tableStyles={{
    // 静态行样式（所有行使用相同样式）
    row: {
      borderBottom: '1px solid #e8e8e8',
      transition: 'background-color 0.2s',
    },
  }}
/>

<Gantt
  tasks={tasks}
  tableStyles={{
    height: "80vh",  // 使用视口高度
  }}
/>

<Gantt
  tasks={tasks}
  tableStyles={{
    header: {
      backgroundColor: '#001529',
      color: '#fff',
    },
    headerCell: {
      padding: '12px 16px',
      fontWeight: 600,
      fontSize: '13px',
    },
    headerTextColor: '#ffffff',
  }}
/>

const [tableHeight, setTableHeight] = useState(600);

useEffect(() => {
  const handleResize = () => {
    setTableHeight(window.innerHeight - 200);
  };
  window.addEventListener('resize', handleResize);
  handleResize();
  return () => window.removeEventListener('resize', handleResize);
}, []);

<Gantt
  tasks={tasks}
  tableStyles={{
    height: tableHeight,
  }}
/>

import { PlusSquareOutlined, MinusSquareOutlined } from "@ant-design/icons";

<Gantt
  tasks={tasks}
  // 自定义展开/折叠图标
  expandIcon={<PlusSquareOutlined style={{ fontSize: '14px' }} />}
  collapseIcon={<MinusSquareOutlined style={{ fontSize: '14px' }} />}
  // ... 其他属性
/>

const CustomExpandIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    <rect x="2" y="2" width="4" height="4" rx="1" />
    <rect x="10" y="2" width="4" height="4" rx="1" />
    <rect x="2" y="10" width="4" height="4" rx="1" />
    <rect x="10" y="10" width="4" height="4" rx="1" />
  </svg>
);

const CustomCollapseIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
    <rect x="2" y="2" width="12" height="2" rx="1" />
    <rect x="2" y="7" width="12" height="2" rx="1" />
    <rect x="2" y="12" width="12" height="2" rx="1" />
  </svg>
);

<Gantt
  tasks={tasks}
  expandIcon={<CustomExpandIcon />}
  collapseIcon={<CustomCollapseIcon />}
  // ... 其他属性
/>

<Gantt
  tasks={tasks}
  expandIcon={<span style={{ fontSize: '14px' }}>📋</span>}
  collapseIcon={<span style={{ fontSize: '14px' }}>📄</span>}
  // ... 其他属性
/>