这段代码有点乱，请帮我重写一下：
import React, { useState } from "react";
import { Row, Col, Form, Select, Card, Button, Input, InputNumber } from "antd";
import { PlusOutlined, MinusCircleOutlined } from "@ant-design/icons";
import moment from "moment";
import Cookies from "js-cookie";
// api
import { valueCardList } from "@/api/backends/value_card";

// token
const token = Cookies.get("token");
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
    },
};

const formItemLayoutWithOutLabel = {
    wrapperCol: {
        xs: { span: 24, offset: 0 },
        sm: { span: 20, offset: 4 },
    },
};

const CardItem = ({ field, remove }) => {
    const [itemType, setItemType] = useState("value_card");
    const handleSetItemType = (value) => {
        setItemType(value);
    };

    const [value_card_list, setValueCardList] = useState([]);
    const [selected_value_card_id, setSelectedValueCardId] = useState(null);
    const handleSearchValueCardList = async () => {
        const msg = await valueCardList(token);
        setValueCardList(msg.data);
    };

    const options_value_card = value_card_list.map((d) => (
        <Select.Option key={d.id}>{d.name}</Select.Option>
    ));

    return (
        <Col key={field.key} span={8}>
            <Card
                key={field.key}
                title={`品项 ${field.name + 1}`}
                extra={
                    <MinusCircleOutlined
                        onClick={() => {
                            remove(field.name);
                        }}
                    />
                }
                style={{ marginBottom: 20 }}
            >
                <Row>
                    <Col span={24}>
                        <Form.Item
                            {...field}
                            name={[field.name, "item_type"]}
                            rules={[
                                {
                                    required: true,
                                    message: "请选择品项类型！",
                                },
                            ]}
                            label="品项类型"
                        >
                            <Select
                                placeholder="请选择品项类型"
                                defaultActiveFirstOption={false}
                                filterOption={false}
                                onChange={handleSetItemType}
                            >
                                <Select.Option value="value_card">
                                    储值卡
                                </Select.Option>
                                <Select.Option value="service">
                                    服务
                                </Select.Option>
                                <Select.Option value="product">
                                    产品
                                </Select.Option>
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={24}>
                        <Form.Item
                            {...field}
                            name={[field.name, "card_id"]}
                            rules={[
                                {
                                    required: true,
                                    message: "请选择卡项名！",
                                },
                            ]}
                            label="卡项名"
                        >
                            <Select
                                value={selected_value_card_id}
                                placeholder="请选择卡项"
                                defaultActiveFirstOption={false}
                                filterOption={false}
                                onDropdownVisibleChange={
                                    handleSearchValueCardList
                                }
                            >
                                {options_value_card}
                            </Select>
                        </Form.Item>
                    </Col>
                </Row>
                {itemType === "value_card" && (
                    <>
                        <Form.Item {...field} label="卡项名称">
                            <Input placeholder="请输入卡项名称" />
                        </Form.Item>
                        <Form.Item label="储值金额">
                            <InputNumber placeholder="请输入储值金额" />
                        </Form.Item>
                        <Form.Item label="付款金额">
                            <InputNumber placeholder="请输入付款金额" />
                        </Form.Item>
                    </>
                )}
                {itemType === "service" && (
                    <>
                        <Form.Item {...field} label="服务名称">
                            <Input placeholder="请输入服务名称" />
                        </Form.Item>
                        <Form.Item label="服务金额">
                            <InputNumber placeholder="请输入服务金额" />
                        </Form.Item>
                        <Form.Item label="付款金额">
                            <InputNumber placeholder="请输入付款金额" />
                        </Form.Item>
                    </>
                )}
                {itemType === "product" && (
                    <>
                        <Form.Item {...field} label="产品名称">
                            <Input placeholder="请输入产品名称" />
                        </Form.Item>
                        <Form.Item label="产品金额">
                            <InputNumber placeholder="请输入产品金额" />
                        </Form.Item>
                        <Form.Item label="付款金额">
                            <InputNumber placeholder="请输入付款金额" />
                        </Form.Item>
                    </>
                )}
            </Card>
        </Col>
    );
};

const OrderValueCard = () => {
    const [value_card_list, setValueCardList] = useState([]);
    const [date_starts, setDateStarts] = useState(null);
    const [date_ends, setDateEnds] = useState(null);

    const dateOnChange = (dates, dateStrings) => {
        if (dates) {
            setDateStarts(dateStrings[0]);
            setDateEnds(dateStrings[1]);
        } else {
            console.log("Clear");
        }
    };

    const disabledDate = (current) => {
        return current < moment().subtract(0, "day");
    };

    const handleSearchValueCardList = async () => {
        const msg = await valueCardList(token);
        setValueCardList(msg.data);
        console.log("value card list: ", msg);
    };

    const options_value_card = value_card_list.map((d) => (
        <Select.Option key={d.id}>{d.name}</Select.Option>
    ));

    return (
        <div>
            <Row gutter={16} style={{ marginBottom: 20 }}>
                <Col span={24}>
                    <Form.List name="order_value_card">
                        {(fields, { add, remove }) => (
                            <>
                                <Row gutter={[16]}>
                                    {fields.map((field, index) => (
                                        <CardItem
                                            field={field}
                                            remove={remove}
                                        />
                                    ))}
                                </Row>{" "}
                                <Form.Item>
                                    <Button
                                        type="dashed"
                                        onClick={() => add()}
                                        block
                                        icon={<PlusOutlined />}
                                        style={{ height: 50 }}
                                    >
                                        添加品项
                                    </Button>
                                </Form.Item>
                            </>
                        )}
                    </Form.List>
                </Col>
            </Row>
        </div>
    );
};

const CreateOrder = ({ parentState }) => {
    let state = parentState;
    return (
        <div>
            <Form>
                <OrderValueCard parentState={state} />
            </Form>
        </div>
    );
};

export default CreateOrder;