import React, { useState } from 'react'
import { Button, Upload, Icon, Table } from 'antd'
import List from '../../../components/List'

const Section = props => {
  return (
    <p style={{ color: '#99a9bf', fontSize: '13px' }}>
      {props.children}
    </p>
  )
}

export default props => {
  const [listData, setListData] = useState([])

  return (
    <div>
      <Section>
        <span>如果还未制作账单，请先下载账单模板，按规则填写费用后再上传</span>
        <Button type="link" size="small" style={{ marginLeft: '6px' }}><Icon type="download" />下载模板</Button>
        <Button type="link" size="small"><Icon type="upload" />选取账单文件并预览</Button>
      </Section>
      <Section>
        <span>如果想修改下表的内容，请重新下载excel模板填写金额后上传，系统会直接删除下表所有旧数据，以新的excel内容为准</span>
      </Section>
      <List dataSource={listData} size="small" bordered>
        <Table.Column align="center" title="房屋信息" dataIndex="phase" key="phase" render={(_, row) => (row.phase + row.building + row.unit + row.level + row.roomNo)} />
        <Table.Column align="center" title="收费说明" dataIndex="billExplain" key="billExplain" />
        <Table.Column align="center" title="收费金额(元)" dataIndex="payPrice" key="payPrice" render={payPrice => (payPrice === null || payPrice === undefined ? '' : Number(payPrice/100).toFixed(2))} />
      </List>
      <Section>
        <span>点击发送后账单会发送给对应家庭，家庭中的成员都可以查看到他们家的收费项，缴费成功无法线上退款，只能线下当面退款，请先保存为草稿，核对无误后再发送账单给住户</span>
      </Section>
    </div>
  )
}
