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

export default function WeightInfo(props: { module: any }) {
  const { module } = props;
  const { config } = module;
  return (
    <>
      {config.data?.map((item: any, index: number) => {
        return (
          <View
            key={"weightInfo" + index}
            className={"preview grid w-full grid-cols-2 gap-0 text-base"}
          >
            {config.showNetWeight && (
              <View className={"col-span-1 grid grid-cols-4"}>
                <View className="col-span-1 flex items-end justify-center">
                  净重:
                </View>
                <View className="col-span-2 flex items-end justify-center border-b border-black">
                  {item.netWeight}
                </View>
                <View className="col-span-1 flex items-end justify-center border-b border-black">
                  {config.netWeightUnit === "1" ? "斤" : "公斤"}
                </View>
              </View>
            )}
            {config.showBoxWeight && (
              <View className={"col-span-1 grid grid-cols-4"}>
                <View className="col-span-1 flex items-end justify-center">
                  箱重:
                </View>
                <View className="col-span-2 flex items-end justify-center border-b border-black">
                  {item.boxWeight}
                </View>
                <View className="col-span-1 flex items-end justify-center border-b border-black">
                  {config.boxWeightUnit === "1" ? "斤" : "公斤"}
                </View>
              </View>
            )}
            {config.showGrossWeight && (
              <View className={"col-span-1 grid grid-cols-4"}>
                <View className="col-span-1 flex items-end justify-center">
                  毛重:
                </View>
                <View className="col-span-2 flex items-end justify-center border-b border-black">
                  {item.grossWeight}
                </View>
                <View className="col-span-1 flex items-end justify-center border-b border-black">
                  {config.grossWeightUnit === "1" ? "斤" : "公斤"}
                </View>
              </View>
            )}
            {config.showUnitPrice && (
              <View className={"col-span-1 grid grid-cols-4"}>
                <View className="col-span-1 flex items-end justify-center">
                  单价:
                </View>
                <View className="col-span-2 flex items-end justify-center border-b border-black">
                  {item.unitPrice}
                </View>
                <View className="col-span-1 flex items-end justify-center border-b border-black">
                  {config.unitPriceUnit === "1" ? "元/斤" : "元/公斤"}
                </View>
              </View>
            )}
            {config.showAmount && (
              <View className={"col-span-1 grid grid-cols-4"}>
                <View className="col-span-1 flex items-end justify-center">
                  金额:
                </View>
                <View className="col-span-2 flex items-end justify-center border-b border-black">
                  {item.totalAmount}
                </View>
                <View className="col-span-1 flex items-end justify-center border-b border-black">
                  元
                </View>
              </View>
            )}
            {config.showGrade && (
              <View className={"col-span-1 grid grid-cols-4"}>
                <View className="col-span-1 flex items-end justify-center">
                  品级:
                </View>
                <View className="col-span-3 flex items-end justify-center border-b border-black">
                  {item.watermelonGrade}
                </View>
              </View>
            )}
          </View>
        );
      })}
      <View className={"preview grid w-full grid-cols-2 gap-0 text-base"}>
        {config.showAccountCompany && (
          <View className={"col-span-1 grid grid-cols-4"}>
            <View className="col-span-1 flex items-end justify-center">
              入账公司:
            </View>
            <View className="col-span-3 flex items-end justify-center border-b border-black">
              {config.accountCompany}
            </View>
          </View>
        )}
        {config.showSumAmount && (
          <View className={"col-span-1 grid grid-cols-4"}>
            <View className="col-span-1 flex items-end justify-center">
              总计:
            </View>
            <View className="col-span-2 flex items-end justify-center border-b border-black">
              {config.sumAmount}
            </View>
            <View className="col-span-1 flex items-end justify-center border-b border-black">
              元
            </View>
          </View>
        )}
      </View>
    </>
  );
}
