
import { Flex, Space, Statistic } from 'antd'
import styles from './index.less'
import { useEffect, useState } from 'react'
import dayjs from 'dayjs'
import services from '@/services'

/**
 * 
 * @description 办理质效顶部部分
 */


const TotalCard = () => {

  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.getSjdzInfoData({
      typeCode: "blzx",
      params: {
        ...getDate()
      }
    })
    if (resp.code === 200) {
      const data = resp.data?.data?.records[0]
      setStatisticTotal(data)
    }
  }

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

  return (
    <div className={styles.wrap}>
      <div className={styles.top}>
        <span className={styles.title}>办理质效</span>
      </div>
      <Flex justify='space-between'>
        <Space direction='vertical' size={0}>
          <Space>
            <Statistic value={statisticTotal?.asbj} />
            <span className={styles.unit}>%</span>
          </Space>
          <span className={styles.name}>按时办结数率</span>
        </Space>
        <Space direction='vertical' size={0}>
          <Space>
            <Statistic value={statisticTotal?.cq} />
            <span className={styles.unit}>%</span>
          </Space>
          <span className={styles.name}>超期率</span>
        </Space>
        <Space direction='vertical' size={0}>
          <Space>
            <Statistic value={statisticTotal?.yq} />
            <span className={styles.unit}>%</span>
          </Space>
          <span className={styles.name}>延期率</span>
        </Space>
        <Space direction='vertical' size={0}>
          <Space>
            <Statistic value={statisticTotal?.cb} />
            <span className={styles.unit}>%</span>
          </Space>
          <span className={styles.name}>重办率</span>
        </Space>
        <Space direction='vertical' size={0}>
          <Space>
            <Statistic value={statisticTotal?.pjsj} />
            <span className={styles.unit}>h</span>
          </Space>
          <span className={styles.name}>平均回复周期</span>
        </Space>
        <Space direction='vertical' size={0}>
          <Space>
            <Statistic value={statisticTotal?.my} />
            <span className={styles.unit}>%</span>
          </Space>
          <span className={styles.name}>满意率</span>
        </Space>
      </Flex>
    </div>
  )
}

export default TotalCard