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

export default function CostDifferenceSection(props: {
  orderVO: BusinessAPI.OrderVO;
  onChange?: (orderVO: BusinessAPI.OrderVO) => void;
  readOnly?: boolean;
  calculator: OrderCalculator;
}) {
  const { orderVO, onChange, readOnly, calculator } = 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.costDifference === null ||
              orderDealer.costDifference === undefined
                ? calculator.getCostDifference()
                : orderDealer.costDifference
            }
            onSave={(newValue) => {
              onChange?.({
                ...orderVO,
                orderDealer: {
                  ...orderDealer,
                  costDifference: newValue,
                  profitSharing: calculator.getShareProfit(),
                },
              });
            }}
            readOnly={readOnly}
            label={"调整的金额"}
            unit="元"
            hint="点击金额可直接编辑"
            negative
          />

          <View className="flex flex-1 flex-col gap-2 pl-4">
            <View className="flex items-center justify-between">
              <Text className="text-sm text-gray-500">调整后的利润</Text>
            </View>
            <View className="flex items-center justify-between">
              <Text className="text-primary text-2xl font-bold text-nowrap">
                ￥ {calculator.getShareProfit() || 0}
              </Text>
            </View>
          </View>
        </View>
      </View>
    </View>
  );
}