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

const AreaDistribution: React.FC = () => {
  const [statisticTotal, setStatisticTotal] = useState<any>([]);
  const [modalVisible, setModalVisible] = useState(false);
  const [pieData, setPieData] = 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.getSjdzInfoData({
      typeCode: "quhs-quyj",
      params: {
        ...getDate()
      }
    });
    if (resp.code === 200) {
      setStatisticTotal(resp.data?.data?.records);
    }
  };

  const getPieData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      typeCode: "quhs-tsfbzj",
      params: {
        ...getDate()
      }
    });
    if (resp.code === 200) {
        // console.log(resp.data?.data?.records)
      setPieData(resp.data?.data?.records);
    }
  };

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

  const renderSummaryContent = () => {
    // console.log(pieData)
    return (
    //   <Flex justify="space-between" gap={40} className={styles.summaryContent}>
    //     <div className={styles.progressWrap}>
    //       {statisticTotal?.map((item: any, index: number) => (
    //         <Flex key={index} align="center" justify="space-between" style={{ marginBottom: 20 }}>
    //           <div className={styles.itemName}>{item.ssqy}</div>
    //           <div className={styles.progress}>
    //             <Progress
    //               size={{ height: 16 }}
    //               status="active"
    //               percent={item.num}
    //               showInfo={false}
    //               strokeColor={{ from: '#38F2E3', to: '#3DC3FF' }}
    //             />
    //           </div>
    //           <div className={styles.itemNum}>
    //             <span className={styles.num}>{item.num}</span>
    //             <span>件</span>
    //           </div>
    //         </Flex>
    //       ))}
    //     </div>
        // <BaseCard
        //   width={552}
        //   height={353}
        //   title="区域分布总结"
        //   style={{
        //     padding: '20px 0',
        //     overflow: 'hidden'
        //   }}
        // >
          <Flex vertical className={styles.summaryDetail}>
            <PieChart data={pieData} chartStyle={{ width: '118px', height: '118px' }} />
            <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>
          </Flex>
        // </BaseCard>
    //    </Flex>
    );
  };

  return (
    <div className={styles.container}>
      <div className={styles.header}>
        <span className={styles.title}>区域分布</span>
        
        <Popover
          content={renderSummaryContent()}
          placement="bottomRight"
          trigger="click"
          overlayClassName={styles.summaryPopover}
        >
        <div className={styles.quoteWrapper} >
          <img src={quoteIcon} className={styles.quoteIcon} />
        </div>
        </Popover>
        {/* <div className={styles.quoteWrapper} >
          <img src={quoteIcon} className={styles.quoteIcon} onClick={() => setModalVisible(true)}/>
        </div> */}
        {/* <img 
          src={quoteIcon} 
          className={styles.quoteIcon} 
          onClick={() => setModalVisible(true)}
        /> */}
      </div>

      <div className={styles.progressWrap}>
        {statisticTotal?.map((item: any, index: number) => (
          <Flex key={index} align="center" justify="space-between" style={{ marginBottom: 20 }}>
            <div className={styles.itemName}>{item.ssqy}</div>
            <div className={styles.progress}>
              <Progress
                size={{ height: 16 }}
                status="active"
                percent={item.num}
                showInfo={false}
                strokeColor={{ from: '#38F2E3', to: '#3DC3FF' }}
              />
            </div>
            <div className={styles.itemNum}>
              <span className={styles.num}>{item.num}</span>
              <span>件</span>
            </div>
          </Flex>
        ))}
      </div>

      <Modal
        open={modalVisible}
        title="区域分布总结"
        onCancel={() => setModalVisible(false)}
        width={1470}
        height={846}
      >
        {renderSummaryContent()}
      </Modal>
    </div>
  );
};

export default AreaDistribution; 