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

const getByOrderNumberBillInvoice = fetch(apis.bill.getByOrderNumberBillInvoice)

const renderBillLink = bill => () => <NavLink><Button type="link"><Icon type="export" /></Button></NavLink>

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 => {
        setBillList(res)
      })
    }
  }, [id])

  return (
    <Spin spinning={loading}>
      <Collapse>
        {
          billList.map(bill => {
            <Collapse.Panel key={bill.id} header={bill.billName} extra={renderBillLink(bill)}>
              <Descriptions bordered column={3}>
              {
                (bill.billInvoiceList || []).map(item => (
                  <>
                    <Descriptions.Item key={`${item.id}-1`} label="收费单号">{item.id}</Descriptions.Item>
                    <Descriptions.Item key={`${item.id}-2`} label="金额（元）">{ item.payPrice / 100 }</Descriptions.Item>
                    <Descriptions.Item key={`${item.id}-3`} label="收费单说明">
                      <Typography.Text ellipsis>{item.billInvoiceExplain}</Typography.Text>
                    </Descriptions.Item>
                  </>
                ))
              }
              </Descriptions>
            </Collapse.Panel>
          })
        }
      </Collapse>
    </Spin>
  )
}
