import { FC, useState } from "react";
import "./index.less";
import { View, Text, Image } from "@tarojs/components";
import Container from "@/components/Container";
import def_dp from "@/assets/images/kitchenWaste/def_dp.png";
import api from "@/services";
import { useDidShow } from "@tarojs/taro";
import dayjs from "dayjs";
import Empty from "@/components/Empty";

interface CardProps {
  title: string;
  img: string;
  time: string;
  value: string | number;
  carNumber: string;
  name: string;
}
const Card = (props: CardProps) => {
  const { title, img, time, value, carNumber, name } = props;
  return (
    <View className="card-wrap">
      <View className="titleBox">
        <View className="l-info">
          <Image className="pt" src={!img ? def_dp : img} />
          <View className="title">
            <Text>{title}</Text>
          </View>
        </View>
        <Text className="time">{time}收运</Text>
      </View>
      <View className="tagBox">
        <Text className="num">{value}</Text>
        <Text className="unit">kg</Text>
        <View className="car-num">
          <Text>{carNumber}</Text>
        </View>
        <View className="user-name">
          <Text>{name}</Text>
        </View>
      </View>
    </View>
  );
};

/**
 * @description 收运记录
 */
const Record: FC = () => {
  const [qData, setQData] = useState<API.CollectionListDto[]>([]);

  useDidShow(() => {
    api.kitchenWaste.getCollectionListForWeChat().then((res) => {
      if (res.code === 200) {
        setQData(res.data);
      }
    });
  });
  return (
    <Container title="收运记录">
      <View className="main">
        {qData?.length > 0 ? (
          qData.map((v) => (
            <Card
              key={v.businessId}
              time={dayjs(v.collectionTime).format("MM月DD日 hh:mm")}
              img=""
              title={v.businessName}
              value={v.weight}
              carNumber={v.carNum}
              name={v.personnelName}
            />
          ))
        ) : (
          <Empty />
        )}
      </View>
    </Container>
  );
};
export default Record;
