import {
  ActionType,
  Icon,
  PageList,
  SupplierPicker,
  ToolBar,
} from "@/components";
import { useShareAppMessage } from "@tarojs/taro";
import { useRef, useState } from "react";
import { business } from "@/services";
import hocAuth from "@/hocs/auth";
import { CommonComponent } from "@/types/typings";
import { View } from "@tarojs/components";
import dayjs from "dayjs";

export default hocAuth(function Page(props: CommonComponent) {
  const { shareOptions } = props;

  const [supplierVO, setSupplierVO] = useState<BusinessAPI.SupplierVO>();

  const actionRef = useRef<ActionType>();
  const toolbar: ToolBar = {
    selectRow: {
      onClick: async (orderSupplierVOList: BusinessAPI.OrderSupplierVO[]) => {
        console.log("orderSupplierVOList", orderSupplierVOList);
      },
    },
    search: {
      activeKey: "vehicleNo",
      defaultActiveKey: "vehicleNo",
      items: [
        {
          key: "vehicleNo",
          name: "车次号",
          placeholder: "请输入车次号",
        },
        {
          key: "plate",
          name: "车牌号",
          placeholder: "请输入车牌号",
        },
      ],
    },
    render: () => (
      <>
        <View className={"flex flex-row gap-2.5"}>
          <SupplierPicker
            onFinish={(supplierVO) => {
              setSupplierVO(supplierVO);
              actionRef.current?.reload();
            }}
            trigger={
              <View
                className={`"border-2 border-primary flex h-6 items-center rounded-md px-2.5`}
              >
                <View className={"text-primary text-xs"}>
                  {supplierVO?.name || "瓜农"}
                </View>
                {supplierVO?.name ? (
                  <Icon
                    name={"circle-xmark"}
                    size={16}
                    onClick={(event) => {
                      setSupplierVO(undefined);
                      actionRef.current?.reload();
                      event.stopPropagation();
                    }}
                  />
                ) : (
                  <Icon name={"chevron-down"} size={16} />
                )}
              </View>
            }
          />
        </View>
      </>
    ),
  };

  useShareAppMessage((res) => {
    console.log("useShareAppMessage1", res, shareOptions);
    // 如果是按钮触发的转发，使用默认配置
    if (res.from === "button") {
      return shareOptions;
    }
    // 页面转发使用设置的配置
    return {};
  });

  return (
    <PageList<BusinessAPI.OrderSupplierVO, BusinessAPI.OrderSupplierPageQry>
      rowId={"orderSupplierId"}
      itemHeight={182}
      type={"infinite"}
      actionRef={actionRef}
      render={(orderSupplierVO: BusinessAPI.OrderSupplierVO, index) => (
        <View className={"mb-2.5 flex-1"} key={index}>
          <View
            className={
              "relative flex flex-col divide-y-2 divide-neutral-100 rounded-lg bg-white p-2.5"
            }
          >
            <View className="flex-1">
              <View className="flex items-start justify-between">
                <View>
                  <View className="text-base font-medium text-gray-800">
                    {orderSupplierVO.name} (
                    {orderSupplierVO.orderVehicle?.origin}-
                    {orderSupplierVO.orderVehicle?.destination})
                  </View>
                </View>
                {/*<View className="rounded bg-gray-100 px-2 py-1 text-xs text-gray-800">*/}
                {/*  草稿*/}
                {/*</View>*/}
              </View>
              <View className="my-1 flex flex-row flex-wrap gap-1 text-sm text-gray-600">
                <View className="text-primary">
                  {orderSupplierVO.orderVehicle?.vehicleNo
                    ? "第" + orderSupplierVO.orderVehicle?.vehicleNo + "车"
                    : "暂未生成车次"}
                </View>
                <View>
                  {dayjs(orderSupplierVO.orderVehicle?.deliveryTime).format(
                    "MM-DD",
                  )}
                </View>
                <View>|</View>
                <View>{orderSupplierVO.netWeight}斤</View>
                <View>|</View>
                <View>¥{orderSupplierVO.invoiceAmount}</View>
              </View>
              <View className="text-xs text-gray-500">
                {`${orderSupplierVO.productName} | 品种:`}
              </View>
            </View>
          </View>
        </View>
      )}
      toolbar={toolbar}
      request={async (params) => {
        const {
          data: { data, success, notEmpty },
        } = await business.orderSupplier.pageOrderSupplier({
          orderSupplierPageQry: {
            ...params,
            ...(supplierVO
              ? {
                  supplierId: supplierVO.supplierId,
                }
              : {}),
          },
        });

        return {
          data,
          success,
          hasMore: notEmpty,
        };
      }}
      pagination={{
        pageSize: 10,
      }}
    />
  );
});