import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input, Space, message } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';

const ServiceType = () => {
  const [data, setData] = useState([]);
  const [visible, setVisible] = useState(false);
  const [form] = Form.useForm();
  const [editingId, setEditingId] = useState(null);

  // 表格列定义
  const columns = [
    {
      title: '服务类型',
      dataIndex: 'serviceType',
      key: 'serviceType',
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button type="link" onClick={() => handleEdit(record)}>
            编辑
          </Button>
          <Button type="link" danger onClick={() => handleDelete(record.id)}>
            删除
          </Button>
        </Space>
      ),
    },
  ];

  // 处理添加/编辑表单提交
  const handleSubmit = async (values) => {
    try {
      if (editingId) {
        // 编辑操作
        // await updateServiceType({ ...values, id: editingId });
        message.success('更新成功');
      } else {
        // 添加操作
        // await addServiceType(values);
        message.success('添加成功');
      }
      setVisible(false);
      form.resetFields();
      // 重新加载数据
      // loadData();
    } catch (error) {
      message.error('操作失败');
    }
  };

  // 编辑操作
  const handleEdit = (record) => {
    setEditingId(record.id);
    form.setFieldsValue({
      serviceType: record.serviceType,
      details: record.details || [],
    });
    setVisible(true);
  };

  // 删除操作
  const handleDelete = async (id) => {
    try {
      // await deleteServiceType(id);
      message.success('删除成功');
      // 重新加载数据
      // loadData();
    } catch (error) {
      message.error('删除失败');
    }
  };

  return (
    <div>
      <Button
        type="primary"
        onClick={() => {
          setEditingId(null);
          form.resetFields();
          setVisible(true);
        }}
        style={{ marginBottom: 16 }}
      >
        <PlusOutlined /> 新增服务类型
      </Button>

      <Table columns={columns} dataSource={data} rowKey="id" />

      <Modal
        title={editingId ? '编辑服务类型' : '新增服务类型'}
        open={visible}
        onOk={() => form.submit()}
        onCancel={() => {
          setVisible(false);
          form.resetFields();
        }}
        width={800}
      >
        <Form form={form} onFinish={handleSubmit}>
          <Form.Item
            label="服务类型"
            name="serviceType"
            rules={[{ required: true, message: '请输入服务类型' }]}
          >
            <Input />
          </Form.Item>

          <Form.List name="details">
            {(fields, { add, remove }) => (
              <>
                {fields.map(({ key, name, ...restField }) => (
                  <Space key={key} align="baseline">
                    <Form.Item
                      {...restField}
                      name={[name, 'projectDetail']}
                      rules={[{ required: true, message: '请输入项目明细' }]}
                    >
                      <Input placeholder="项目明细" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'description']}
                      rules={[{ required: true, message: '请输入描述' }]}
                    >
                      <Input placeholder="描述" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'quantity']}
                      rules={[{ required: true, message: '请输入数量' }]}
                    >
                      <Input placeholder="数量" type="number" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'unit']}
                      rules={[{ required: true, message: '请输入单位' }]}
                    >
                      <Input placeholder="单位" />
                    </Form.Item>
                    <Form.Item
                      {...restField}
                      name={[name, 'price']}
                      rules={[{ required: true, message: '请输入单价' }]}
                    >
                      <Input placeholder="单价" type="number" />
                    </Form.Item>
                    <DeleteOutlined onClick={() => remove(name)} />
                  </Space>
                ))}
                <Form.Item>
                  <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                    添加项目明细
                  </Button>
                </Form.Item>
              </>
            )}
          </Form.List>
        </Form>
      </Modal>
    </div>
  );
};

export default ServiceType;