import React, { useEffect, useState } from 'react'
import { Menu, Dropdown, Button, Popconfirm, Icon, notification } from 'antd'
import Prompt from '@/components/Prompt'
import { fetchList, fetch, apis } from '@/utils/request'

const addNode = fetch(apis.buildingOwnerInfo.addNode)
const updateNode = fetch(apis.buildingOwnerInfo.updateNode)
const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)

export default props => {
  const [roomInfo, setRoomInfo] = useState({})
  const [unitVisible, setUnitVisible] = useState(false)
  const [levelVisible, setLevelVisible] = useState(false)
  
  const handleEdit = val => {
    updateNode({ data: {
      id: roomInfo.unitId,
      name: val,
      type: 'unit',
    }}).then(() => {
      const room = {
        ...roomInfo,
        unitName: val
      }
      if (props.onEdit) {
        props.onEdit(room)
      }
      notification.success({message: '修改成功'})
    })
    setUnitVisible(false)
  }

  const handleDelete = () => {
    deleteNode({ data: {
      id: roomInfo.unitId,
      name: roomInfo.unitName,
      type: 'level',   // 删除单元传 level
      nodeNumber: undefined,
    }}).then(() => {
      if (props.onDelete) {
        props.onDelete(roomInfo)
      }
      notification.success({message: '删除成功'})
    })
  }

  const handleLevelAdd = val => {
    addNode({ data: {
      id: roomInfo.unitId,
      name: roomInfo.unitName,
      type: 'level',
      nodeNumber: val,
      communityId: props.community,
    }}).then((res) => {
      // 构造房间数据
      const room = {
        ...res,
        levelId: res.id,
        levelName: res.name,
        id: undefined,
        name: undefined,
      }

      if (props.onLevelAdd) {
        props.onLevelAdd(room)
      }
      notification.success({message: '添加成功'})
    })

    setLevelVisible(false)
  }

  useEffect(() => {
    setRoomInfo(props.dataSource || {})
  }, [props.dataSource])

  const menu = (
    <Menu>
      <Menu.Item>
        <Button type="link" onClick={() => setLevelVisible(true)}><Icon type="plus"/>层</Button>
      </Menu.Item>
      <Menu.Item>
        <Button type="link" onClick={() => setUnitVisible(true)}>编辑</Button>
      </Menu.Item>
      <Menu.Item>
        <Popconfirm
         title={`确认删除 ${roomInfo.unitName} ?`}
         onConfirm={handleDelete}
         okText="是"
         cancelText="否"
        >
          <Button type="danger" ghost style={{border: 'none', boxShadow: 'none'}}>删除</Button>
        </Popconfirm>
      </Menu.Item>
    </Menu>
  )

  return (
    <div style={{textAlign: 'center', fontSize: '1.2em', lineHeight: '3.5em'}} >
      <Dropdown overlay={menu} trigger={['contextMenu']} placement="topCenter">
        <div style={{cursor: 'pointer', height: 60}}>{roomInfo.unitName}</div>
      </Dropdown>
      <Prompt visible={unitVisible} onOk={handleEdit} onCancel={() => setUnitVisible(false)} placeholder="请填写单元名称" />
      <Prompt visible={levelVisible} onOk={handleLevelAdd} onCancel={() => setLevelVisible(false)} placeholder="请填写楼层名称" />
    </div>
  )
}
