import React from 'react'
import { Spin, Button, Form, Input, Popconfirm,  } from 'antd'
import { fetch, fetchList, apis } from '@/utils/request'
import Search from '../components/Search'
import List from '../components/List'
import AuditNot from './components/AuditNot'

const Condition = props => {
  return (
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      render={form => {
        const { getFieldDecorator } = form

        return (
          <>
            <Form.Item label="姓名">
            {
              getFieldDecorator('ownerName')(<Input style={{ width: '160px' }} placeholder="姓名" />)
            }
            </Form.Item>
            <Form.Item label="手机号">
            {
              getFieldDecorator('ownerTel')(<Input style={{ width: '160px' }} placeholder="手机号" />)
            }
            </Form.Item>
            <Form.Item label="身份证">
            {
              getFieldDecorator('idCard')(<Input style={{ width: '200px' }} placeholder="身份证" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

const propRole = {
  1: '户主',
  2: '租客',
  3: '家属'
}

const userVerifyAll = fetchList(apis.propUser.userVerifyAll)
const userVerifyAudit = fetch(apis.propUser.userVerifyAudit)

export default props => {
  const [loading, setLoading] = useState(false)
  const [noPassShow, setNoPassShow] = useState(false)
  const [listData, setListData] = useState([])

  const handleSearch = vals => {}

  const handleDeleteRow = row => {}

  return (
    <div>
      <Condition onSearch={handleSearch} onSearch={handleSearch} />
      <div>
        <p style={{color: '#888'}}>注意，审核后无法修改审核结果，请仔细确认</p>
      </div>
      <Spin spinning={loading}>
        <List dataSource={listData} rowKey="id">
          <Table.Column title="姓名" dataIndex="userName" key="userName" />
          <Table.Column title="手机号" dataIndex="phone" key="phone" />
          <Table.Column title="身份证" dataIndex="idCard" key="idCard" />
          <Table.Column title="性别" dataIndex="gender" key="gender" render={x => x === '1' ? '男' : '女'} />
          <Table.Column
            title="房产"
            dataIndex="address"
            key="address"
            render={(_, row) => row.phaseName + row.buildingName + row.unitName + row.levelName + row.roomNoName}
          />
          <Table.Column title="角色" dataIndex="roleId" key="roleId" render={x => propRole[x]} />
          <Table.Column title="提交时间" dataIndex="createDate" key="createDate" />
          <Table.Column
            title="操作"
            key="action"
            render={(_, row) => {
              return (
                <>
                  <Popconfirm
                    title="确认进行删除操作?"
                    onConfirm={() => handleDeleteRow(row)}
                    okText="删除"
                    cancelText="取消"
                  >
                    <Button type="link">删除</Button>
                  </Popconfirm>
                  <Divider type="vertical" />
                  <Button type="link">审核通过</Button>
                  <Button type="link">审核不通过</Button>
                </>
              )
            }}
          />
        </List>
      </Spin>
      <AuditNot visible={noPassShow} onSubmit={handleSubmit} onCancel={() => setNoPassShow(false)} />
    </div>
  )
}
