import services from '@/services';
import { getWarnTotal } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import styles from './index.less';
const DisposeFlow = ({
  countWidth,
  industryCode,
}: {
  countWidth?: number;

  industryCode?: string;
}) => {
  const { selectAreaId } = useModel('safetyAreaId');

  const { data } = useRequest(
    () =>
      services.DataBase.getSjdzInfoData({
        typeCode: 'zzcc-aq-yjtj',
        data: {
          regionCode: selectAreaId,
          industryCode: industryCode,
        },
      }),
    {
      refreshDeps: [selectAreaId],
      ready: !!industryCode,
    },
  );
  // console.log(data?.data?.data?.records?.[0]?.yjqktj);

  return (
    <div className={styles.container}>
      <div className={styles.item}>
        <img
          src={require('@/assets/images/SecurityServiceOverview/IndustryWiget/yujingIcon.png')}
          alt=""
          className={styles.icon}
        />
        <div>预警</div>
        <div className={styles.count} style={{ width: countWidth }}>
          {getWarnTotal(data?.data?.data?.records?.[0]?.yjqktj)?.total ?? '--'}
        </div>
      </div>

      <img
        src={require('@/assets/images/SecurityServiceOverview/IndustryWiget/jiantou1.png')}
        alt=""
        className={styles.arrows}
      />
      <div className={styles.item}>
        <img
          src={require('@/assets/images/SecurityServiceOverview/IndustryWiget/chuziIcon.png')}
          alt=""
          className={styles.icon}
        />
        <div>处置</div>
        <div className={styles.count} style={{ width: countWidth }}>
          {getWarnTotal(data?.data?.data?.records?.[0]?.yjqktj)?.czz ?? '--'}
        </div>
      </div>
      <img
        src={require('@/assets/images/SecurityServiceOverview/IndustryWiget/jiantou2.png')}
        alt=""
        className={styles.arrows}
      />
      <div className={styles.item}>
        <img
          src={require('@/assets/images/SecurityServiceOverview/IndustryWiget/banjieIcon.png')}
          alt=""
          className={styles.icon}
        />
        <div>办结</div>
        <div className={styles.count} style={{ width: countWidth }}>
          {getWarnTotal(data?.data?.data?.records?.[0]?.yjqktj)?.ycz ?? '--'}
        </div>
      </div>
    </div>
  );
};
export default DisposeFlow;
