import Modal from '@/components/HncyModal';
import RiskWarn from '@/pages/SecurityServiceOverview/components/RiskWarn';
import services from '@/services';
import { getWarnTotal } from '@/utils/ui';
import { useModel } from '@umijs/max';
import { useRequest } from 'ahooks';
import { useState } from 'react';
import styles from './index.less';
const DisposeFlow = ({
  countWidth,
  industryCode,
}: {
  countWidth?: number;

  industryCode?: string;
}) => {
  const { selectAreaId } = useModel('safetyAreaId');
  const [riskModalOpt, setRiskModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '风险预警列表',
  });
  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} onClick={()=>{
         setRiskModalOpt({ open: true, title: '风险预警列表' })
      }}>
        <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>{' '}
      {/**风险预警 */}
      <Modal
        open={riskModalOpt?.open}
        title={riskModalOpt?.title}
        onCancel={() => setRiskModalOpt({ open: false, title: '' })}
        width={1500}
        height={846}
      >
        <RiskWarn riskModalOpt={riskModalOpt} />
      </Modal>
    </>
  );
};
export default DisposeFlow;
