ERPTurbo_Client/packages/app-client/src/components/purchase/cost/CostCard.tsx

import { Text, View } from "@tarojs/components";
import { useState } from "react";
import { Dialog } from "@nutui/nutui-react-taro";
import { PriceEditor } from "@/components";
import CostCreate from "./CostCreate";

interface CostCardComponentProps {
  item: BusinessAPI.OrderCost;
  purchaseOrderVO: BusinessAPI.PurchaseOrderVO;
  readOnly?: boolean;
  onEdit: (
    editedItem: BusinessAPI.OrderCost,
    editedItemList: BusinessAPI.OrderCostItem[],
  ) => void;
  onDelete: (orderCostId: string) => void;
  costList: BusinessAPI.CostVO[];
}

export default function CostCard(props: CostCardComponentProps) {
  const {
    item: orderCost,
    purchaseOrderVO,
    readOnly,
    onEdit,
    onDelete,
    costList,
  } = props;

  // 控制 CostCreate 组件的显示状态
  const [showEditModal, setShowEditModal] = useState(false);

  const amount = orderCost.count * orderCost.price;

  const orderCostItemList = purchaseOrderVO.orderCostItemList?.filter(
    (orderCostItem) =>
      orderCost.costItemIds?.includes(orderCostItem.costItemId!),
  );

  const handleDelete = () => {
    Dialog.open("dialog", {
      title: "确认删除",
      content: `确定要删除费用"${orderCost.name}"吗？`,
      confirmText: "确认",
      cancelText: "取消",
      onConfirm: () => {
        onDelete(orderCost.orderCostId);
        Dialog.close("dialog");
      },
      onCancel: () => {
        Dialog.close("dialog");
      },
    });
  };

  return (
    <>
      <View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
        <View className="mb-2 flex items-center justify-between">
          <Text className="text-sm font-medium">{orderCost.name}</Text>
          {!readOnly && (
            <View className="flex gap-2">
              {orderCostItemList.length > 0 && (
                <View
                  className="cursor-pointer rounded-lg bg-blue-100 px-3 py-1 text-xs font-medium text-blue-600 transition-colors hover:bg-blue-200"
                  onClick={() => setShowEditModal(true)}
                >
                  编辑
                </View>
              )}
              <View
                className="cursor-pointer rounded-lg bg-red-100 px-3 py-1 text-xs font-medium text-red-600 transition-colors hover:bg-red-200"
                onClick={handleDelete}
              >
                删除
              </View>
            </View>
          )}
        </View>

        <View className="flex flex-1">
          <PriceEditor
            value={amount}
            onSave={(newAmount) => {
              const newPrice = newAmount / orderCost.count;
              const editedItem = {
                ...orderCost,
                price: newPrice,
              };

              // 调用 onEdit 回调更新数据
              onEdit(editedItem, orderCostItemList || []);
            }}
            readOnly={readOnly}
            label="金额"
            unit="元"
            icon="money-bill"
            hint="点击金额可直接编辑"
          />

          {orderCostItemList.length > 0 && (
            <View className="flex flex-1 flex-col gap-2 pl-4">
              {orderCostItemList.map((orderCostItem) => {
                return (
                  <View
                    key={orderCostItem.orderCostItemId}
                    className="flex items-center justify-between"
                  >
                    <Text className="text-sm text-gray-500">
                      {orderCostItem.name}
                    </Text>
                    <Text className="text-sm font-medium">
                      {orderCostItem.count} {orderCostItem.unit}
                    </Text>
                  </View>
                );
              })}
            </View>
          )}
        </View>
      </View>

      {/* 使用 CostCreate 组件进行编辑 */}
      <CostCreate
        type={orderCost.type}
        costList={costList}
        visible={showEditModal}
        editMode
        orderCost={orderCost}
        orderCostItemList={orderCostItemList}
        onClose={() => setShowEditModal(false)}
        onSave={(editedItem, editedItemList) => {
          onEdit(editedItem, editedItemList);
          setShowEditModal(false);
        }}
      />
    </>
  );
}