import titlePng from '@/assets/images/SecurityServiceOverview/title.png';
import Modal from '@/components/HncyModal';
import { useState } from 'react';
import IndustrySign from './components/IndustrySign';
import ModalContent from './components/ModalContent';
import RiskWarn from './components/RiskWarn';
import styles from './index.less';
import RegionSelect from './RegionSelect';

import { Flex } from 'antd';
import BaseInfo from './components/BaseInfo';
import SecurityState from './SecurityState';
import SecuritySituation from './SecuritySituation';

/**
 * @description 安全服务一张图
 */

const SecurityServiceOverview = () => {
  const [modalOpt, setModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '安全指数溯源',
  });
  const [wayModalOpt, setWayModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '道路桥梁情况',
  });
  const [riskModalOpt, setRiskModalOpt] = useState<{
    open: boolean;
    title: string;
  }>({
    open: false,
    title: '风险预警列表',
  });
  /** 标题渲染 */
  const titleRender = () => {
    return (
      <Flex align="center" className={styles.modalTitle}>
        <p className={styles.title}>桥梁上部结构严重病害</p>
        <span className={styles.tag}>重大风险</span>
        <span className={styles.type}>城市桥梁设施-新都区东风渠跨线桥</span>
      </Flex>
    );
  };
  return (
    <div className={styles.container}>
      <img src={titlePng} className={styles.title} alt=""></img>

      <div className={styles.content}>
        <RegionSelect />
        <div className={styles.warp}>
          {/* <SecuritySituation /> */}
          <SecurityState />
        </div>
      </div>
      {/**安全指数溯源 */}
      <Modal
        open={modalOpt?.open}
        title={modalOpt?.title}
        onCancel={() => setModalOpt({ open: false, title: '' })}
        width={2233}
        height={846}
      >
        <ModalContent
          item={{
            indexId: '4',
            IndexName: 'sa',
            name: '安全',
            statusDescription: '理想态',
          }}
        />
      </Modal>
      {/**道路桥梁情况 */}
      <Modal
        open={wayModalOpt?.open}
        title={wayModalOpt?.title}
        onCancel={() => setWayModalOpt({ open: false, title: '' })}
        width={1772}
        height={846}
      >
        <IndustrySign />
      </Modal>
      {/**风险预警 */}
      <Modal
        open={riskModalOpt?.open}
        title={riskModalOpt?.title}
        onCancel={() => setRiskModalOpt({ open: false, title: '' })}
        width={1500}
        height={846}
      >
        <RiskWarn />
      </Modal>
      {/* 事件详情 */}
      <Modal
        open={false}
        titleRender={titleRender}
        onCancel={() => {}}
        width={1144}
        height={740}
      >
        <BaseInfo />
      </Modal>
    </div>
  );
};

export default SecurityServiceOverview;
