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

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

  return (
    <View key={module.id} className={"table-border"}>
      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">车次:</View>
        <View className="col-span-2 p-2 text-left">{config.vehicleNumber}</View>
      </View>
      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">收货地:</View>
        <View className="col-span-2 p-2 text-left">{config.destination}</View>
      </View>
      {config.showShippingFrom && (
        <View className="grid w-full grid-cols-3 gap-0 text-base">
          <View className="p-2 text-left font-bold">产地：</View>
          <View className="col-span-2 p-2 text-left">
            {config.shippingFrom}
          </View>
        </View>
      )}
      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">供应商:</View>
        <View className="col-span-2 p-2 text-left">
          {config.accountCompany}
        </View>
      </View>
      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">发车时间:</View>
        <View className="col-span-2 p-2 text-left">{config.date}</View>
      </View>
      {config.showEstimatedArrivalTime && (
        <View className="grid w-full grid-cols-3 gap-0 text-base">
          <View className="p-2 text-left font-bold">到达时间:</View>
          <View className="col-span-2 p-2 text-left">
            {config.estimatedArrivalTime}
          </View>
        </View>
      )}
      {config.data?.map((item: any, number: number) => {
        return (
          <Fragment key={number}>
            {config.showGrade && (
              <View className="grid w-full grid-cols-3 gap-0 text-base">
                <View className="p-2 text-left font-bold">品名:</View>
                <View className="col-span-2 p-2 text-left">
                  {item.watermelonGrade}
                </View>
              </View>
            )}
            <View className="grid w-full grid-cols-3 gap-0 text-base">
              <View className="p-2 text-left font-bold">发货重量:</View>
              <View className="col-span-2 p-2 text-left">
                以公司入库重量为准。
              </View>
            </View>
            <View className="grid w-full grid-cols-3 gap-0 text-base">
              <View className="p-2 text-left font-bold">净瓜单价：</View>
              <View className="col-span-2 p-2 text-left">
                {item.unitPrice}
                {config.unitPriceUnit === "1" ? "元/斤" : "元/公斤"}
              </View>
            </View>
          </Fragment>
        );
      })}

      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">大约重量：</View>
        <View className="p-2 text-left">
          {config.data?.reduce((acc: any, cur: any) => acc + cur.netWeight, 0)}
        </View>
        <View className="p-2 text-left">斤</View>
      </View>
      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">箱数</View>
        <View className="p-2 text-left">
          {config.data?.reduce((acc: any, cur: any) => acc + cur.boxCount, 0)}
        </View>
        <View className="p-2 text-left">件</View>
      </View>
      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">车号:</View>
        <View className="col-span-2 p-2 text-left">{config.licensePlate}</View>
      </View>
      <View className="grid w-full grid-cols-3 gap-0 text-base">
        <View className="p-2 text-left font-bold">手机号:</View>
        <View className="col-span-2 p-2 text-left">{config.driverPhone}</View>
      </View>
    </View>
  );
}