import React from 'react';
import PanelTitle from '../common/PanelTitle';
import SubTitle from '../common/SubTitle';
import LeftBottom from './components/LeftBottom';
import LeftTopCQI from './components/LeftTopCQI';
import LeftTopRunning from './components/LeftTopRunning';
import styles from './index.less';

const LeftSidebar: React.FC = () => {
  return (
    <div className={styles.container}>
      <div className={styles.overviewContainer}>
        <PanelTitle title="整体概况" />
        
        <div className={styles.contentArea}>
          <div className={styles.vitalSigns}>
            {/* <SubTitle title="实时体征" /> */}
            {/* <div className={styles.vitalSignsContent}> */}
              {/* 实时体征内容 */}
              <LeftTopCQI />
            {/* </div> */}
          </div>
          
          <div className={styles.operationalStatus}>
            {/* <div className={styles.operationalStatusContent}> */}
              {/* 运行态势内容 */}
              <LeftTopRunning />
            {/* </div> */}
          </div>
        </div>
      </div>
      
      <div className={styles.statusContainer}>
        <PanelTitle title="城市实况" moreText="更多城市实况" modalName="IndustrySystem" />
        <div className={styles.cityStatusContent}>
          {/* <SubTitle title="城市设施" /> */}
          <LeftBottom />
        </div>
      </div>
    </div>
  );
};

export default LeftSidebar; 