import React, { useEffect, useState } from 'react'
import { Button, Collapse, Icon, Descriptions, Typography, Spin, Table } from 'antd'
import NavLink from 'umi/navlink'
import { fetch, apis } from '@/utils/request'
// import List from '../components/List'

const getByOrderNumberBillInvoice = fetch(apis.bill.getByOrderNumberBillInvoice)

export default props => {
  const [loading, setLoading] = useState(false)
  const [billList, setBillList] = useState([])

  const { id } = props.location.query

  useEffect(() => {
    if (id) {
      getByOrderNumberBillInvoice({urlData: {id}}).then(res => {
        const { billOrderList = []} = res || {}
        setBillList(billOrderList)
      })
    }
  }, [id])

  console.log(billList)

  return (
    <div>
      <Spin spinning={loading}>
        <Collapse>
          {
            (billList || []).map(bill => (
              <Collapse.Panel
                key={bill.id}
                header={`收费组: ${bill.billName||'无'}`}
                // extra={<NavLink to=""><Button type="link">导出</Button></NavLink>}
              >
                <Table size="small" dataSource={bill.billInvoiceList || []} pagination={false}>
                  <Table.Column title="收费单号" dataIndex="id" key="id" />
                  <Table.Column title="金额（元）" dataIndex="payPrice" key="payPrice" render={t => t/100} />
                  <Table.Column title="收费单说明" dataIndex="billInvoiceExplain" key="billInvoiceExplain" />
                </Table>
              </Collapse.Panel>
            ))
          }
        </Collapse>
      </Spin>
    </div>
  )
}
