import React, { useEffect, useState, useCallback } from 'react'
import { Button, Icon, Modal, Table, Popconfirm, notification } from 'antd'
import { fetch, fetchList, apis } from '@/utils/request'
import NavLink from 'umi/navlink'
import List from '../../components/List'
import AddOne from './components/AddOne'

const getTempBillInvoice = fetch(apis.bill.getTempBillInvoice)
const addTempBillInvoice = fetch(apis.bill.addTempBillInvoice)
const deleteTempBillInvoice = fetch(apis.bill.deleteTempBillInvoice)
const updateBillInvoiceStatus = fetch(apis.bill.updateBillInvoiceStatus)

export default props => {
  const [loading, setLoading] = useState(false)
  const [showAdd, setShowAdd] = useState(false)
  const [listData, setListData] = useState([])
  const [formData, setFormData] = useState({})

  const { id } = props.location.query
  
  const getListData = useCallback(
    () => {
      setLoading(true)
      getTempBillInvoice({urlData: {id}}).then(res => {
        setListData(res)
        setLoading(false)
      }).catch(e => setLoading(false))
    },
    [id],
  )

  const handleAdd = (vals, callback) => {
    addTempBillInvoice({
      billId: id,
      ...vals,
    }).then(res => {
      callback()
      getListData()
      setShowAdd(false)
    }).catch(() => setShowAdd(false))
  }

  const handleDeleteRow = row => {
    deleteTempBillInvoice({urlData: {id: row.id}}).then(res => {
      notification.success({ message: '删除费用信息成功' })
      getListData()
    })
  }

  const handleCommitAll = () => {
    if (!listData.length) {
      notification.warn({ message: '没有需要提交的数据' })
      return
    }

    setLoading(true)
    updateBillInvoiceStatus({data: listData.map(x => x.id)}).then(res => {
      notification.success({ message: '全部提交成功' })
      setLoading(false)
    }).catch(e => setLoading(false))
  }

  useEffect(() => {
    if (id) {
      getListData()
    }
    getListData()
  }, [])


  return (
    <div>
      <div style={{marginBottom: '24PX'}}>
        <Button type="primary" onClick={() => setShowAdd(true)}><Icon type="plus"/>新增记录</Button>
        <Button type="danger" style={{marginLeft: '48px'}} onClick={handleCommitAll}><Icon type="save"/>提交全部</Button>
      </div>
      <List dataSource={listData} loading={loading} rowKey="id">
        <Table.Column title="房屋信息" dataIndex="roomNo" key="roomNo" render={(_, row) => row.phase + row.building + row.unit + row.roomNo} />
        <Table.Column title="收费单说明" dataIndex="billInvoiceExplain" key="billInvoiceExplain" />
        <Table.Column title="收费金额(元)" dataIndex="payPrice" key="payPrice" render={x => x/100} />
        <Table.Column
          title="操作"
          key="action"
          render={(_, row) => {
            return (
              <>
                <Popconfirm
                  title="确认进行删除操作?"
                  onConfirm={() => handleDeleteRow(row)}
                  okText="删除"
                  cancelText="取消"
                >
                  <Button type="link">删除</Button>
                </Popconfirm>
              </>
            )
          }}
        />
      </List>
      <Modal title="收费组信息" visible={showAdd} footer={null} maskClosable={false} destroyOnClose onCancel={() => setShowAdd(false)}>
        <AddOne onSubmit={handleAdd} onCancel={() => setShowAdd(false)} />
      </Modal>
    </div>
  )
}
