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

interface CardProps {
  title: string;
  img: string;
  time: string;
}
const Card = (props: CardProps) => {
  const { title, img, time } = 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>
  );
};

/**
 * @description 签约商户
 */
const Contracted: FC = () => {
  const [qData, setQData] = useState<API.SignListDto[]>([]);

  useDidShow(() => {
    api.kitchenWaste.getSignListForWeChat().then((res) => {
      if (res.code === 200) {
        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.signTime).format("MM月DD日")}
              img=""
              title={v.businessName}
            />
          ))
        ) : (
          <Empty />
        )}

        <Button
          className="add-btn"
          plain
          onTap={() => {
            Taro.navigateTo({
              url: "/pages/kitchenWaste/pages/addMerchants/index",
            });
          }}
        >
          <Image src={addIcon} />
          <Text>添加签约商户</Text>
        </Button>
      </View>
    </Container>
  );
};
export default Contracted;
