import React, { useState, useEffect } from 'react'
import { Table, Form, Icon, Input, Button, message  } from 'antd'
import request from '../../../utils/request';
import apis from '../../../services/apis';
import { router } from 'umi';
import moment from 'moment';


function body(props) {
  // eslint-disable-next-line react-hooks/rules-of-hooks
  const [dataSource, setDataSource] = useState({ records: [] })

  useEffect(() => {
    getList({ pageNumber: 1, pageSize: 10 })
  }, [])

  function getList(params) {
    // 网路请求
    request({ ...apis.system.documentVerifylist, params: { ...params } }).then(data => {
      console.log('data:',data)
      setDataSource(data)
    }).catch(err => {
      // eslint-disable-next-line no-unused-expressions

    })
  }

  /**
   * 提交
   * @param e
   */
  function handleSubmit(e) {
    e.preventDefault();
    props.form.validateFields((err, values) => {
      getList({ pageNumber: 1, pageSize: 10, ...values})
      // if (!err) {
      //   console.log('Received values of form: ', values);
      // }
    });
  }

  /**
   * 翻页
   * @param page
   * @param pageSize
   */
  function onPageNum(page, pageSize) {
    console.log(page, pageSize)
  }

  /**
   * 重置
   */
  function handleReset(e) {
    props.form.resetFields();
  }

  function audit(record){
    if(record.verifyStatus === 0){
      router.push({
        pathname: '/system/document/audit',
        query: {
          id: record.documentVerifyId,
        },
      })
    }
  else{
    router.push({
      pathname: '/system/document/see',
      query: {
        id: record.documentVerifyId,
      },
    })
      
    }
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
    },
    {
      title: '提交时间',
      dataIndex: 'createDate',
      key: 'createDate',
      render: (createDate) => moment(createDate).format('YYYY-MM-DD')
    },
    {
      title: '状态',
      dataIndex: 'verifyStatus',
      key: 'verifyStatus',
      render: (x,row) => (
        <>
         
            <span style={{ cursor: 'pointer' }}>{ row.verifyStatus === 0 ? '未审核' : row.verifyStatus === 1 ? '审核通过' : '审核未通过' }</span>
           
        </>
      )
    },
    {
      title: '操作',
      dataIndex: 'documentVerifyId',
      key: 'documentVerifyId',
      render: (x,row) => (
        <>
          
            <span style={{ color: '#1990FF',cursor: 'pointer' }} onClick={()=>audit(row)}>{ row.verifyStatus === 0 ? '审核' : '查看' }</span>
           
        </>
      )
    },
  ]

  const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = props.form;
  return (
    <>
      <Form layout="inline" onSubmit={handleSubmit}>
        <Form.Item>
          {getFieldDecorator('name')(
            <Input
              placeholder="用户名"
            />,
          )}
        </Form.Item>
        <Form.Item>
          {getFieldDecorator('tel')(
            <Input
              placeholder="手机号"
            />,
          )}
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <Button onClick={(e) => handleReset(e)}>
            清空
          </Button>
        </Form.Item>
      </Form>
      <Table style={{marginTop: '30px'}} dataSource={dataSource.records} pagination={{ total: dataSource.total, pageSize: dataSource.pageSize, onChange: (page, pageSize) => onPageNum(page, pageSize), defaultCurrent: 1 }} columns={columns} />
    </>
  )
}

const WrappedbodyForm = Form.create({ name: 'body' })(body)
export default WrappedbodyForm
