import React, { useEffect, useState } from 'react'
import { Card, Row, Col, Icon, Spin } from 'antd'
import moment from 'moment'
import Link from 'umi/link'
import { fetch, apis } from '@/utils/request'
import ABPart from './ABPart'

const Title = props => <div> <Icon type={props.icon} style={{color: props.color, fontSize: '1.2em'}} /> <span style={{display: 'inline-block', marginLeft: 8}}>{props.children}</span></div>
const StatNum = props => <Spin spinning={props.loading}><div style={{textAlign: 'center'}}><span style={{fontSize: '1.6em'}}>{props.value}</span> {props.unit}</div></Spin>

const getStatis = fetch(apis.dashboard.statis)

export default props => {
  const [loading, setLoading] = useState(false)
  const [data, setData] = useState({})

  useEffect(() => {
    if (props.communityId) {
      const today = moment()
      // 当月第一天
      const startDate = today.format('YYYY-MM-01')
  
      // 当月最后一天,
      // 因为当前日期是业务数据最大值, 因此当天的数据跟月末是一致的
      const endDate = today.format(`YYYY-MM-DD`)
  
      setLoading(true)
      getStatis({params: {startDate, endDate, communityId: props.communityId}}).then(res => {
        setData(res)
        setLoading(false)
      }).catch(er => setLoading(false))
    }
  }, [props.communityId])

  return (
    <Row gutter={24}>
      <Col span={6}>
        <Link to="/property/buildingInfo">
          <Card title={false}>
            <ABPart
              align="middle"
              gutter={8}
              left={12}
              a={<Title icon="home" color="#f50">楼栋管理</Title>}
              b={<StatNum loading={loading} value={data.buildingNum} unit="栋" />}
            />
          </Card>
        </Link>
      </Col>
      <Col span={6}>
        <Link to="/property/proprietor">
          <Card title={false}>
            <ABPart
              align="middle"
              gutter={8}
              left={12}
              a={<Title icon="user" color="#2db7f5">业主管理</Title>}
              b={<StatNum loading={loading} value={data.propNum} unit="人" />}
            />
          </Card>
        </Link>
      </Col>
      <Col span={6}>
        <Link to="/property/bill/management">
          <Card title={false}>
            <ABPart
              align="middle"
              gutter={8}
              left={12}
              a={<Title icon="bank" color="#87d068">缴费(本月)</Title>}
              b={<StatNum loading={loading} value={data.houseNum} unit="单" />}
            />
          </Card>
        </Link>
      </Col>
      <Col span={6}>
        <Link to="/property/ticket">
          <Card title={false}>
            <ABPart
              align="middle"
              gutter={8}
              left={12}
              a={<Title icon="bell" color="#108ee9">工单(本月)</Title>}
              b={<StatNum loading={loading} value={data.ticketNum} unit="条" />}
            />
          </Card>
        </Link>
      </Col>
    </Row>
  )
}
