import React, { useEffect, useRef, useState } from 'react'
import { Spin, Button, Form, Input, Popconfirm, Table, Modal, notification, Divider } 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('userName')(<Input style={{ width: '160px' }} placeholder="姓名" />)
            }
            </Form.Item>
            <Form.Item label="手机号">
            {
              getFieldDecorator('phone')(<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 [pagination, setPagination] = useState({})
  const [queryParams, setQueryParams] = useState({ pageNum: 1, pageSize: 10 })

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

  const handleDeleteRow = row => {}

  const showAuditDialog = row => {
    currentRow.current = row
    setNoPassShow(true)
  }

  const handleVerfiy = (row, verifyStatus) => {
    const params = {
      verifyStatus,
      remark: row.remark
    }

    userVerifyAudit({ urlData: { id: row.id }, params }).then(res => {
      Modal.success({
        content: '审核提交成功',
        onOk: () => {
          // 触发数据刷新
          setQueryParams({...queryParams})
        }
      })
    })
  }

  const handleSubmit = vals => {
    if (!currentRow.current) {
      notification.error({
        message: '操作异常',
        description: '未找到对应行数据'
      })
      return
    }

    const row = {
      ...currentRow.current,
      ...vals,
    }

    handleVerfiy(row, false)
    setNoPassShow(false)
  }

  useEffect(() => {
    setLoading(true)
    userVerifyAll(queryParams).then(res => {
      const [records, pagi] = res || []
      setListData(records)
      setPagination(pagi)
      setLoading(false)
    }).catch(() => setLoading(false))
  }, [queryParams])

  return (
    <div>
      <Condition onSearch={handleSearch} onSearch={handleSearch} />
      <div style={{ marginTop: '24px' }}>
        <p style={{color: '#888', fontSize: '0.8em'}}>注意，审核后无法修改审核结果，请仔细确认</p>
      </div>
      <List dataSource={listData} pagination={pagination} loading={loading} 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 === '2' ? '女' : '男'} />
        <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" /> */}
                {
                  row.verifyStatus !== '1' && (
                    <Popconfirm
                      title="确认进行审核通过操作?"
                      onConfirm={() => handleVerfiy(row, true)}
                      okText="通过"
                      cancelText="取消"
                    >
                      <Button type="link">审核通过</Button>
                    </Popconfirm>
                  )
                }
                {
                  row.verifyStatus === '0' && <Divider type="vertical" />
                }
                {
                  row.verifyStatus !== '2' && (
                    <Popconfirm
                      title="确认进行审核不通过操作?"
                      onConfirm={() => showAuditDialog(row)}
                      okText="不通过"
                      cancelText="取消"
                    >
                      <Button type="link">审核不通过</Button>
                    </Popconfirm>
                  )
                }
              </>
            )
          }}
        />
      </List>
      <AuditNot visible={noPassShow} onSubmit={handleSubmit} onCancel={() => setNoPassShow(false)} />
    </div>
  )
}
