import { useEffect, useState } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import moment from 'moment';
import { history } from 'umi';
import { Card, Row, Col, Empty } from 'antd'
import { getList as getOrgList } from '@/services/org'
import { getList as getResumeWorkList } from '@/services/work'
import { getcomm } from '@/services/comm';
import ResumeWorkScollList from './components/ResumeWorkScollList';
import OrgScollList from './components/OrgScollList';
import './style.less'

export default (props) => {
  const [cardData, setCardData] = useState()
  const [orgList, setOrgList] = useState([])
  const [resumeWorkList, setResumeWorkList] = useState([])
  const nowDate = () => {
    var strArray = moment(Date.now()).format('YYYY/MM/DD').split("/");
    strArray = strArray.map(function (val) {
      if (val[0] == "0") {
        return val.slice(1);
      } else {
        return val;
      }
    });
    return strArray.join("/");
  }
  const header = (
    <Row justify='space-between' align='middle' >
      <Col span={2}>
        <img src="./wordLogo.png" />
      </Col>
      <Col style={{ fontSize: '24px', fontWeight: 'bold' }}>ubpa-疫情防控管理平台</Col>
      <Col span={2} style={{ textAlign: 'right' }}>{nowDate()}</Col>
    </Row>
  )
  const goDashboard=()=>{
    history.push('../resume-work/abnormal');
  }

  useEffect(() => {
    getcomm().then((res) => {
      setCardData(res);
    })
    getOrgList({ pageSize: 500 }).then((res) => {
      setOrgList(res.records)
    })
    getResumeWorkList(
      {
        pageSize: 500,
        start: moment(Date.now()).format('YYYY-MM-DD'),
        end: moment(Date.now()).format('YYYY-MM-DD'),
        isAll: true
      }).then(res => {
        setResumeWorkList(res.records)
      })
  }, [])
  return (
    <PageHeaderWrapper content={header} className='dashboardPage'>
      <Row justify='space-around' >
        <Col span={4}>
          <Card className='dashboardCard'>
            <div>
              企业总数
            </div>
            <div className='amount'>
              {cardData?.orgTotalNum || 0}
            </div>
          </Card>
          <Card className='dashboardCard' style={{ marginTop: '24px' }}>
            <div>
              无数据企业
            </div>
            <div className='amount'>
              {cardData?.noDataOrgNum || 0}/{cardData?.orgTotalNum || 0}
            </div>
          </Card>
        </Col>
        <Col span={4}>
          <Card className='dashboardCard'>
            <div>
              今日提交总人数
            </div>
            <div className='amount'>
              {cardData?.todayReportNum || 0}
            </div>
          </Card>
          <Card className='dashboardCard' style={{ marginTop: '24px' }}>
            <div>
              昨日提交总人数
            </div>
            <div className='amount'>
              {cardData?.yestodayReportNum || 0}
            </div>
          </Card>
        </Col>
        <Col span={4}>
          <Card className='dashboardCard'>
            <div>
              今日正常人数
            </div>
            <div className='amount' style={{ color: 'green' }}>
              {cardData?.todayNormalNum || 0}
            </div>
          </Card>
          <Card className='dashboardCard' style={{ marginTop: '24px' }} onClick={goDashboard}>
            <div>
              今日异常人数
            </div>
            <div className='amount' style={{ color: 'red' }}>
              {(cardData?.todayReportNum || 0) - (cardData?.todayNormalNum || 0)}
            </div>
          </Card>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <Card style={{ marginTop: '16px', height: '736px' }} title='企业数据总览'>
            {orgList != [] ?
              <OrgScollList list={orgList} /> :
              <div style={{ height: '624px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              </div>
            }
          </Card>
        </Col>
        <Col span={12}>
          <Card style={{ marginTop: '16px', height: '736px' }} title='今日数据提交记录'>
            {resumeWorkList != [] ?
              <ResumeWorkScollList list={resumeWorkList} /> :
              <div style={{ height: '624px', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              </div>
            }
          </Card>
        </Col>
      </Row>
    </PageHeaderWrapper>
  )
}