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

interface ImgNumProps {
  title: string;
  number?: number | string;
  unit: string;
  color?: string;
  img: string;
  path: string;
}

const ImgNum = (props: ImgNumProps) => {
  const { title, number, unit, color, img, path } = props;

  const handleJumpToPage = () => {
    Taro.navigateTo({
      url: path,
    });
  };

  return (
    <View className="item" onTap={handleJumpToPage}>
      <Image src={img} />
      <View className="num" style={{ color }}>
        <Text>
          {number ?? 0}
          <Text className="unit">{unit}</Text>
        </Text>
      </View>
      <View className="shName">
        <Text>{title}</Text>
      </View>
    </View>
  );
};

const Index: FC = () => {
  const [qData, setQData] = useState<API.StatisticsDto>();
  const [recommendData, setRecommendData] = useState<API.RecommendDto[]>();
  const { upCollectionInfo, collectionInfo } = globalStore();

  useDidShow(() => {
    api.kitchenWaste.queryStatisticsForWeChat().then((res) => {
      if (res.code === 200) {
        setQData(res.data);
      }
    });

    api.kitchenWaste.getEntitieInfo().then((res) => {
      if (res.code === 200) {
        upCollectionInfo(res.data);
      }
    });

    Taro.getLocation({
      type: "wgs84",
      success: function (res) {
        const latitude = res.latitude;
        const longitude = res.longitude;
        api.kitchenWaste
          .queryRecommendForWeChat(latitude, longitude)
          .then((res) => {
            if (res.code === 200) {
              setRecommendData(res.data);
            }
          });
      },
    });
  });

  return (
    <View className={"wrap"}>
      <View className={"name"}>
        <Text>{collectionInfo?.name ?? ""}</Text>
      </View>
      <View className={"main"}>
        <View className="card">
          <ImgNum
            path="/pages/kitchenWaste/pages/contracted/index"
            img="https://xct.cdhncy.cn/file/xindu/2024/9/4/sh.png"
            title="签约商户"
            number={qData?.signTotal}
            unit="户"
          />
          <ImgNum
            path="/pages/kitchenWaste/pages/record/index"
            img="https://xct.cdhncy.cn/file/xindu/2024/9/4/car.png"
            title="今日收运数"
            number={qData?.collectionTotal}
            unit="次"
            color="#FFAA05"
          />
          <ImgNum
            path=""
            img="https://xct.cdhncy.cn/file/xindu/2024/9/4/zl.png"
            title="收运重量"
            number={qData?.weightSum}
            unit="kg"
            color="#04BDEB"
          />
        </View>

        <Button
          className="def-btn"
          plain
          onTap={() => {
            Taro.navigateTo({
              url: "/pages/kitchenWaste/pages/addCollection/index",
            });
          }}
        >
          <Image
            className="btn-icon"
            src="https://xct.cdhncy.cn/file/xindu/2024/9/4/add.png"
          />
          <Text className="btn-text">添加收运</Text>
        </Button>

        <View className="tjText">
          <Text>推荐产生单位</Text>
        </View>
        {recommendData?.map((v) => (
          <Button
            key={v.businessId}
            className="def-btn mar-t-0"
            plain
            onTap={() => {
              Taro.navigateTo({
                url:
                  "/pages/kitchenWaste/pages/addCollection/index?businessId=" +
                  v.businessId,
              });
            }}
          >
            <View className="l-box">
              <Image className="btn-pt" src={def_dp} />
              <Text className="btn-text2">{v.businessName}</Text>
              <View
                className="btn-tag"
                style={{
                  backgroundImage: `url("https://xct.cdhncy.cn/file/xindu/2024/9/4/${
                    v.type === "距离最近" ? "tag2.png" : "tag1.png"
                  }")`,
                }}
              >
                <Text>{v.type}</Text>
              </View>
            </View>

            <Image
              className="btn-next"
              src="https://xct.cdhncy.cn/file/xindu/2024/9/4/next.png"
            />
          </Button>
        ))}
      </View>
    </View>
  );
};

export default Index;
