import hocAuth from "@/hocs/auth";
import { CommonComponent } from "@/types/typings";
import { useEffect, useState } from "react";
import { Text, View } from "@tarojs/components";
import { Button, SafeArea, Toast } from "@nutui/nutui-react-taro";
import Taro from "@tarojs/taro";
import { business } from "@/services";
import { buildUrl } from "@/utils";
import { CopyText } from "@/components";

export default hocAuth(function Page(props: CommonComponent) {
  const { router, setLoading } = props;
  const orderId = router.params.orderId as string;

  const [purchaseOrder, setPurchaseOrder] =
    useState<BusinessAPI.PurchaseOrderVO>();

  const init = async (orderId: string) => {
    setLoading(true);
    try {
      // 获取采购单信息
      const { data: purchaseData } =
        await business.purchaseOrder.showPurchaseOrder({
          purchaseOrderShowQry: {
            orderId: orderId,
          },
        });

      if (purchaseData.success) {
        setPurchaseOrder(purchaseData.data);
      }
    } catch (error) {
      Toast.show("toast", {
        icon: "fail",
        title: "提示",
        content: "获取采购单信息失败",
      });
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    if (orderId) {
      init(orderId);
    }
  }, [orderId]);

  // 查看采购单详情
  const viewPurchaseOrderDetail = () => {
    if (purchaseOrder?.orderId) {
      Taro.navigateTo({
        url: buildUrl("/pages/audit/audit", {
          orderId: purchaseOrder.orderId,
        }),
      });
    }
  };

  return (
    <View className="flex flex-1 flex-col gap-2.5">
      <View className="flex flex-1 flex-col items-center justify-start bg-gray-100 p-2.5">
        <View className="mb-2.5 flex h-16 w-16 items-center justify-center rounded-full bg-green-100">
          <Text className="text-2xl text-green-600">✓</Text>
        </View>

        <View className="mb-2.5 text-xl font-bold text-gray-800">
          采购单已提交审批
        </View>

        <View className="mb-2.5 text-sm text-gray-600">等待老板审批中</View>

        <View className="mb-2.5 text-xs text-gray-400">
          您可以通过以下操作继续处理
        </View>

        <View className="w-full rounded-lg bg-white p-2.5 shadow-md">
          <View className="mb-2.5 border-b border-gray-200 pb-2">
            <Text className="text-lg font-semibold">单据信息</Text>
          </View>

          <View className="mb-2.5 flex flex-col gap-2.5">
            <View className="flex flex-row justify-between">
              <Text className="text-neutral-darker text-sm">采购单号:</Text>
              <CopyText copyData={purchaseOrder?.orderSn || "-"}>
                <Text className="text-sm font-medium">
                  {purchaseOrder?.orderSn || "-"}
                </Text>
              </CopyText>
            </View>

            <View className="flex flex-row justify-between">
              <Text className="text-neutral-darker text-sm">车次号:</Text>
              <Text className="text-sm font-medium">
                {purchaseOrder?.orderVehicle?.vehicleNo || "-"}
              </Text>
            </View>

            <View className="flex flex-row justify-between">
              <Text className="text-neutral-darker text-sm">经销商:</Text>
              <Text className="text-sm font-medium">
                {purchaseOrder?.orderVehicle?.dealerName || "-"}
              </Text>
            </View>

            <View className="flex flex-row justify-between">
              <Text className="text-neutral-darker text-sm">状态:</Text>
              <Text className="text-sm font-medium text-green-600">
                已提交审核
              </Text>
            </View>
          </View>

          <View className="border-t border-gray-200 pt-2.5">
            <View className="mb-2">
              <Text className="text-lg font-semibold">快捷操作</Text>
            </View>

            <View className="flex flex-col gap-3">
              <Button
                type="primary"
                size={"xlarge"}
                block
                onClick={viewPurchaseOrderDetail}
              >
                查看采购单详情
              </Button>
            </View>
          </View>
        </View>
      </View>

      <View className={"sticky bottom-0 z-10 bg-white"}>
        <View className="flex justify-between gap-2 border-t border-gray-200 p-2.5">
          <View className="flex-1">
            <Button
              type="default"
              size={"xlarge"}
              block
              onClick={() =>
                Taro.switchTab({
                  url: buildUrl("/pages/main/index/index"),
                })
              }
            >
              返回首页
            </Button>
          </View>
        </View>
        <SafeArea position={"bottom"} />
      </View>
    </View>
  );
});