import { View } from "@tarojs/components";
import classNames from "classnames";

export default function PackingSpec(props: { module: any }) {
  const { module } = props;
  const { config } = module;

  // 计算需要显示的列数
  const visibleColumnCount =
    [
      config.showBoxType,
      config.showQuantity,
      config.showUnitPrice,
      config.showAmount,
      config.showUnitWeight,
      config.showWeight,
    ].filter(Boolean).length + 1; // +1 是因为"规格："列总是显示

  return (
    <>
      <View
        className={classNames(`grid w-full gap-0 text-base`, {
          "grid-cols-1": visibleColumnCount === 1,
          "grid-cols-2": visibleColumnCount === 2,
          "grid-cols-3": visibleColumnCount === 3,
          "grid-cols-4": visibleColumnCount === 4,
          "grid-cols-5": visibleColumnCount === 5,
          "grid-cols-6": visibleColumnCount === 6,
          "grid-cols-7": visibleColumnCount === 7,
          "grid-cols-8": visibleColumnCount === 8,
        })}
      >
        <View className={`grid-span-1 flex items-end justify-center`}>
          规格：
        </View>
      </View>

      <View
        className={classNames(`grid w-full gap-0 text-base`, {
          "grid-cols-1": visibleColumnCount === 1,
          "grid-cols-2": visibleColumnCount === 2,
          "grid-cols-3": visibleColumnCount === 3,
          "grid-cols-4": visibleColumnCount === 4,
          "grid-cols-5": visibleColumnCount === 5,
          "grid-cols-6": visibleColumnCount === 6,
          "grid-cols-7": visibleColumnCount === 7,
          "grid-cols-8": visibleColumnCount === 8,
        })}
      >
        {config.columns.map((column: any, index: number) => {
          if (index === 0) {
            return (
              <View key={"title" + index} className="">
                &nbsp;
              </View>
            );
          }

          if (
            (column.dataIndex === "boxType" && config.showBoxType) ||
            (column.dataIndex === "quantity" && config.showQuantity) ||
            (column.dataIndex === "unitPrice" && config.showUnitPrice) ||
            (column.dataIndex === "amount" && config.showAmount) ||
            (column.dataIndex === "unitWeight" && config.showUnitWeight) ||
            (column.dataIndex === "weight" && config.showWeight)
          ) {
            return (
              <View
                key={"title" + index}
                className="flex items-end justify-center"
              >
                {column.title}
              </View>
            );
          }

          return <View key={"title" + index}></View>;
        })}
      </View>
      <View className={"table-border"}>
        {config.data?.map((item: any, index: number) => (
          <View
            key={index}
            className={classNames(`grid w-full gap-0 text-base`, {
              "grid-cols-1": visibleColumnCount === 1,
              "grid-cols-2": visibleColumnCount === 2,
              "grid-cols-3": visibleColumnCount === 3,
              "grid-cols-4": visibleColumnCount === 4,
              "grid-cols-5": visibleColumnCount === 5,
              "grid-cols-6": visibleColumnCount === 6,
              "grid-cols-7": visibleColumnCount === 7,
              "grid-cols-8": visibleColumnCount === 8,
              "border-t-0": index > 0,
            })}
          >
            <View className={"flex items-end justify-center"}>
              {item.boxSpecName}
            </View>

            <View className={"flex items-end justify-center"}>
              {item.boxType}
            </View>

            {config.showQuantity && (
              <View className={"flex items-end justify-center"}>
                {item.quantity}
              </View>
            )}

            {config.showUnitPrice && (
              <View className={"flex items-end justify-center"}>
                {item.unitPrice}
              </View>
            )}

            {config.showAmount && (
              <View className={"flex items-end justify-center"}>
                {item.amount}
              </View>
            )}

            {config.showUnitWeight && (
              <View className={"flex items-end justify-center"}>
                {item.unitWeight}
              </View>
            )}

            {config.showWeight && (
              <View className={"flex items-end justify-center"}>
                {item.weight}
              </View>
            )}
          </View>
        ))}

        <View
          className={classNames(`grid w-full gap-0 text-base`, {
            "grid-cols-1": visibleColumnCount === 1,
            "grid-cols-2": visibleColumnCount === 2,
            "grid-cols-3": visibleColumnCount === 3,
            "grid-cols-4": visibleColumnCount === 4,
            "grid-cols-5": visibleColumnCount === 5,
            "grid-cols-6": visibleColumnCount === 6,
            "grid-cols-7": visibleColumnCount === 7,
            "grid-cols-8": visibleColumnCount === 8,
          })}
        >
          <View className={`col-span-2 flex items-end justify-center`}>
            总件数
          </View>
          {config.showQuantity && (
            <View className={`col-span-1 flex items-end justify-center`}>
              {config.data?.reduce(
                (acc: any, cur: any) => acc + Number(cur.quantity),
                0,
              )}
            </View>
          )}
          {config.showUnitPrice && (
            <View className={`col-span-1 flex items-end justify-center`}></View>
          )}
          {config.showAmount && (
            <View className={`col-span-1 flex items-end justify-center`}>
              {config.data?.reduce(
                (acc: any, cur: any) => acc + Number(cur.amount),
                0,
              )}
            </View>
          )}
          {config.showUnitWeight && (
            <View className={`col-span-1 flex items-end justify-center`}></View>
          )}
          {config.showWeight && (
            <View className={`col-span-1 flex items-end justify-center`}>
              {config.data?.reduce(
                (acc: any, cur: any) => acc + Number(cur.weight),
                0,
              )}
            </View>
          )}
        </View>
      </View>
    </>
  );
}
