import { ActionType, Icon, PageList, ToolBar } from "@/components";
import Taro, { useShareAppMessage } from "@tarojs/taro";
import { useRef } from "react";
import { business } from "@/services";
import hocAuth from "@/hocs/auth";
import { CommonComponent } from "@/types/typings";
import { Label, Text, View } from "@tarojs/components";
import dayjs from "dayjs";
import { buildUrl } from "@/utils";
import { Button } from "@nutui/nutui-react-taro";

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

  const actionRef = useRef<ActionType>();
  const toolbar: ToolBar<BusinessAPI.SupplierVO> = {
    search: {
      activeKey: "name",
      defaultActiveKey: "name",
      items: [
        {
          key: "name",
          name: "档口名称",
          placeholder: "请输入档口名称",
        },
      ],
    },
    actions: [
      <View className={"flex flex-row gap-2 p-3"} key={"create"}>
        <View className={"flex-1"}>
          <View
            className="bg-primary flex w-full flex-col items-center justify-center space-y-2 rounded-xl py-2.5 text-white"
            onClick={() => {
              Taro.navigateTo({
                url: buildUrl("/pages/stall/create"),
              });
            }}
          >
            <View className="text-base font-bold">登记档口</View>
          </View>
        </View>
      </View>,
    ],
  };

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

  return (
    <PageList<BusinessAPI.SupplierVO, BusinessAPI.SupplierPageQry>
      rowId={"supplierId"}
      itemHeight={182}
      type={"infinite"}
      actionRef={actionRef}
      render={(supplierVO: BusinessAPI.SupplierVO, index) => (
        <View className={"mb-2.5"} key={index}>
          <View
            className={
              "relative flex flex-col divide-y-2 divide-neutral-100 rounded-lg bg-white px-2.5"
            }
          >
            <View className={"flex flex-col divide-y-2 divide-neutral-100"}>
              <View className={"py-2.5"}>
                <View className={"flex flex-row items-center"}>
                  <View className={"flex flex-1 flex-col gap-2"}>
                    <View className={"flex flex-row gap-1"}>
                      {/* 复制 */}
                      <Text
                        className={"text-neutral-darkest text-xl font-bold"}
                      >
                        {supplierVO?.name}
                      </Text>
                    </View>
                  </View>
                  <Button
                    size={"small"}
                    type={"primary"}
                    fill={"none"}
                    icon={<Icon name={"pen-to-square"} size={18} />}
                    onClick={() => {
                      Taro.navigateTo({
                        url: buildUrl("/pages/stall/create", {
                          supplierId: supplierVO.supplierId,
                        }),
                      });
                    }}
                  />
                </View>
              </View>
              <View className={"py-2.5"}>
                <View className={"flex flex-col gap-2"}>
                  <View
                    className={
                      "flex flex-row items-center justify-between gap-2.5"
                    }
                  >
                    <Label className={"text-neutral-dark text-sm"}>
                      登记时间
                    </Label>
                    <Text className={"text-neutral-darkest text-sm"}>
                      {dayjs(supplierVO.createdAt).format("MM-DD HH:mm")}
                    </Text>
                  </View>
                  <View
                    className={
                      "flex flex-row items-center justify-between gap-2.5"
                    }
                  >
                    <Label className={"text-neutral-dark text-sm"}>
                      收款人姓名
                    </Label>
                    <Text className={"text-neutral-darkest text-sm"}>
                      {supplierVO.payeeName}
                    </Text>
                  </View>
                  <View
                    className={
                      "flex flex-row items-center justify-between gap-2.5"
                    }
                  >
                    <Label className={"text-neutral-dark text-sm"}>
                      银行卡号
                    </Label>
                    <Text className={"text-neutral-darkest text-sm"}>
                      {supplierVO.bankCard}
                    </Text>
                  </View>
                </View>
              </View>
            </View>
            <View className={"py-2.5"}>
              <View className={"flex flex-row justify-end gap-2"}>
                {/* 新建采购 */}
                <Button
                  size={"small"}
                  type={"default"}
                  onClick={() => {
                    Taro.navigateTo({
                      url: buildUrl("/pages/purchase/market/create", {
                        supplierId: supplierVO.supplierId,
                      }),
                    });
                  }}
                >
                  新建采购
                </Button>
              </View>
            </View>
          </View>
        </View>
      )}
      toolbar={toolbar}
      request={async (params) => {
        const {
          data: { data, success, notEmpty },
        } = await business.supplier.pageSupplier({
          supplierPageQry: {
            ...params,
            type: "OTHER_STALL",
          },
        });

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