import { Flex, Statistic, Space, Row, Col } from 'antd'
import type { StatisticProps } from 'antd';
import CountUp from 'react-countup';
import styles from './index.less'
import LineBarCharts from './LineBarCharts';
import { CaretUpFilled } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import services from '@/services';
import dayjs from 'dayjs';


/**
 * 
 * @description 整体态势部分
 */
const formatter: StatisticProps['formatter'] = (value) => (
  <CountUp end={value as number} separator="" />
);

const OverallSituation = () => {

  const [statisticTotal, setStatisticTotal] = useState<any>({})
  const [statisticRecent, setStatisticRecent] = useState<any>([])
  const [statistictshb, setStatistictshb] = 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-ztts",
      params: {
        ...getDate()
      }
    })
    if (resp.code === 200) {
      const data = resp.data?.data?.records[0]
      setStatisticTotal(data)
    }
  }

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

  const gettshbData = async () => {
    const resp = await services.DataBase.getSjdzInfoData({
      typeCode: "quhs-tshb",
      params: {
        ...getDate()
      }
    })
    if (resp.code === 200) {
      const data = resp.data?.data?.records[0]
      setStatistictshb(data)
    }
  }

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

  return (
    <Flex className={styles.wrap} vertical>
      <div className={styles.top}>
        <span className={styles.title}>整体态势</span>
      </div>

      <Flex vertical justify='space-between' style={{ flex: 1 }}>
        <Flex className={styles.cardSection} gap={20}>
          <Space direction='vertical' className={styles.left}>
            <Space>
              <Statistic value={statisticTotal?.zl || 0} formatter={formatter} />
              <span className={styles.unit}>件</span>
            </Space>
            <span className={styles.name}>投诉总量</span>
          </Space>

          <Row gutter={[16, 12]} className={styles.right}>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>处置中</span>
                <Space>
                  <Statistic value={statisticTotal?.blz || 0} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>超期处置中</span>
                <Space>
                  <Statistic value={statisticTotal?.cqczz || 0} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>已办结</span>
                <Space>
                  <Statistic value={statisticTotal?.bj || 0} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
            <Col span={12}>
              <Flex className={styles.card} align='center' justify='space-between'>
                <span className={styles.name}>超期办结</span>
                <Space>
                  <Statistic value={statisticTotal?.cqbj || 0} formatter={formatter} />
                  <span className={styles.unit}>个</span>
                </Space>
              </Flex>
            </Col>
          </Row>
        </Flex>

        <div className={styles.chartsSection}>
          <div className={styles.title}>投诉趋势</div>
          <LineBarCharts dataSource={statisticRecent} />
        </div>

        <Flex className={styles.bottom} gap={80} align='center'>
          <span className={styles.left}>
            <span>趋势</span>
            <span>总结</span>
          </span>
          <Space direction='vertical' size={10} className={styles.middle}>
            <span className={styles.title}>近一月累计投诉</span>
            <Space>
              <Space>
                <Statistic value={statistictshb?.num || 0} formatter={formatter} />
                <span className={styles.unit}>件</span>
              </Space>
              <span>
                <span className={styles.rateName}>月环比</span>
                <span className={styles.num}>
                  <CaretUpFilled style={{ color: '#57ef58', marginRight: 10 }} />
                  <span style={{ color: '#57ef58' }}>{statistictshb?.huanbi || 0}</span>
                </span>
              </span>
            </Space>
          </Space>
          {/* <Space direction='vertical'>
            <span className={styles.title}>占全市总投诉比重</span>
            <Space>
              <Statistic value={89.5} />
              <span className={styles.unit}>%</span>
            </Space>
          </Space> */}
        </Flex>
      </Flex>
    </Flex>
  )
}

export default OverallSituation