import { View, Image } from "@tarojs/components";
import "./index.less";
import { Flex } from "@taroify/core";
import Taro, { useDidShow } from "@tarojs/taro";
import { useState } from "react";
import services from "@/services";
const ItemCard = ({
  title,
  icon,
  data,
}: {
  data: API.LocationTypeDto;
  title: string;
  icon: string;
}) => {
  return (
    <View
      className="item-card"
      onTap={() => {
        Taro.navigateTo({
          url: "/pages/ServiceLocation/Map/index?typeId=" + data.categoryType,
        });
      }}
    >
      <Image src={icon}></Image>
      <View>{title}</View>
    </View>
  );
};

export default function () {
  const [dataSource, setDataSource] = useState<API.LocationTypeDto[]>([]);
  useDidShow(() => {
    services.common.getConvenienceServiceType().then((res) => {
      if (res.code === 200) {
        setDataSource(res.data);
      }
    });
  });
  return (
    <View className="typeList_container">
      <Flex gutter={[9, 9]} wrap="wrap">
        {dataSource.map((item) => {
          return (
            <Flex.Item span={12}>
              <ItemCard
                data={item}
                title={item.categoryName}
                icon={item.icons}
              ></ItemCard>
            </Flex.Item>
          );
        })}
      </Flex>
    </View>
  );
}
