import Modal from '@/components/HncyModal';
import IndustrySign from '@/pages/SecurityServiceOverview/components/IndustrySign';
import { CSSProperties, useState } from 'react';
import styles from './index.less';
const IndustryWiget = ({
  style,
  data,
}: {
  style?: CSSProperties;
  data: any;
}) => {
  const [wayModalOpt, setWayModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '道路桥梁情况',
  });
  return (
    <>
      <div
        className={styles.container}
        style={style}
        onClick={() => {
          setWayModalOpt({
            open: true,
            title: data?.typeName,
            ...data,
          });
        }}
      >
        <div className={styles.leftWrap}>
          <img src={data?.icon} alt="" className={styles.icon} />
          {data?.warn && (
            <div className={styles.warnWarp}>
              <img
                src={require('@/assets/images/SecurityServiceOverview/risk/red.png')}
                alt=""
                className={styles.wic}
              />
              <div className={styles.count}>222</div>
            </div>
          )}
        </div>

        <div className={styles.descWarp}>
          <div className={styles.count}>
            {data?.total}
            {data?.c && <span className={styles.count1}>/{data?.c}</span>}
          </div>
          <div className={styles.name} title={data?.typeName}>{data?.typeName}</div>
        </div>
      </div>
      {/**道路桥梁情况 */}
      <Modal
        open={wayModalOpt?.open}
        title={wayModalOpt?.title}
        onCancel={() => setWayModalOpt({ open: false, title: '' })}
        width={1772}
        height={846}
      >
        {wayModalOpt?.parentCode && <IndustrySign param={wayModalOpt} />}
      </Modal>
    </>
  );
};

export default IndustryWiget;
