import { useEffect, useState } from 'react';
import { history } from 'umi';
import { Row, Col } from 'antd'
import { AppstoreOutlined, AuditOutlined, FieldTimeOutlined } from '@ant-design/icons'
// import { getcomm } from '@/services/statis';
import StatisGroup from './StatisGroup';

const colorList = [
  { backColor: '#126BAE', frontColor: '#fff' },
  { backColor: '#66A9C9', frontColor: '#fff' },
  { backColor: '#08507b', frontColor: '#fff' },
]

export default (props) => {
  const [cardData, setCardData] = useState({})

  const toAbnormal = () => {
    history.push('../resume-work/abnormal');
  }

  useEffect(() => {
    // getcomm().then((res) => {
    //   setCardData(res || {});
    // })
  }, [])

  const abnormalNum = (cardData.todayReportNum || 0) - (cardData.todayNormalNum || 0)

  return (
    <Row justify='space-around' gutter={24} >
      <Col span={8}>
        <StatisGroup
          title="总数"
          data1={{ title: '总注册数', value: cardData.orgTotalNum || 857 }}
          data2={{ title: '证牌发放数', value: cardData.noDataOrgNum || 364 }}
          {...colorList[0]}
          icon={<AppstoreOutlined />}
        />
      </Col>
      <Col span={8}>
        <StatisGroup
          title="审核"
          data1={{ title: '待审核数', value: cardData.todayReportNum || 20 }}
          data2={{ title: '审核驳回数', value: cardData.yestodayReportNum || 1 }}
          {...colorList[1]}
          icon={<AuditOutlined />}
        />
      </Col>
      <Col span={8}>
        <StatisGroup
          title="提交"
          data1={{ title: '今日提交数', value: cardData.todayNormalNum || 25 }}
          data2={{ title: '本月提交数', value: abnormalNum || 20 }}
          {...colorList[2]}
          icon={<FieldTimeOutlined />}
          onClick2={toAbnormal}
        />
      </Col>
    </Row>
  )
}