import services from '@/services';
import { useRequest } from 'ahooks';
import { useMemo } from 'react';
import CustomCard from '../../components/CustomCard';
import IndustryWiget from '../IndustryWarn/IndustryWiget';
import WarnWiget from '../IndustryWarn/WarnWiget';
import styles from './index.less';

const FacilityWarn = ({ data }: { data: any }) => {
  //广告
  const { data: gg } = useRequest(services.CityRiskApi.catalogData, {
    defaultParams: [
      {
        typeCode: 'aq-gd',
        id: '1864283121130926082',
        params: {
          time: '2024',
        },
      },
    ],
  });

  //照明
  const { data: zmm } = useRequest(services.CityRiskApi.catalogData, {
    defaultParams: [
      {
        typeCode: 'aq-zmzb',
        id: '1864283115156639745',
        params: {
          time: '2024',
        },
      },
    ],
  });
  const { data:zmTotal } = useRequest(() => {
    return services.CityRiskApi.getstatisticalEvent({
      parentTypeCode: 'zm',
    });
  });
  const { data:ggzpTotal } = useRequest(() => {
    return services.CityRiskApi.getstatisticalEvent({
      parentTypeCode: 'ggzp',
    });
  });
  //照明
  const zm = useMemo(() => {
    // return data?.find((item: any) => item?.typeCode === 'zm');
    return {
      typeCode: 'zm',
      typeName: '照明',
      parentCode: null,
      total: zmm?.data?.data?.records?.[0]?.fxys??'--',
      children: [
        {
          typeCode: 'dl',
          typeName: '路灯设施',
          parentCode: 'dlql',
          total: zmm?.data?.data?.records?.[0]?.ldss??'--',
        },
        {
          typeCode: 'dl',
          typeName: '检修作业',
          parentCode: 'dlql',
          total: zmm?.data?.data?.records?.[0]?.jxzy??'--',
        },
      ],
    };
  }, [data, zmm]);
  //户外广告牌
  const ggzp = useMemo(() => {
    // return data?.find((item: any) => item?.typeCode === 'ggzp');
    return {
      typeCode: 'ggzp',
      typeName: '广告招牌 ',
      parentCode: null,
      total: gg?.data?.data?.records?.[0]?.fxys??'--',
      children: [
        {
          typeCode: 'dl',
          typeName: '广告招牌设备',
          parentCode: 'dlql',
          total: gg?.data?.data?.records?.[0]?.ggzpss??'--',
        },
      ],
    };
  }, [data, gg]);
  //管廊
  const gl = useMemo(() => {
    // return data?.find((item: any) => item?.typeCode === 'gl');
    return {
      typeCode: 'gl',
      typeName: '管廊',
      parentCode: null,
      total: '--',
      children: [
        {
          typeCode: 'dl',
          typeName: '管廊设备',
          parentCode: 'dlql',
          total: '--',
        },
        {
          typeCode: 'dl',
          typeName: '有限空间作业',
          parentCode: 'dlql',
          total: '--',
        },
      ],
    };
  }, [data]);
  //油烟
  const yyrq = useMemo(() => {
    // return data?.find((item: any) => item?.typeCode === 'yyrq');
    return {
      typeCode: 'yyrq',
      typeName: '油烟燃气',
      parentCode: null,
      total: '--',
      children: [
        {
          typeCode: 'dl',
          typeName: '油烟检测点位',
          parentCode: 'dlql',
          total: '--',
        },
        {
          typeCode: 'dl',
          typeName: '扬尘管控点位',
          parentCode: 'dlql',
          total: '--',
        },
      ],
    };
  }, [data]);
  console.log(zmTotal);
  console.log(ggzpTotal);
  // const zm = [
  //   {
  //     icon: require('@/assets/images/SecurityServiceOverview/ludeng.png'),
  //     name: '路灯设施',
  //     count: 15,
  //   },
  //   {
  //     icon: require('@/assets/images/SecurityServiceOverview/jianxiu.png'),
  //     name: '检修作业',
  //     count: 15,
  //   },
  // ];
  const advertisingList = [
    {
      icon: require('@/assets/images/SecurityServiceOverview/ggp.png'),
      name: '广告招牌设施',
      count: 15,
    },
  ];
  const pipe = [
    {
      icon: require('@/assets/images/SecurityServiceOverview/guanlang.png'),
      name: '管廊设施',
      count: 15,
    },
    {
      icon: require('@/assets/images/SecurityServiceOverview/jianxiu.png'),
      name: '有限空间作业',
      count: 15,
    },
  ];
  const smoke = [
    {
      icon: require('@/assets/images/SecurityServiceOverview/smoke.png'),
      name: '油烟检测点位',
      count: 15,
    },
    {
      icon: require('@/assets/images/SecurityServiceOverview/yc.png'),
      name: '扬尘管控点位',
      count: 15,
    },
  ];
  return (
    <div className={styles.container}>
      <CustomCard
        title="城市照明"
        width={258}
        height={350}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={
          <div className={styles.riskCount}   title={'风险源数' + zm?.total}>风险源数&nbsp;{zm?.total}</div>
        }
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {zm?.children?.map((item: any) => {
              return (
                <IndustryWiget
                  data={{
                    ...item,
                    icon: require('@/assets/images/SecurityServiceOverview/ludeng.png'),
                    typeCode: zm?.typeCode,
                    parentData: zm,
                  }}
                  style={{ width: 150 }}
                />
              );
            })}
          </div>
          <div>
            <WarnWiget
              typeCode={zm?.typeCode}
              verticalWarn={true}
              // yj={zmm?.data?.data?.records?.[0]?.yj}
              // cy={zmm?.data?.data?.records?.[0]?.ycz}
              yj={zmTotal?.data?.monthEventTotal} cy={zmTotal?.data?.yxcEventTotal}
            />
          </div>
        </div>
      </CustomCard>
      <CustomCard
        title={'户外广招'}
        width={258}
        height={350}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={
          <div
            className={styles.riskCount}
            style={{ width: 100 }}
            title={'风险源数' + ggzp?.total}
          >
            风险源数&nbsp;{ggzp?.total}
          </div>
        }
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {ggzp?.children?.map((item: any) => {
              return (
                <IndustryWiget
                  data={{
                    ...item,
                    icon: require('@/assets/images/SecurityServiceOverview/ggp.png'),
                    typeCode: ggzp?.typeCode,
                    parentData: ggzp,
                  }}
                  style={{ width: 210 }}
                />
              );
            })}
          </div>
          <div>
            <WarnWiget
              typeCode={ggzp?.typeCode}
              verticalWarn={true}
              // yj={gg?.data?.data?.records?.[0]?.yj}
              // cy={gg?.data?.data?.records?.[0]?.ycz}
              yj={ggzpTotal?.data?.monthEventTotal} cy={ggzpTotal?.data?.yxcEventTotal}
            />
          </div>
        </div>
      </CustomCard>
      <CustomCard
        title="综合管廊"
        width={258}
        height={350}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={
          <div className={styles.riskCount}>风险源数&nbsp;{gl?.total}</div>
        }
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {gl?.children?.map((item: any) => {
              return (
                <IndustryWiget
                  data={{
                    ...item,
                    icon: require('@/assets/images/SecurityServiceOverview/guanlang.png'),
                    typeCode: gl?.typeCode,
                    parentData: gl,
                  }}
                  style={{ width: 210 }}
                />
              );
            })}
          </div>
          <div>
            <WarnWiget typeCode={gl?.typeCode} verticalWarn={true} />
          </div>
        </div>
      </CustomCard>
      <CustomCard
        title="油烟扬尘"
        width={258}
        height={350}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={
          <div className={styles.riskCount}>风险源数&nbsp;{yyrq?.total}</div>
        }
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {yyrq?.children?.map((item: any) => {
              return (
                <IndustryWiget
                  data={{
                    ...item,
                    icon: require('@/assets/images/SecurityServiceOverview/smoke.png'),
                    typeCode: yyrq?.typeCode,
                    parentData: yyrq,
                  }}
                  style={{ width: 210 }}
                />
              );
            })}
          </div>
          <div>
            <WarnWiget typeCode={yyrq?.typeCode} verticalWarn={true} />
          </div>
        </div>
      </CustomCard>
    </div>
  );
};
export default FacilityWarn;
