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

const TypeDistribution: React.FC = () => {
  const [statisticTotal, setStatisticTotal] = useState<any[]>([]);
  const [modalVisible, setModalVisible] = useState(false);

  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.getSjdzInfoData({
      typeCode: "quhs-tslxfb",
      params: {
        type: '1', // 默认展示大类
        ...getDate()
      }
    });
    if (resp.code === 200) {
      const data = resp.data?.data?.records || [];
      setStatisticTotal(data);
    }
  };

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

  // 生成总结文本
  const getSummaryText = () => {
    return (
      <div className={styles.summaryContent}>
        <div className={styles.title}>大类分布总结</div>
        <div className={styles.content}>
          今日<span className={styles.highlight}>环境保护、市容秩序与广告招牌、规划执法</span>等3大类型投诉案件数较多，分别为
          <span className={styles.highlight}>45651件、30407件25481件</span>，占全市总投诉案件的比重分别为
          <span className={styles.highlight}>37.73%、25.13%、21.06%</span>。
        </div>
        
        {/* <div className={styles.desc}>
              从具体区（市）县看，有<span className={styles.highlight}>6</span>个区（市）县案件均超过
              <span className={styles.highlight}>300</span>件，其中<span className={styles.highlight}>成华区</span>和
              <span className={styles.highlight}>成都高新区</span>超过了400件；
              <span className={styles.highlight}>11</span>有个区（市）县处理投诉案件数在100-300件之间；
              有<span className={styles.highlight}>6</span>个区（市）县处理投诉案件少于100件，分别是青白江区、新津区、
              彭州市、大邑县、成都东部新区、蒲江县。
            </div> */}
      </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}>
        <LineBarCharts dataSource={statisticTotal || []} />
      </div>
    </div>
  );
};

export default TypeDistribution; 