import { Text, View } from "@tarojs/components";
import { PriceEditor } from "@/components";
import { OrderCalculator } from "@/utils";

export default function ProductionLossSection(props: {
  orderVO: BusinessAPI.OrderVO;
  onChange?: (orderVO: BusinessAPI.OrderVO) => void;
  readOnly?: boolean;
  calculator: OrderCalculator;
}) {
  const { orderVO, onChange, calculator, readOnly } = props;
  const orderDealer = orderVO.orderDealer;

  return (
    <View className={"flex flex-col gap-2.5"}>
      {/* 卡片形式展示返点信息 */}
      <View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
        <View className="mb-2">
          <Text className="text-sm font-medium">产地损耗</Text>
        </View>

        <View className="flex">
          <PriceEditor
            value={
              orderDealer.lossAmount === null ||
              orderDealer.lossAmount === undefined
                ? calculator.getLossAmount()
                : orderDealer.lossAmount
            }
            onSave={(newValue) => {
              // 更新父组件的状态
              onChange?.({
                ...orderVO,
                orderDealer: {
                  ...orderDealer,
                  lossAmount: newValue,
                },
              });
            }}
            readOnly={readOnly}
            label="损耗金额"
            unit="元"
            hint="点击金额可直接编辑"
          />
        </View>
      </View>
    </View>
  );
}
