import React, { useEffect, useState } from 'react';
import { Flex, Popover } from 'antd';
import dayjs from 'dayjs';
import services from '@/services';
import styles from './index.less';
import LineCharts from './LineCharts'
import quoteIcon from '@/assets/images/newMain/quote.png';

const HighIncidenceTime: React.FC = () => {
  const [statisticTotal, setStatisticTotal] = useState<any>([]);

  const getDate = () => {
    const oneMonthAgo = dayjs().subtract(1, 'month');
    return { 
      startTime: oneMonthAgo.format('YYYY-MM-DD'), 
      endTime: dayjs().format('YYYY-MM-DD') 
    };
  };

  const getData = async () => {
    const resp = await services.DataBase.getQzGfData({
      typeCode: "quhs-gfsj",
      params: {
        ...getDate()
      }
    });
    if (resp.code === 200) {
      const data = [resp.data?.all, ...resp.data?.data];
      setStatisticTotal(data);
    }
  };

  useEffect(() => {
    getData();
  }, []);

  const getSummaryText = () => {
    return (
      <div>
        <p>今日投诉主要集中在 <span className={styles.highlight}>4点、6点 、10点。</span></p>
        <p>其中市民关注和反映问题较多问题：</p>
        <p>噪音扰民集中在 <span className={styles.highlight}>8点、10点 、12点。</span></p>
        <p>占道经营集中在 <span className={styles.highlight}>6点、7点 、21点。</span></p>
        <p>油烟扰民集中在<span className={styles.highlight}>12点、17点 、19点。</span></p>
      </div>
    );
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>高发时间</span>
        <Popover
          content={getSummaryText()}
          placement="bottomRight"
          trigger="click"
          overlayClassName={styles.summaryPopover}
        >
        <div className={styles.quoteWrapper} >
          <img src={quoteIcon} className={styles.quoteIcon} />
        </div>
        </Popover>
      </div>

      <div className={styles.content}>
        <LineCharts dataSource={statisticTotal} />
      </div>
    </div>
  );
};

export default HighIncidenceTime; 