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

const HighIncidenceTime = () => {

  const [statisticTotal, setStatisticTotal] = 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.getQzGfData({
      typeCode: "quhs-gfsj",
      params: {
        ...getDate()
      }
    })
    if (resp.code === 200) {
      const data = [resp.data?.all, ...resp.data?.data]
      console.log(data)
      setStatisticTotal(data)
    }
  }

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

  return (
    <Flex justify='space-between' gap={30} className={styles.wrap}>
      <div style={{ flex: 1 }}>
        <LineCharts dataSource={statisticTotal} />
      </div>
      <BaseCard
        width={417}
        height={353}
        title="高发时间总结"
        style={{
          paddingTop: 20
        }}
      >
        <div className={styles.content}>
          <p>今日投诉主要集中在 <span className={styles.tipsText}>4点、6点 、10点。</span> </p>
          <p>其中市民关注和反映问题较多问题：</p>
          <p> 噪音扰民集中在 <span className={styles.tipsText}>8点、10点 、12点。</span></p>
          <p>占道经营集中在 <span className={styles.tipsText}>6点、7点 、21点。</span></p>
          <p>油烟扰民集中在<span className={styles.tipsText}>12点、17点 、19点。</span></p>
        </div>
      </BaseCard>
    </Flex>
  )
}

export default HighIncidenceTime