import hocAuth from "@/hocs/auth";
import { CommonComponent } from "@/types/typings";
import Taro, { useDidShow } from "@tarojs/taro";
import { business } from "@/services";
import { useEffect, useState } from "react";
import { View } from "@tarojs/components";
import { SafeArea } from "@nutui/nutui-react-taro";
import {
  PurchaseOrderFinalApprove,
  PurchaseOrderRejectFinal,
} from "@/components";
import buildUrl from "@/utils/buildUrl";
import { formatCurrency, formatUnitPrice } from "@/utils/format";
import { PurchaseOrderCalculator } from "@/utils/PurchaseOrderCalculator";

export default hocAuth(function Page(props: CommonComponent) {
  const { router, isInitialized, setIsInitialized } = props;

  const orderId = router.params
    .orderId as BusinessAPI.PurchaseOrderVO["orderId"];

  const [purchaseOrderVO, setPurchaseOrderVO] =
    useState<BusinessAPI.PurchaseOrderVO>();

  const init = async (orderId: BusinessAPI.PurchaseOrderVO["orderId"]) => {
    const { data } = await business.purchaseOrder.showPurchaseOrder({
      purchaseOrderShowQry: {
        orderId,
      },
    });

    if (data.success) {
      setPurchaseOrderVO(data.data);
    }
  };

  useEffect(() => {
    if (orderId && !isInitialized) {
      init(orderId).then(() => {
        setIsInitialized(true);
      });
    }
  }, []);

  useDidShow(() => {
    if (orderId && isInitialized) {
      init(orderId).then();
    }
  });

  if (!purchaseOrderVO) {
    return;
  }

  const calculator = new PurchaseOrderCalculator(purchaseOrderVO);
  return (
    <>
      <View
        className={"flex flex-1 flex-col gap-2.5 p-2.5"}
        id={"purchase-order-approve"}
      >
        <View>
          <View className="flex justify-between space-x-2.5">
            <View className="price-card flex-1 rounded-lg bg-white p-3">
              <View className="mb-1 text-center text-sm text-gray-500">
                收购单价
              </View>
              <View className="flex flex-row items-center justify-center gap-2.5 text-center">
                <View className="text-primary text-3xl">
                  {formatUnitPrice(calculator.getAveragePurchasePrice())}
                </View>
                <View className="text-sm text-gray-500">元/斤</View>
              </View>
            </View>
            <View className="price-card flex-1 rounded-lg bg-white p-3">
              <View className="mb-1 text-center text-sm text-gray-500">
                市场报价
              </View>
              <View className="flex flex-row items-center justify-center gap-2.5 text-center">
                <View className="text-primary text-2xl">
                  {formatUnitPrice(calculator.getAverageSalesPrice())} 元
                </View>
                <View className="text-sm text-gray-500">元/斤</View>
              </View>
            </View>
          </View>
        </View>
        <View className="overflow-hidden rounded-lg bg-white shadow-sm">
          <View className="border-b border-gray-100 px-4 py-3">
            <View className="text-sm font-bold">成本明细</View>
          </View>
          <View className="grid grid-cols-2 divide-x divide-y divide-gray-100">
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">西瓜采购成本</View>
              <View className="font-medium">
                ￥{formatCurrency(calculator.getSupplierPurchaseCost())} 元
              </View>
            </View>
            {purchaseOrderVO.orderDealer?.freightCostFlag && (
              <View className="cost-item flex flex-col px-3 py-2">
                <View className="text-sm text-gray-500">运输费</View>
                <View className="font-medium">
                  ￥{purchaseOrderVO.orderVehicle.price} 元
                </View>
              </View>
            )}
            {purchaseOrderVO.orderCostList.map((item) => {
              return (
                item.price * item.count > 0 && (
                  <View
                    className="cost-item flex flex-col px-3 py-2"
                    key={item.itemId}
                  >
                    <View className="text-sm text-gray-500">{item.name}</View>
                    <View className="font-medium">
                      ￥{item.price * item.count} 元
                    </View>
                    {item.name === "人工费" && (
                      <View className="text-xs text-gray-500">
                        工头:
                        {purchaseOrderVO.foreman}
                      </View>
                    )}
                  </View>
                )
              );
            })}
            {purchaseOrderVO.orderDealer?.taxSubsidy && (
              <View className="cost-item flex flex-col px-3 py-2">
                <View className="text-sm text-gray-500">公司返点</View>
                <View className="font-medium">
                  ￥{purchaseOrderVO.orderDealer?.taxSubsidy} 元
                </View>
              </View>
            )}

            {purchaseOrderVO.orderDealer?.taxProvision && (
              <View className="cost-item flex flex-col px-3 py-2">
                <View className="text-sm text-gray-500">计提税金</View>
                <View className="font-medium">
                  ￥{purchaseOrderVO.orderDealer?.taxProvision} 元
                </View>
              </View>
            )}

            {purchaseOrderVO.orderDealer?.costDifference && (
              <View className="cost-item flex flex-col px-3 py-2">
                <View className="text-sm text-gray-500">调诚信志远分成</View>
                <View className="font-medium">
                  ￥{purchaseOrderVO.orderDealer?.costDifference} 元
                </View>
              </View>
            )}

            <View className="cost-total col-span-2 grid grid-cols-2 bg-yellow-50 px-3 py-2">
              <View className="flex flex-col">
                <View className="text-sm text-gray-500">成本合计</View>
                <View className="font-bold">
                  ￥{calculator.getMelonCost1()} 元
                </View>
              </View>
              <View className="flex flex-col">
                <View className="text-sm text-gray-500">成本单价</View>
                <View className="font-bold">
                  ￥{calculator.getSingleCost()} 元/斤
                </View>
              </View>
            </View>
          </View>
        </View>
        <View className="rounded-lg bg-white p-2.5 shadow-sm">
          <View className="flex items-center justify-between">
            <View className="text-gray-500">分成利润</View>
            <View className="profit-highlight text-primary text-3xl">
              ￥{calculator.getShareProfit()} 元
            </View>
          </View>
        </View>
      </View>

      {/* 按钮操作 */}
      <View className={"sticky bottom-0 z-10 bg-white"} id={"bottomBar"}>
        <View className="flex justify-between gap-2 border-t border-gray-200 p-2.5">
          {purchaseOrderVO.state === "WAITING_APPROVE" && (
            <>
              <View className={"flex-1"}>
                <PurchaseOrderRejectFinal
                  purchaseOrderVO={purchaseOrderVO}
                  size={"xlarge"}
                  onFinish={() => {
                    // 返回首页
                    Taro.redirectTo({
                      url: "/pages/purchase/approver/audit/list",
                    });
                  }}
                />
              </View>
              <View className={"flex-1"}>
                <PurchaseOrderFinalApprove
                  purchaseOrderVO={purchaseOrderVO}
                  size={"xlarge"}
                  onFinish={() => {
                    // 关闭当前页面并跳转到采购单审核通过页面
                    Taro.redirectTo({
                      url: buildUrl(`/pages/purchase/approver/audit/result`, {
                        orderId: purchaseOrderVO?.orderId,
                      }),
                    });
                  }}
                />
              </View>
            </>
          )}
        </View>
        <SafeArea position={"bottom"} />
      </View>
    </>
  );
});