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';
import StatusWiget from '../IndustryWarn/StatusWiget';

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: apgl } = useRequest(services.CityRiskApi.catalogData, {
    defaultParams: [
      {
        typeCode: 'aq-gl',
        id: '1864555586738450434',
      },
    ],
  });
  //照明预警数陈彭接口
  const { data: zmTotal } = useRequest(() => {
    return services.CityRiskApi.getstatisticalEvent({
      parentTypeCode: 'zm',
    });
  });
  //广告牌预警数陈彭接口
  const { data: ggzpTotal } = useRequest(() => {
    return services.CityRiskApi.getstatisticalEvent({
      parentTypeCode: 'ggzp',
    });
  });
  //管廊预警数陈彭接口
  const { data: glTotal } = useRequest(() => {
    return services.CityRiskApi.getstatisticalEvent({
      parentTypeCode: 'gl',
    });
  });
  //照明
  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: apgl?.data?.data?.records?.[0]?.fxys ?? '--',
      children: [
        {
          typeCode: 'dl',
          typeName: '管廊数',
          parentCode: 'gl',
          total: apgl?.data?.data?.records?.[0]?.glss ?? '--',
        },
        {
          typeCode: 'dl',
          typeName: '有限空间作业',
          parentCode: 'gl',
          total: apgl?.data?.data?.records?.[0]?.yxkjzy ?? '--',
        },
      ],
    };
  }, [data, apgl]);
  //油烟
  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]);

  return (
    <div className={styles.container}>
      <CustomCard
        title="城市照明"
        width={258}
        height={380}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={<StatusWiget status={'一般风险'} />}
      >
        <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={380}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={<StatusWiget status={'正常'} />}
      >
        <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={380}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={<StatusWiget status={'正常'} />}
      >
        <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}
              yj={glTotal?.data?.monthEventTotal}
              cy={glTotal?.data?.yxcEventTotal}
            />
          </div>
        </div>
      </CustomCard>
      <CustomCard
        title="油烟扬尘"
        width={258}
        height={380}
        style={{
          paddingTop: 16,
          paddingRight: 18,
          backgroundColor: 'rgba(63, 149, 229, 0.1)',
        }}
        extra={<StatusWiget status={'正常'} />}
      >
        <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;
