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

const fetchPhaseList = fetch(apis.buildingOwnerInfo.getPhaseList)
const fetchBuildingList = fetch(apis.buildingOwnerInfo.getBuildingList)
const fetchUnitList = fetch(apis.buildingOwnerInfo.getUnitList)
const fetchLevelList = fetch(apis.buildingOwnerInfo.getLevelList)
const fetchRoomNoList = fetch(apis.buildingOwnerInfo.getRoomNoList)

const Condition = props => {
  const [phaseList, setPhaseList] = useState([])
  const [buildingList, setBuildingList] = useState([])
  const [unitList, setUnitList] = useState([])
  const [levelList, setLevelList] = useState([])
  const [roomNoList, setRoomNoList] = useState([])

  const [phaseId, setPhaseId] = useState()
  const [buildingId, setBuildingId] = useState()
  const [unitId, setUnitId] = useState()
  const [levelId, setLevelId] = useState()
  const [roomNoId, setRoomNoId] = useState()

  // 获取期
  useEffect(() => {
    fetchPhaseList().then(res => setPhaseList(res))
  }, [])

  // 楼栋
  useEffect(() => {
    if (phaseId) {
      fetchBuildingList({params: {phaseId}}).then(res => setBuildingList(res))
    }
    setBuildingId()
  }, [phaseId])

  // 单元
  useEffect(() => {
    if (phaseId && buildingId) {
      fetchUnitList({params: {phaseId, buildingId}}).then(res => setUnitList(res))
    }
    setUnitId()
  }, [phaseId, buildingId])

  // 楼层
  useEffect(() => {
    if (phaseId && buildingId && unitId) {
      fetchLevelList({params: {phaseId, buildingId, unitId}}).then(res => setLevelList(res))
    }
    setLevelId()
  }, [phaseId, buildingId, unitId])

  // 房号
  useEffect(() => {
    if (phaseId && buildingId && unitId && levelId) {
      fetchRoomNoList({params: {phaseId, buildingId, unitId, levelId}}).then(res => setRoomNoList(res))
    }
    setRoomNoId()
  }, [phaseId, buildingId, unitId, levelId])

  return (
    <Search
      onSearch={props.onSearch}
      onReset={props.onReset}
      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 handleSearch = () => {

  }

  const handleDeleteRow = row => {

  }

  const handlePageChange = (pageNum, pageSize) => {

  }

  return (
    <div>
      <Condition onSearch={handleSearch} onReset={handleSearch} />
      <div style={{ margin: '24px 0' }}>
        <NavLink to={`/property/proprietor/add`}>
          <Button type="primary">添加</Button>
        </NavLink>
        <Button type="link"><Icon type="upload"/>批量导入业主资料</Button>
      </div>
      <Spin spinning={loading}>
        <List dataSource={listData} onPageChange={handlePageChange} rowKey="userVerifyId">
          <Table.Column title="编号" dataIndex="userVerifyId" key="userVerifyId" />
          <Table.Column
            title="姓名"
            dataIndex="ownerName"
            key="ownerName"
            render={(_, row) => {
              return (
                <NavLink to={`/xxx?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>
      </Spin>

    </div>
  )
}
