import React, { useState } from 'react';
import { useSelector } from 'react-redux';
import moment from 'moment';
import CommonCard from '../../UI/CommonCard';
import YearSelect from '../../UI/YearSelect';
import SafetyAppraisal from './components/SafetyAppraisal';
import ReservoirInspection from './components/ReservoirInspection';
import SafetyHazard from './components/SafetyHazard';
import SluiceMonitor from './components/SluiceMonitor';
import ReservoirDemarcation from './components/ReservoirDemarcation';
import TermiteControl from './components/TermiteControl';
import Maintenance from './components/Maintenance';
import './index.less';

const SiGuan = () => {
  const showPanels = useSelector(s => s.runtime.showPanels);
  const [inspectionYear, setInspectionYear] = useState(moment().format('YYYY'));
  const [hazardYear, setHazardYear] = useState(moment().format('YYYY'));
  const [wxYear, setWxYear] = useState(moment().format('YYYY'));

  return (
    <div className="siguan-view">
      <div className={`side-panel left ${!showPanels ? 'hidden' : ''}`}>
        <CommonCard title="安全鉴定" className="panel-card card-1" >
          <SafetyAppraisal />
        </CommonCard>
        <CommonCard 
          title="库区巡查" 
          className="panel-card card-2" 
          headerExtra={<YearSelect value={inspectionYear} onChange={setInspectionYear} />}
          style={{minHeight:120}}
        >
          <ReservoirInspection />
        </CommonCard>
        <CommonCard title="闸门监控" className="panel-card card-3">
          <SluiceMonitor />
        </CommonCard>
        <CommonCard
          title="安全隐患"
          className="panel-card card-4"
          headerExtra={<YearSelect value={hazardYear} onChange={setHazardYear} />}
        >
          <SafetyHazard year={hazardYear} />
        </CommonCard>
      </div>

      <div className={`side-panel right ${!showPanels ? 'hidden' : ''}`}>
        <CommonCard title="水库划界" className="panel-card card-1">
          <ReservoirDemarcation />
        </CommonCard>
        <CommonCard title="白蚁防治" className="panel-card card-2">
          <TermiteControl />
        </CommonCard>
        <CommonCard
          title="维修养护"
          className="panel-card card-3"
          headerExtra={<YearSelect value={wxYear} onChange={setWxYear} />}
        >
          <Maintenance year={wxYear} />
        </CommonCard>
      </div>
    </div>
  );
};

export default SiGuan;