
import { Flex, Progress } from 'antd'
import styles from './index.less'
import BaseCard from '@/pages/Common/components/BaseCard'
import PieChart from './PieCharts'
import dayjs from 'dayjs'
import services from '@/services'
import { useEffect, useState } from 'react'

const AreaDistribution = () => {

  const [statisticTotal, setStatisticTotal] = useState<any>([])

  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) {
      const data = resp.data?.data?.records
      setStatisticTotal(data)
    }
  }

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

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

  // const chartData: any = [
  //   {
  //     name: '“5+2”中心城区',
  //     value: 1625,
  //     percent: 33
  //   },
  //   {
  //     name: '其它中心城区',
  //     value: 1625,
  //     percent: 33
  //   },
  //   {
  //     name: '郊区新城',
  //     value: 1625,
  //     percent: 33
  //   }
  // ]

  return (
    <Flex justify='space-between' gap={40} className={styles.wrap}>
      <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.content}>
          <PieChart data={pieData} chartStyle={{ width: '118px', height: '118px' }} />
          <div className={styles.desc}>
            从具体区（市）县看，有<span className={styles.tipsText}>6</span> 个区（市）县案件均超过<span className={styles.tipsText}>300</span> 件，
            其中<span className={styles.tipsText}>成华区</span> 和<span className={styles.tipsText}>成都高新区</span> 超过了400件；<span className={styles.tipsText}>11</span>有个区（市）县处理投诉案件数在100-300件之间；
            有<span className={styles.tipsText}>6</span>个区（市）县处理投诉案件少于100 件，分别是青白江区、新津区、彭州市、大邑县、成都东部新区、蒲江县。
          </div>
        </Flex>
      </BaseCard>
    </Flex>
  )
}

export default AreaDistribution