import React, { useEffect, useState } from 'react'
import { Card, Alert, Icon } from 'antd'
import { fetch, apis } from '@/utils/request'
import Link from 'umi/link'

const getTips = fetch(apis.dashboard.tips)

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

  useEffect(() => {
    if (props.communityId) {
      setLoading(true)
      getTips({params: {communityId: props.communityId}}).then(res => {
        setData(res)
        setLoading(false)
      }).catch(e => console.error(e) || setLoading(false))
    }
  }, [props.communityId])

  const ticket = data.ticketNum ? `您有 ${data.ticketNum} 个待处理工单, 点击处理` : '暂无未处理工单'
  const verify = data.verifyNum ? `您有 ${data.verifyNum} 条待审核记录, 点击处理` : '暂无业主申请'
  const exchange = data.exchangeNum ? `累计有 ${data.exchangeNum} 条兑换记录, 点击查看` : '暂兑换记录'
  const enlistNum = data.enlistNum && data.enlistNum.dynamicId ? `总计 ${data.enlistNum.num} 人报名参与 ${data.enlistNum.title} 活动, 点击查看` : '暂进行中活动'

  return (
    <Card title="日常工作" bordered={false} loading={loading}>
      <Link to="/property/ticket">
        <Alert
          message="工单报修"
          description={ticket}
          type="success"
          showIcon
          icon={<Icon type="snippets" />}
          style={{marginBottom: 16}}
        />
      </Link>
      <Link to="/property/proprietor/audit">
        <Alert
          message="业主审核"
          description={verify}
          type="info"
          showIcon
          icon={<Icon type="user-add" />}
          style={{marginBottom: 16}}
        />
      </Link>
      <Link to="/integralMall/exchangeRecords">
        <Alert
          message="商品兑换"
          description={exchange}
          type="warning"
          showIcon
          icon={<Icon type="gift" />}
          style={{marginBottom: 16}}
        />
      </Link>
      <Link to={data.enlistNum && data.enlistNum.dynamicId ? `/activity/detailActivity?dynamicId=${data.enlistNum.dynamicId}` : '/activity/ActivityList'}>
        <Alert
          message="活动报名"
          description={enlistNum}
          type="error"
          showIcon
          icon={<Icon type="crown" />}
          // style={{marginBottom: 16}}
        />
      </Link>
    </Card>
  )
}
