import React, { useEffect, useState } from 'react'
import { PageHeader, Tabs, Spin, Button, Icon, Modal, notification } from 'antd'
import router from 'umi/router'
import { fetch, fetchList, apis } from '@/utils/request'
import Prompt from '@/components/Prompt'
import Building from './components/Building'
import CommunitySelect from '@/components/CommunitySelect'

const fetchPhaseList = fetch(apis.buildingOwnerInfo.getPhaseList)
const addNode = fetch(apis.buildingOwnerInfo.addNode)
const deleteNode = fetch(apis.buildingOwnerInfo.deleteNode)

export default props => {
  const [phaseList, setPhaseList] = useState([])
  const [loading, setLoading] = useState(false)
  const [phaseVisible, setPhaseVisible] = useState(false)
  const [community, setCommunity] = useState()

  const handleEdit = (key, act) => {
    const phase = phaseList[key - 0]

    if (act === 'remove') {
      Modal.confirm({
        title: `确认删除 ${phase.name} 数据?`,
        content: '谨慎操作, 数据不可恢复',
        onOk: () => {
          deleteNode({ data: {
            id: phase.id,
            name: phase.name,
            type: 'building', // 删除的时候, type 是 building 。这个接口比较诡异
            nodeNumber: phase.name,
          }}).then(() => {
            notification.success({message: '删除成功'})
            setPhaseList(phaseList.filter(x => x.id !== phase.id))
          })

        }
      })
    }
  }

  const handleBatchImport = () => {
    router.push(`/property/buildingInfo/importExcel?community=${community}`)
  }

  const handleAddPhase = v => {
    addNode({ data: {
      type: 'phase',
      nodeNumber: v,
      communityId: community,
    }}).then((res) => {
      notification.success({message: '添加成功'})
      setPhaseList(phaseList.concat(res))
    })
    setPhaseVisible(false)
  }

  // 获取期
  useEffect(() => {
    if (community) {
      setLoading(true)
      fetchPhaseList({params: {communityId: community}}).then(res => {
        setPhaseList(res)
        setLoading(false)
      }).catch(() => setLoading(false))
    }
  }, [community])

  return (
    <div>
      <PageHeader
        title="楼栋管理"
        backIcon={false}
        extra={<Button type="link" onClick={handleBatchImport}><Icon type="upload"/>批量导入</Button>}
      />
      <div style={{marginTop: 16}}>
        <span style={{display: 'inline-block', marginRight: '1em'}}>选择小区: </span>
        <CommunitySelect style={{minWidth: 200}} value={community} autoInited onChange={v => setCommunity(v)} />
      </div>
      <div style={{marginTop: 16}}>
        <Spin spinning={loading}>
          <Tabs
            defaultActiveKey="0"
            type="editable-card"
            onEdit={handleEdit}
            tabBarExtraContent={<Button type="link" onClick={() => setPhaseVisible(true)}><Icon type="plus" />期</Button>}
            hideAdd={true}
            >
          {
            phaseList.map((phase, index) => {
              return (
                <Tabs.TabPane tab={phase.name} key={`${index}`}>
                  <Building phase={phase} community={community} />
                </Tabs.TabPane>
              )
            })
          }
          </Tabs>
        </Spin>
      </div>
      <Prompt visible={phaseVisible} onOk={handleAddPhase} onCancel={() => setPhaseVisible(false)} placeholder="请填写期数名称" />
    </div>
  )
}
