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

const TypeDistribution = ({ category }: {category: string}) => {

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

  const [statisticStr, setStatisticStr] = 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-tslxfb",
      params: {
        type: category,
        ...getDate()
      }
    })
    if (resp.code === 200) {
      const data = resp.data?.data?.records
      setStatisticTotal(data)
      let str = ''
      data.forEach((item: any, index: number) => {
        if (index === data.length - 1) {
          str += `${item.lx}`
        } else {
          str += `${item.lx}、`
        }
      })
      setStatisticStr(str)
    }
  }

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


  return (
    <Flex justify='space-between' gap={30} className={styles.wrap}>
      <div style={{ flex: 1 }}>
        <LineBarCharts dataSource={statisticTotal} />
      </div>
      <BaseCard
        width={417}
        height={353}
        title="大类分布总结"
        style={{
          paddingTop: 20
        }}
      >
        <div className={styles.content}>
          近一月<span className={styles.tipsText}>{statisticStr}</span>等{statisticTotal?.length}{category === '1' ? '大类': '小类'}型投诉案件数较多，分别为
          { 
            statisticTotal?.map((item: any) => (
              <span key={item.lx}>{item.num}件、</span>
            ))
          }
        </div>
      </BaseCard>
    </Flex>
  )
}

export default TypeDistribution;