import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Button } from 'antd'
import CustomTable from '@inkefe/components-custom-table'

class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      tableData: [
        {
          id: '1',
          uid: '111111',
          date: '2020-02-22',
          form1: 'test',
          form2: '21,23',
          form3: '12'
        },
        {
          id: '2',
          uid: '222222',
          date: '2020-02-22',
          form1: 'test',
          form2: '21,23',
          form3: '12'
        },
        {
          id: '3',
          uid: '333333',
          date: '2020-02-22',
          form1: 'test',
          form2: '21,23',
          form3: '12'
        }
      ],
      tableColumns: [
        {
          dataIndex: 'id',
          align: 'center',
          title: 'ID'
        },
        {
          dataIndex: 'uid',
          align: 'center',
          title: 'UID'
        },
        {
          dataIndex: 'date',
          align: 'center',
          title: '日期'
        },
        {
          dataIndex: 'form1',
          align: 'center',
          title: '提交内容1'
        },
        {
          dataIndex: 'form2',
          align: 'center',
          title: '提交内容2'
        },
        {
          dataIndex: 'form3',
          align: 'center',
          title: '提交内容3'
        },
        {
          dataIndex: 'operate',
          align: 'center',
          title: '操作',
          fixed: 'right',
          width: 120,
          render: (...args) => {
            const [text, record, index] = args

            return <div>
              <Button
                type="primary"
                size="small"
                onClick={() => { alert('奋斗吧，少年！') }}
              >
                查看
              </Button>
            </div>
          }
        }
      ]
    }
  }

  render () {
    const { tableData, tableTotal, tableColumns } = this.state

    return <div>
      <CustomTable
        rowKey="id"
        highlightColor="#e6fff9"
        dataSource={tableData}
        columns={tableColumns}
        scroll={{ x: 1200 }}
        pagination={false}
        bordered
      />
    </div>
  }
}

ReactDOM.render((
  <App />
), mountNode)