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 = () => {
    // 计算总数
    const total = statisticTotal.reduce((acc, cur) => acc + cur.num, 0);
    
    // 获取前三名
    const top3 = statisticTotal.slice(0, 3);
    
    // 生成类型名称字符串
    const typeNames = top3.map(item => item.lx).join('、');
    
    // 生成数值字符串
    const numbers = top3.map(item => item.num).join('件、') + '件';

    // console.log(statisticTotal, total, top3);
    
    // 生成比例字符串
    // const percents = top3.map(item => (item.num / total * 100).toFixed(2) + '%').join('、');

    return (
      <div className={styles.summaryContent}>
        <div className={styles.title}>大类分布总结</div>
        <div className={styles.content}>
          今日<span className={styles.highlight}>{typeNames}</span>
          等{top3.length}大类型投诉案件数较多，分别为
          <span className={styles.highlight}>{numbers}</span>。
          {/* 占全市总投诉案件的比重分别为 */}
          {/* <span className={styles.highlight}>{percents}</span>。 */}
        </div>
      </div>
    );
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>投诉类型分布</span>
        <Popover
          content={getSummaryText()}
          placement="rightTop"
          trigger="click"
          overlayClassName={styles.summaryPopover}
          overlayStyle={{ width: 262 }}
          destroyTooltipOnHide
        >
          <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; 