import { useEffect, useState } from 'react';
import { history } from 'umi';
import { Card, Row, Col } from 'antd'
import { AppstoreOutlined, MacCommandOutlined, TeamOutlined, UsergroupDeleteOutlined, UsergroupAddOutlined } from '@ant-design/icons'
import { getcomm } from '@/services/statis';
import StatisCard from './StatisCard';
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 || 0 }}
          data2={{ title: '无数据企业', value: cardData.noDataOrgNum || 0 }}
          {...colorList[0]}
          icon={<AppstoreOutlined />}
        />
      </Col>
      <Col span={8}>
        <StatisGroup
          title="上报人次"
          data1={{ title: '今日提交', value: cardData.todayReportNum || 0 }}
          data2={{ title: '昨日提交', value: cardData.yestodayReportNum || 0 }}
          {...colorList[1]}
          icon={<TeamOutlined />}
        />
      </Col>
      <Col span={8}>
        <StatisGroup
          title="今日概况"
          data1={{ title: '正常人次', value: cardData.todayNormalNum || 0 }}
          data2={{ title: '异常人次', value: abnormalNum }}
          {...colorList[2]}
          icon={<UsergroupDeleteOutlined />}
          onClick2={toAbnormal}
        />
      </Col>
      {/* <Col span={4}>
        <StatisCard
          title="企业总数"
          value={cardData?.orgTotalNum || 0}
          icon={<AppstoreOutlined />}
          {...colorList[0]}
        />
      </Col>
      <Col span={4}>
        <StatisCard
          title="无数据企业"
          value={`${cardData?.noDataOrgNum || 0} / ${cardData?.orgTotalNum || 0}`}
          icon={<MacCommandOutlined />}
          {...colorList[1]}
        />
      </Col>
      <Col span={4}>
        <StatisCard
          title="今日提交总人数"
          value={cardData?.todayReportNum || 0}
          icon={<TeamOutlined />}
          {...colorList[2]}
        />
      </Col>
      <Col span={4}>
        <StatisCard
          title="昨日提交总人数"
          value={cardData?.yestodayReportNum || 0}
          icon={<TeamOutlined />}
          {...colorList[3]}
        />
      </Col>
      <Col span={4}>
        <StatisCard
          title="今日正常人数"
          value={cardData?.todayNormalNum || 0}
          icon={<UsergroupDeleteOutlined />}
          {...colorList[4]}
        />
      </Col>
      <Col span={4}>
        <StatisCard
          title="今日异常人数"
          value={(cardData?.todayReportNum || 0) - (cardData?.todayNormalNum || 0)}
          icon={<UsergroupAddOutlined />}
          {...colorList[5]}
          onClick={toAbnormal}
        />
      </Col> */}
    </Row>
  )
}
