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

const getPersonList = fetchList(apis.person.getPersonList)

const Condition = Form.create()(props => {
  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      if (!err && props.onSearch) {
        props.onSearch(values)
      }
    });
  }

  const handleReset = e => {
    props.form.resetFields()
    if (props.onReset) {
      props.onReset(props.form.getFieldsValue())
    }
  }

  const { getFieldDecorator } = props.form

  return (
    <Form layout="inline" onSubmit={handleSubmit}>
      <div style={{ display: 'flex', width: '100%' }}>
        <div style={{ flex: 'none', maxWidth: 'calc(100% - 180px)' }}>
            <Form.Item label="姓名">
            {
              getFieldDecorator('name')(<Input placeholder="姓名" />)
            }
            </Form.Item>
            <Form.Item label="手机号">
            {
              getFieldDecorator('phone')(<Input placeholder="手机号" />)
            }
            </Form.Item>
        </div>
        <div style={{ flex: 'none', width: '180px' }}>
          <Form.Item>
            <Button type="primary" htmlType="submit">搜索</Button>
          </Form.Item>
          <Form.Item>
            <Button onClick={handleReset}>重置</Button>
          </Form.Item>
        </div>
      </div>
    </Form>
  )
})

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 [showPoints, setShowPoints] = useState({visible: false, customerId: ''})

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

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

  useEffect(() => {
    setLoading(true)
    getPersonList(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 0'}}> </div>
      <Table dataSource={listData} loading={loading} pagination={{...pagination, onChange: handlePageChange}} rowKey="personId">
        <Table.Column
          title="头像"
          dataIndex="avatarurl"
          key="avatarurl"
          render={t => <img src={t} alt="" style={{width: '64px', height: '64px'}} />}
        />
        <Table.Column title="姓名" dataIndex="nickname" key="nickname" />
        <Table.Column title="电话" dataIndex="phone" key="phone" render={t => t ? t.replace(/(\d{3})\d*(\d{4})/,'$1****$2') : ''} />
        <Table.Column title="创建时间" dataIndex="createDate" key="createDate" />
        <Table.Column
          title="操作"
          key="action"
          render={(_, row) => {
            return (
              <>
                <Button type="link" onClick={() => setShowPoints({visible: true, customerId: row.personId})}>积分</Button>
              </>
            )
          }}
        />
      </Table>
      <IntegralRecord visibleData={showPoints} onCancel={() => setShowPoints({visible: false, customerId: ''})} />
    </div>
  )
}
