import { Flex } from 'antd';
import { useState } from 'react';
import SafetyMap from '../SafetyMap';
import FacilityWarn from './FacilityWarn';
import styles from './index.less';
import IndustryWarn from './IndustryWarn';
import MeetSafeguard from './MeetSafeguard';
import RightLayout from './RightLayout';
import SafetyAccident from './SafetyAccident';
import SafetyTips from './SafetyTips';
import SecurityCqi from './SecurityCqi';
import MapCantainer from '../components/MapCantainer';
export const StateMap = {
  正常: 0,
  一般风险: 1,
  黄色风险: 2,
  橙色风险: 3,
  红色风险: 4,
};

const SecurityState = () => {
  const [warnLevel, setWarnLevel] = useState(1);

  return (
    <Flex className={styles.container} justify="space-between">
      {/* 左侧 */}
      <div className={styles.leftWrap}>
        <SecurityCqi warnLevel={warnLevel} />
        <IndustryWarn warnLevel={warnLevel} setWarnLevel={setWarnLevel} />
        <FacilityWarn warnLevel={warnLevel} setWarnLevel={setWarnLevel} />
      </div>
      {/* 地图 */}
      <div className={styles.mapCenter}>
        <SafetyMap />
        {/* <MapCantainer/> */}
      </div>
      {/* 右侧布局 */}
      <div className={styles.rightWrap}>
        <RightLayout />
        <div className={styles.rDiv}>
          {/* <WarnInfo /> */}
          <MeetSafeguard />
          <SafetyTips />
          <SafetyAccident />
        </div>
      </div>
    </Flex>
  );
};
export default SecurityState;
