import React, { useEffect, useState } from 'react'
import { Button, Descriptions, List, Modal } from 'antd'
import router from 'umi/router'
import { fetch, apis } from '@/utils/request'
import Section from './components/Section'
import Edit from './components/Edit'

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

const buildingDetails = fetch(apis.buildingOwnerInfo.buildingDetails)
const verifyinfoAdd = fetch(apis.buildingOwnerInfo.verifyinfoAdd)

export default props => {
  const [editorShow, setEditorShow] = useState(false)
  const [userData, setUserData] = useState({})
  
  const { id } = props.location.query
  const roomName = userData.phaseName + userData.buildingName + userData.unitName + userData.levelName + userData.roomNoName

  const handleEdit = vals => {
    verifyinfoAdd({ urlData: { id }, params: vals }).then(res => {
      Modal.success({
        content: '提交修改成功',
        onOk: () => {
          setEditorShow(false)
        }
      })
    })
  }

  useEffect(() => {
    buildingDetails({ data: { id } }).then(res => {
      const { taUser = {}, taUserVerify = {}, roomInfoList = [] } = res || {}
      setUserData({
        name: taUser.name,
        gender: taUser.gender,
        phone : taUser.phone,
        nickname : taUser.nickname,
        openid: taUser.openid,
        idCard: taUserVerify.idCard,
        avatarurl: taUser.avatarurl,
        ownerName: taUserVerify.ownerName,
        verifyStatus: taUserVerify.verifyStatus + '',
        status: taUserVerify.verifyStatus + '',
        faceImg: taUserVerify.faceImg,
        roomNoName: taUserVerify.roomNoName,
        roomInfoList : roomInfoList,
        roleId: taUserVerify.roleId + '',
        phaseName: taUserVerify.phaseName,
        unitName: taUserVerify.unitName,
        buildingName: taUserVerify.buildingName,
        levelName: taUserVerify.levelName,
      })
    })
  }, [id])

  return (
    <div>
      <Section title="基本信息">
        <Descriptions column={3}>
          <Descriptions.Item label="姓名">{userData.ownerName}</Descriptions.Item>
          <Descriptions.Item label="性别">{!userData.idCard ? '' : (userData.idCard.substring(-2, 1) - 0) % 2 === 1 ? '男' : '女'}</Descriptions.Item>
          <Descriptions.Item label="手机号">{userData.phone}</Descriptions.Item>
          <Descriptions.Item label="微信昵称">{userData.nickname}</Descriptions.Item>
          <Descriptions.Item label="微信ID">{userData.openid}</Descriptions.Item>
          <Descriptions.Item label="身份证">{userData.idCard}</Descriptions.Item>
          <Descriptions.Item label="头像">
            <img src={userData.avatarurl} alt="" style={{ width: '128px', height: '128px' }}/>
          </Descriptions.Item>
        </Descriptions>
      </Section>
      <Section title="在当前房屋" subTitle={roomName} action={<Button type="link" onClick={() => setEditorShow(true)}>修改</Button>}>
        <Descriptions column={3}>
          <Descriptions.Item label="身份">业主</Descriptions.Item>
          <Descriptions.Item label="审核状态">{VerifyStatusDict[userData.status]}</Descriptions.Item>
          <Descriptions.Item label="资料手机">{userData.phone}</Descriptions.Item>
          <Descriptions.Item label="人脸">
            <img src={userData.faceImg} alt="" style={{ width: '128px', height: '128px' }}/>
          </Descriptions.Item>
        </Descriptions>
      </Section>
      <Section title="关联本小区其他房屋" subTitle="使用用户手机号在小区用户列表中搜索查看">
        <List dataSource={userData.roomInfoList || []} renderItem={x => (<List.Item>{x}</List.Item>)} size="small" />
      </Section>
      <Edit
        visible={editorShow}
        userData={userData}
        onSubmit={handleEdit}
        onCancel={() => setEditorShow(false)}
      />
    </div>
  )
}