import React, { useEffect, useState } from 'react'
import { Row, Col, Statistic, Icon, Spin } from 'antd'
import { apis, fetch } from '@/utils/request'

const getHouseVerified = fetch(apis.dashboard.houseVerified)

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

  useEffect(() => {
    setLoading(true)
    getHouseVerified().then(res => {
      setData(res)
      setLoading(false)
    }).catch(e => console.error(e) || setLoading(false))
  }, [])


  return (
    <Spin spinning={loading}>
      <Row gutter={16}>
        <Col span={4}>
          {/* <Statistic title={<div><Icon type="bell" style={{fontSize: '1.2em'}} /> 工单 </div>} value={112893} /> */}
        </Col>
        <Col span={10}>
          <Statistic title={<div><Icon type="home" style={{fontSize: '1.2em'}} /> 已认证(户) </div>} value={data.valid} />
        </Col>
        <Col span={10}>
          <Statistic title={<div><Icon type="home" style={{fontSize: '1.2em'}} /> 未认证(户) </div>} value={data.total - data.valid} />
        </Col>
      </Row>
    </Spin>
  )
}