import React, { useEffect, useState } from 'react'
import { Table, Typography, Button, Form, Input, DatePicker } from 'antd'
import { fetchList, apis } from '@/utils/request'
import moment from 'moment'
import NavLink from 'umi/navlink'
import Search from '../components/Search'
import List from '../components/List'

const getMessageList = fetchList(apis.messageBoard.list)

const Condition = props => {
  const [dateRange, setDateRange] = useState([])

  const handleSearch = vals => {
    props.onSearch({
      ...vals,
      startDate: dateRange[0] ? dateRange[0].format('YYYY-MM-DD') : undefined,
      endDate: dateRange[1] ? dateRange[1].format('YYYY-MM-DD') : undefined,
    })
  }

  const handelReset = vals => {
    setDateRange([])
    props.onReset({
      ...vals,
      startDate: undefined,
      endDate: undefined,
    })
  }

  return (
    <Search
      onSearch={handleSearch}
      onReset={handelReset}
      render={form => {
        const { getFieldDecorator } = form

        return (
          <>
            <Form.Item label="名称">
            {
              getFieldDecorator('name')(<Input placeholder="名称" />)
            }
            </Form.Item>
            <Form.Item label="手机">
            {
              getFieldDecorator('phone')(<Input placeholder="手机" />)
            }
            </Form.Item>
            <Form.Item label="留言时间">
              <DatePicker.RangePicker value={dateRange} onChange={v => setDateRange(v)} 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 handleSearch = vals => {
    setQueryParams({
      ...queryParams,
      ...vals,
      pageNum: 1,
    })
  }
  
  const handlePageChange = (pageNum, pageSize) => {
    setQueryParams({
      ...queryParams,      
      pageNum,
      pageSize,
    })
  }

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


  return (
    <div>
      <Condition onSearch={handleSearch} onReset={handleSearch} />
      <div style={{margin: '24px auto 24px'}}> </div>
      <List dataSource={listData} loading={loading} pagination={pagination} onPageChange={handlePageChange} rowKey={row => `${row.msgId}-${row.replyId}`}>
        <Table.Column title="头像" dataIndex="avatar" key="avatar" render={t => <img src={t} style={{ width: 64, height: 64 }} />} />
        <Table.Column title="昵称" dataIndex="nickname" key="nickname" />
        <Table.Column title="手机" dataIndex="phone" key="phone" />
        <Table.Column title="留言时间" dataIndex="createDate" key="createDate" render={t => t ? moment(t).format('YYYY-MM-DD HH:mm') : ''} />
        <Table.Column title="内容" dataIndex="content" key="content" render={t => <Typography.Text ellipsis>{t}</Typography.Text>} />
        <Table.Column
          title="操作"
          key="action"
          render={(_, row) => {
            return (
              <>
                <NavLink to={`/property/message-board/edit?id=${row.msgId}`}>
                  <Button type="link">详情</Button>
                </NavLink>
              </>
            )
          }}
        />
      </List>
    </div>
  )
}
