import cardBg from '@/assets/images/SecurityServiceOverview/cardBg1.png';
import services from '@/services';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { useMemo } from 'react';
import CustomCard from '../../components/CustomCard';
import DisposeFlow from '../IndustryWarn/DisposeFlow';
import IndustryWiget from '../IndustryWarn/IndustryWiget';
import StatusWiget from '../IndustryWarn/StatusWiget';
import styles from './index.less';
const FacilityWarn = ({
  warnLevel,
  setWarnLevel,
}: {
  warnLevel: number;
  setWarnLevel: (val: number) => void;
}) => {
  const { selectAreaId } = useModel('safetyAreaId');
  //广告
  const { data: gg } = useRequest(services.DataBase.getSjdzInfoData, {
    defaultParams: [
      {
        typeCode: 'aq-gd',
        id: '1864283121130926082',
        params: {
          time: '2024',
        },
      },
    ],
  });

  //照明
  const { data: zmm } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-lddlsl',
        data: {
          regionCode: selectAreaId,
        },
      }),
    {
      refreshDeps: [selectAreaId],
    },
  );
  //管廊
  const { data: apgl } = useRequest(services.DataBase.getSjdzInfoData, {
    defaultParams: [
      {
        typeCode: 'aq-gl',
        id: '1864555586738450434',
      },
    ],
  });

  //照明
  const zm = useMemo(() => {
    return {
      typeCode: 'zm',
      typeName: '照明',
      parentCode: null,

      children: [
        {
          typeCode: 'dl',
          typeName: '路灯灯杆',
          parentCode: 'dlql',
          total: zmm?.data?.data?.records?.[0]?.lddg ?? '--',
          icon: require('@/assets/images/SecurityServiceOverview/ludeng.png'),
        },
        {
          typeCode: 'dl',
          typeName: '电力设施',
          parentCode: 'dlql',
          total: zmm?.data?.data?.records?.[0]?.dlss ?? '--',
          icon: require('@/assets/images/SecurityServiceOverview/jianxiu.png'),
        },
      ],
    };
  }, [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',
          listTypeCode: 'zzcc-aq-hwggmx',
          typeName: '户外广告',
          parentCode: 'dlql',
          total: gg?.data?.data?.records?.[0]?.ggzpss ?? '--',
          columnsFields: {
            name: 'objcode',
            descgldw: 'deptname1',
          },
        },
        {
          typeCode: 'dl',
          typeName: '广告招牌',
          parentCode: 'dlql',
          total: gg?.data?.data?.records?.[0]?.ggzpss ?? '--',
        },
      ],
    };
  }, [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: [
        {
          listTypeCode: 'zzcc-aq-glxx',
          typeCode: 'dl',
          typeName: '管网',
          parentCode: 'gl',
          total: apgl?.data?.data?.records?.[0]?.glss ?? '--',
          columnsFields: {
            name: 'mc',
            type: 'lx',
            descgldw: 'gldw',
            address: 'szdlmc',
            status: 'objstate',
          },
        },
        {
          typeCode: 'dl',
          typeName: '窖井',
          parentCode: 'gl',
          total: apgl?.data?.data?.records?.[0]?.yxkjzy ?? '--',
        },
      ],
    };
  }, [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: '--',
          icon: require('@/assets/images/SecurityServiceOverview/zjfic.png'),
        },
        {
          typeCode: 'dl',
          typeName: '交通设施',
          parentCode: 'dlql',
          total: '--',
          icon: require('@/assets/images/SecurityServiceOverview/jtssIc.png'),
        },
      ],
    };
  }, []);

  return (
    <div className={styles.container}>
      <CustomCard
        title="城市照明"
        width={258}
        height={394}
        style={{
          paddingTop: 16,
          paddingRight: 10,
          backdropFilter: 'blur(2px)',
          backgroundImage: `url(${cardBg})`,
          backgroundSize: '100% 100%',
        }}
        extra={<StatusWiget status={'一般风险'} />}
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {zm?.children?.map((item: any, index: number) => {
              return (
                <IndustryWiget
                  key={index}
                  data={{
                    ...item,
                    generalList: [
                      { typeName: '当前异常数', total: 0 },
                      { typeName: '风险管控数', total: item?.total },
                      { typeName: `${item?.typeName}总数`, total: item?.total },
                    ],
                    controlTotal: item?.total
                  }}
                  style={{ width: 270, marginBottom: 30 }}
                />
              );
            })}
          </div>
          <div className={styles.flow}>
            <DisposeFlow countWidth={55} typeCode={zm?.typeCode} />
          </div>
        </div>
      </CustomCard>
      <CustomCard
        title={'户外广招'}
        width={258}
        height={394}
        style={{
          paddingTop: 16,
          paddingRight: 10,
          backdropFilter: 'blur(2px)',
          backgroundImage: `url(${cardBg})`,
          backgroundSize: '100% 100%',
        }}
        extra={<StatusWiget status={'正常'} />}
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {ggzp?.children?.map((item: any, index: number) => {
              return (
                <IndustryWiget
                  key={index}
                  data={{
                    ...item,
                    icon: require('@/assets/images/SecurityServiceOverview/ggp.png'),

                    parentData: ggzp,
                  }}
                  style={{ width: 210, marginBottom: 30 }}
                />
              );
            })}
          </div>
          <div className={styles.flow}>
            <DisposeFlow countWidth={55} typeCode={ggzp?.typeCode} />
          </div>
        </div>
      </CustomCard>
      <CustomCard
        title="综合管廊"
        width={258}
        height={394}
        style={{
          paddingTop: 16,
          paddingRight: 10,
          backdropFilter: 'blur(2px)',
          backgroundImage: `url(${cardBg})`,
          backgroundSize: '100% 100%',
        }}
        extra={<StatusWiget status={'正常'} />}
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {gl?.children?.map((item: any, index: number) => {
              return (
                <IndustryWiget
                  key={index}
                  data={{
                    ...item,
                    icon: require('@/assets/images/SecurityServiceOverview/guanlang.png'),
                    generalList: [
                      { typeName: '当前异常数', total: 0 },
                      { typeName: '风险管控数', total: item?.total },
                      { typeName: `${item?.typeName}总数`, total: item?.total },
                    ],
                    controlTotal: item?.total
                  }}
                  style={{ width: 210, marginBottom: 30 }}
                />
              );
            })}
          </div>
          <div className={styles.flow}>
            <DisposeFlow countWidth={55} typeCode={gl?.typeCode} />
          </div>
        </div>
      </CustomCard>
      <CustomCard
        title="其它"
        width={258}
        height={394}
        style={{
          paddingTop: 16,
          paddingRight: 12,
          backdropFilter: 'blur(2px)',
          backgroundImage: `url(${cardBg})`,
          backgroundSize: '100% 100%',
        }}
        extra={<StatusWiget status={'正常'} />}
      >
        <div className={styles.content}>
          <div className={styles.warp}>
            {yyrq?.children?.map((item: any, index: number) => {
              return (
                <IndustryWiget
                  key={index}
                  data={{
                    ...item,

                    typeCode: yyrq?.typeCode,
                    parentData: yyrq,
                  }}
                  style={{ width: 210, marginBottom: 30 }}
                />
              );
            })}
          </div>
          <div className={styles.flow}>
            <DisposeFlow countWidth={55} />
          </div>
        </div>
      </CustomCard>
    </div>
  );
};
export default FacilityWarn;
