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";

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;
  }

  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="text-center">
                <View className="price-highlight text-primary">5.80</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="text-center">
                <View className="price-highlight text-green-500">8.20</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">
                ￥{purchaseOrderVO.orderVehicle.price}
              </View>
            </View>
            <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>
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">商标费</View>
              <View className="font-medium">￥850</View>
            </View>
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">网套</View>
              <View className="font-medium">￥1,500</View>
            </View>
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">人工</View>
              <View className="font-medium">￥3,500</View>
              <View className="text-xs text-gray-500">工头: 张三</View>
            </View>
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">计提费</View>
              <View className="font-medium">￥600</View>
            </View>
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">空箱费</View>
              <View className="font-medium">￥300</View>
            </View>
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">代办费</View>
              <View className="font-medium">￥800</View>
            </View>
            <View className="cost-item flex flex-col px-3 py-2">
              <View className="text-sm text-gray-500">打码</View>
              <View className="font-medium">￥200</View>
            </View>
            <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>
            <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>
            <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">￥11,150</View>
              </View>
              <View className="flex flex-col">
                <View className="text-sm text-gray-500">成本单价</View>
                <View className="font-bold">
                  ￥0.58 <View className="text-sm text-gray-500">元/斤</View>
                </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">￥4,250</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_BOSS_APPROVE" && (
            <>
              <View className={"flex-1"}>
                <PurchaseOrderRejectFinal
                  purchaseOrderVO={purchaseOrderVO}
                  size={"xlarge"}
                  onFinish={() => {
                    // 返回首页
                    Taro.redirectTo({ url: "/pages/purchase/approver/list" });
                  }}
                />
              </View>
              <View className={"flex-1"}>
                <PurchaseOrderFinalApprove
                  purchaseOrderVO={purchaseOrderVO}
                  size={"xlarge"}
                  onFinish={() => {
                    // 关闭当前页面并跳转到采购单审核通过页面
                    Taro.redirectTo({
                      url: buildUrl(`/pages/purchase/approver/approved`, {
                        orderId: purchaseOrderVO?.orderId,
                      }),
                    });
                  }}
                />
              </View>
            </>
          )}
        </View>
        <SafeArea position={"bottom"} />
      </View>
    </>
  );
});