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({
        userName: taUser.userName,
        gender: taUser.gender,
        loginName : taUser.loginName,
        nickname : taUser.nickname,
        openid: taUser.openid,
        idCard: taUser.idCard,
        headPortrait: taUser.headPortrait,
        description: taUser.description,
        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.userName}</Descriptions.Item>
          <Descriptions.Item label="性别">{userData.gender === '2' ? '女' : '男'}</Descriptions.Item>
          <Descriptions.Item label="手机号">{userData.loginName}</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.headPortrait} 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="身份">{userData.description}</Descriptions.Item>
          <Descriptions.Item label="审核状态">{VerifyStatusDict[userData.status]}</Descriptions.Item>
          <Descriptions.Item label="资料手机">{userData.loginName}</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>
      <p style={{ color: '#888' }}>
        若想修改户主登录手机号，需要户主自己登录APP在个人中心修改。
        或者联系荟房网络运营人员核实后修改，因为此手机号可能在其他社区在用。
        若想修改成员为其他成员的手机号，请删除此成员后添加新成员。 
      </p>
      <Edit
        visible={editorShow}
        userData={userData}
        onSubmit={handleEdit}
        onCancel={() => setEditorShow(false)}
      />
    </div>
  )
}
