import React, { useState, useEffect } from 'react'
import { Select, Spin, Table, Button, Form, Input, Divider, Modal, Rate, Popconfirm } from 'antd'
import NavLink from 'umi/navlink'
import { fetchList, apis, fetch } from '@/utils/request'
import CommunitySelect from '@/components/CommunitySelect'
import Search from '../components/Search'
import List from '../components/List'

const lifeConsultant = fetchList(apis.propUser.lifeConsultant)

const Condition = props => {
  const [communityId, setCommunityId] = useState()

  const handleCommunityChange = v => {
    setCommunityId(v)

    props.onCommunityChange(v)
  }
  return (
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator } = form
        
        return (
          <>
            <Form.Item label="小区">
              <CommunitySelect value={communityId} onChange={handleCommunityChange} autoInited />
            </Form.Item>
            <Form.Item label="管家名称">
            {
              getFieldDecorator('userName')(<Input placeholder="管家名称" />)
            }
            </Form.Item>
            <Form.Item label="手机号">
            {
              getFieldDecorator('phone')(<Input placeholder="手机号" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

export default props => {
  const [loading, setLoading] = useState(false)
  const [listData, setListData] = useState([])
  const [pagination, setPagination] = useState({})
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })
  const [communityId, setCommunityId] = useState()

  const handleSearch = vals => {
    setQueryParams({
      ...queryParams,
      ...vals,
      pageNum: 1,
    })
  }

  const handlePageChange = (pageNum, pageSize) => {
    setQueryParams({
      ...queryParams,      
      pageNum,
      pageSize,
    })
  }

  useEffect(() => {
    setLoading(true)
    if (communityId) {
      lifeConsultant({...queryParams, communityId}).then(res => {
        const [list, pageInfo] = res || {}
        setListData(list)
        setPagination(pageInfo)
        setLoading(false)
      }).catch(() => setLoading(false))
    }
  }, [queryParams, communityId])

  return (
    <div>
      <Condition onSearch={handleSearch} onReset={handleSearch} onCommunityChange={v => setCommunityId(v)} />
      <div style={{ margin: '24px 0' }}>
        {/* <NavLink to={`/staff/editStaff`}>
          <Button type="primary">添加管家</Button>
        </NavLink> */}
      </div>
      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey="id">
        <Table.Column title="管家名称" dataIndex="userName" key="userName" />
        <Table.Column title="电话" dataIndex="phone" key="phone" />
        <Table.Column title="说明" dataIndex="description" key="description" />
        <Table.Column title="月评分" dataIndex="averageScore" key="averageScore" render={t => <Rate disabled value={t} />} />
        <Table.Column
          title="操作"
          key="action"
          render={(_, row) => {
            return (
              <>
                <NavLink to={`/property/life-consultant/score?userId=${row.userId}`}>
                  <Button type="link">评分详情</Button>
                </NavLink>
              </>
            )
          }}
        />
      </List>

    </div>
  )
}
