import { ActionType, Icon, PageList, Phone, 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 = {
    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/supplier/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/supplier/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>
                    <View
                      className={
                        "flex flex-1 flex-row items-center justify-end gap-1"
                      }
                    >
                      {supplierVO.phone && <Phone phone={supplierVO.phone} />}
                    </View>
                  </View>
                  <View
                    className={
                      "flex flex-row items-center justify-between gap-2.5"
                    }
                  >
                    <Label className={"text-neutral-dark text-sm"}>
                      开票信息
                    </Label>
                    <View
                      className={
                        "flex flex-1 flex-row items-center justify-end gap-1"
                      }
                    >
                      已开票 12 张 | 待开票 2 张
                    </View>
                  </View>
                </View>
              </View>
            </View>
            <View className={"py-2.5"}>
              <View className={"flex flex-row justify-end gap-2"}>
                {/* 联系 */}
                {supplierVO.phone && (
                  <Button
                    size={"small"}
                    type={"default"}
                    onClick={() => {
                      Taro.makePhoneCall({
                        phoneNumber: supplierVO.phone!,
                      });
                    }}
                  >
                    联系
                  </Button>
                )}
                {/* 新建采购 */}
                <Button
                  size={"small"}
                  type={"default"}
                  onClick={() => {
                    Taro.navigateTo({
                      url: buildUrl("/pages/purchase/made/create", {
                        supplierId: supplierVO.supplierId,
                      }),
                    });
                  }}
                >
                  新建采购
                </Button>
                {/* 协助开票 */}
                <Button
                  size={"small"}
                  type={"primary"}
                  onClick={() => {
                    Taro.navigateTo({
                      url: buildUrl("/pages/invoice/upload", {
                        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: "FARMER",
          },
        });

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