import { DownOutlined } from '@ant-design/icons';
import { DatePicker } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import DisposalSiteInfo from './components/DisposalSiteInfo';
import DistributionChart from './components/DistributionChart';
import LicenseInfo from './components/LicenseInfo';
import RecyclingInfo from './components/RecyclingInfo';
import StatisticsChart from './components/StatisticsChart';
import styles from './index.less';

const { RangePicker } = DatePicker;

const ConstructionWaste = (props: any) => {
  const [searchTime, setSearchTime] = useState<any>({
    startTime: dayjs().startOf('month').format('YYYY-MM-DD'),
    endTime: dayjs().endOf('month').format('YYYY-MM-DD'),
  });


  useEffect(() => {
    props.modalDispatch.setOptions({
      headerLeft: (
        <div className={styles.headerLeft}>
          <RangePicker
            defaultValue={[dayjs(searchTime.startTime), dayjs(searchTime.endTime)]}
            onChange={(dates) => {
              if (dates) {
                setSearchTime({
                  startTime: dates[0]?.format('YYYY-MM-DD') || '',
                  endTime: dates[1]?.format('YYYY-MM-DD') || '',
                });
              }
            }}
            suffixIcon={<DownOutlined />}
            separator="-"
            format="YYYY-MM-DD"
            allowClear={false}
            placeholder={['开始时间', '结束时间']}
            variant="borderless"
            popupClassName={styles.dateRangePicker}
            getPopupContainer={(trigger) =>
              trigger.parentElement || document.body
            }
          />
        </div>
      ),
      // style: {
      //   // marginTop: '-30px',
      //   top: '30px'
      // }
    });
  }, [searchTime]);

  return (
    <div className={styles.container}>
      <div className={styles.content}>
        <LicenseInfo searchTime={searchTime} />
        <DistributionChart searchTime={searchTime} tabKey={props.activeTab}/>
        <div className={styles.bottomSection}>
          <StatisticsChart searchTime={searchTime} />
          <DisposalSiteInfo searchTime={searchTime} />
          <RecyclingInfo searchTime={searchTime} />
        </div>
      </div>
    </div>
  );
};

export default ConstructionWaste;
