import React, { useState, useEffect } from 'react'
import { Select, Spin, Table, Button, Form, Input, Icon, Modal, Popconfirm } from 'antd'
import NavLink from 'umi/navlink'
import { fetch, fetchList, apis } from '@/utils/request'
import Search from '../components/Search'
import List from '../components/List'
import useRoomSelect from '../utils/hooks/useRoomSelect'

const buildingInfoList = fetch(apis.buildingOwnerInfo.buildingList)
const deleteBuilding = fetch(apis.buildingOwnerInfo.deleteBuilding)

const Condition = props => {
  const {
    phaseId,
    setPhaseId,
    buildingId,
    setBuildingId,
    unitId,
    setUnitId,
    levelId,
    setLevelId,
    roomNoId,
    setRoomNoId,
    phaseList,
    buildingList,
    unitList,
    levelList,
    roomNoList
  } = useRoomSelect()

  const handleSearch = vals => {
    const data = {
      ...vals,
      phaseId,
      buildingId,
      unitId,
      levelId,
      roomNoId
    }

    if (props.onSearch) {
      props.onSearch(data)
    }
  }

  const handleReset = vals => {
    const data = {
      ...vals,
      phaseId: '',
      buildingId: '',
      unitId: '',
      levelId: '',
      roomNoId: ''
    }

    setPhaseId()
    setBuildingId()
    setUnitId()
    setLevelId()
    setRoomNoId()

    if (props.onReset) {
      props.onReset(data)
    }
  }

  return (
    <Search
      onSearch={handleSearch}
      onReset={handleReset}
      render={form => {
        const { getFieldDecorator } = form
        
        const handlePhaseChange = e => setPhaseId(e)
        const handleBuildingChange = e => setBuildingId(e)
        const handleUnitChange = e => setUnitId(e)
        const handleLevelChange = e => setLevelId(e)
        const handleRoomChange = e => setRoomNoId(e)

        return (
          <>
            <Form.Item>
              <Select value={phaseId} onChange={handlePhaseChange} style={{ minWidth: '120px' }} placeholder="期/区">
                {
                  phaseList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                }
              </Select>
            </Form.Item>
            <Form.Item>
              <Select value={buildingId} onChange={handleBuildingChange} style={{ minWidth: '120px' }} placeholder="栋">
                {
                  buildingList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                }
              </Select>
            </Form.Item>
            <Form.Item>
              <Select value={unitId} onChange={handleUnitChange} style={{ minWidth: '120px' }} placeholder="单元">
                {
                  unitList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                }
              </Select>
            </Form.Item>
            <Form.Item>
              <Select value={levelId} onChange={handleLevelChange} style={{ minWidth: '120px' }} placeholder="楼层">
                {
                  levelList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                }
              </Select>
            </Form.Item>
            <Form.Item>
              <Select value={roomNoId} onChange={handleRoomChange} style={{ minWidth: '120px' }} placeholder="户号">
                {
                  roomNoList.map(x => (<Select.Option key={x.id} value={x.id}>{x.name}</Select.Option>))
                }
              </Select>
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('ownerName')(<Input style={{ width: '160px' }} placeholder="姓名" />)
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('ownerTel')(<Input style={{ width: '160px' }} placeholder="手机号" />)
            }
            </Form.Item>
            <Form.Item>
            {
              getFieldDecorator('idCard')(<Input style={{ width: '200px' }} placeholder="身份证" />)
            }
            </Form.Item>
          </>
        )
      }}
    />
  )
}

const verifyStatusDict = {
  '0': '未审核',
  '1': '审核通过',
  '2': '审核不通过'
}

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 handleSearch = (vals) => {
    setQueryParams({
      ...vals,      
      pageNum: 1,
      pageSize: queryParams.pageSize,
    })
  }

  const handleDeleteRow = row => {
    deleteBuilding({ data: [row.id] }).then(res => {
      Modal.success({
        content: '数据参数成功',
        onOk: () => {
          window.location.reload()
        }
      })
    })
  }

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

  useEffect(() => {
    setLoading(true)
    buildingInfoList({ data: 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' }}>
        <NavLink to={`/property/proprietor/add`}>
          <Button type="primary">添加</Button>
        </NavLink>
        <NavLink to={`/property/proprietor/batch`}>
          <Button type="link"><Icon type="upload"/>批量导入业主资料</Button>
        </NavLink>
      </div>
      <List dataSource={listData} loading={loading} onPageChange={handlePageChange} pagination={pagination} rowKey="userVerifyId">
        <Table.Column title="编号" dataIndex="userVerifyId" key="userVerifyId" />
        <Table.Column
          title="姓名"
          dataIndex="ownerName"
          key="ownerName"
          render={(_, row) => {
            return (
              <NavLink to={`/property/proprietor/detail?id=${row.userVerifyId}`}>
                <Button type="link">{row.ownerName}</Button>
              </NavLink>
            )
          }}
        />
        <Table.Column title="手机号" dataIndex="ownerTel" key="ownerTel" />
        <Table.Column title="身份证" dataIndex="idCard" key="idCard" />
        <Table.Column
          title="房间号"
          dataIndex="roomNoName"
          key="roomNoName"
          render={(_, row) => {
            return (
              <span>
                {row.phaseName + row.buildingName + row.unitName + row.levelName + row.roomNoName}
              </span>
            )
          }}
        />
        <Table.Column title="身份" dataIndex="roleName" key="roleName" />
        <Table.Column
          title="审核状态"
          dataIndex="verifyStatus"
          key="verifyStatus"
          render={(_, row) => {
            return (
              <span>
                {verifyStatusDict[row.verifyStatus] || ''}
              </span>
            )
          }}
        />
        <Table.Column title="编辑人" dataIndex="updateName" key="updateName" />
        <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>
            )
          }}
        />
      </List>

    </div>
  )
}
