import services from '@/services';
import { useRequest } from '@umijs/max';
import { Checkbox } from 'antd';
import { useMemo } from 'react';
import styles from './index.less';

export const items = [
  {
    typeCode: 'dlql',
    label: '道桥',
    icon: require('@/assets/images/SecurityServiceOverview/mapGroup/icon1.png'),
  },
  {
    key: '2',
    label: '环卫',
    icon: require('@/assets/images/SecurityServiceOverview/mapGroup/icon2.png'),
    typeCode: 'hw',
  },
  {
    key: '3',
    label: '固废',
    icon: require('@/assets/images/SecurityServiceOverview/mapGroup/icon3.png'),
    typeCode: 'gf',
  },
  {
    key: '4',
    label: '广告招牌',
    icon: require('@/assets/images/SecurityServiceOverview/mapGroup/icon4.png'),
    typeCode: 'ggzp',
  },
  {
    key: '5',
    label: '照明',
    icon: require('@/assets/images/SecurityServiceOverview/mapGroup/icon5.png'),
    typeCode: 'zm',
  },
  {
    key: '6',
    label: '管廊',
    icon: require('@/assets/images/SecurityServiceOverview/mapGroup/icon6.png'),
    typeCode: 'gl',
  },
  {
    key: '7',
    label: '油烟燃气',
    icon: require('@/assets/images/SecurityServiceOverview/mapGroup/icon7.png'),
    typeCode: 'yyrq',
  },
];
const CheckboxGroup = ({
  onCheck,
  checkCode,
}: {
  onCheck: (val: any) => void;
  checkCode: string;
}) => {
  const { data } = useRequest(services.CityRiskApi.getParentType);

  const options = useMemo(() => {
    return data?.map((item: any) => ({
      ...item,
      icon: items.find((i) => i.typeCode === item.typeCode)?.icon,
    }));
  }, [data]);
  return (
    <div className={styles.container}>
      {options?.map((item: any) => {
        return (
          <div className={styles.items}>
            <img src={item.icon} alt="" className={styles.icon} />
            <span className={styles.label}>{item.typeName}</span>
            <Checkbox
              checked={item?.typeCode === checkCode}
              onChange={() => {
                onCheck(item.typeCode);
              }}
            ></Checkbox>
          </div>
        );
      })}
    </div>
  );
};
export default CheckboxGroup;
