import React, { useState, useEffect } from 'react'
import { Table, Form, Icon, Input, Button, message  } from 'antd'
import { router } from 'umi';
import moment from 'moment';
import Navigate from '@/components/Navigate';
import withActions from '@/components/ActionList';
import EditIcon from '@/components/EditIcon';
import request from '../../../utils/request';
import apis from '../../../services/apis';
import AuthButton from '../../../components/AuthButton';


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)
    getList({ pageNumber: page, pageSize: 10, ...props.form.getFieldsValue()})
  }

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

  function audit(record){
    
      router.push({
        pathname: '/system/document/audit',
        query: {
          id: record.personId,
        },
      })
   
  }

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      render: (text, record) => <Navigate to={`/system/document/audit?id=${record.personId}`}>{text}</Navigate>
    },
    {
      title: '手机号',
      dataIndex: 'tel',
      key: 'tel',
      align: 'center',
    },
    {
      title: '提交时间',
      dataIndex: 'summitDate',
      key: 'summitDate',
      align: 'center',
      render: (summitDate) => moment(summitDate).format('YYYY-MM-DD HH:mm:ss')
    },

    {
      title: '已审核数',
      dataIndex: 'totalSummit',
      key: 'totalSummit',
      align: 'center',
    },

    {
      title: '未审核数',
      dataIndex: 'unverified',
      key: 'unverified',
      align: 'center',
    },

   
    {
      title: '操作',
      dataIndex: 'documentVerifyId',
      key: 'documentVerifyId',
      align: 'center',
      render: withActions((x,row) => [
        <AuthButton name="admin.documentVerify.id.get" noRight={null}>
          <EditIcon type={row.unverified === 0 ? 'look' : ''} text={row.unverified === 0 ? '查看' : '审核'} onClick={()=>audit(row)}></EditIcon>
        </AuthButton>,
      ])
    },
  ]

  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>
        <AuthButton name="admin.documentVerify.search" noRight={null}>
          <Button type="primary" htmlType="submit">
            搜索
          </Button>
          </AuthButton>
          &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
