import React from 'react'


const TableThead = React.createClass({

    render(){

        require('./style.less')

        return (
            <thead>
            <tr>
                {this.props.data.thead.map((item, index) => {
                    return (
                        <th key={index}>{item}</th>
                    )
                })}
            </tr>
            </thead>
        )
    }
})

const TableTbody = React.createClass({

    render(){
        return (
            <tbody>
            {this.props.data.tbody.map((item, index) => {
                return (
                    <tr key={index}>
                        {item.tr.map((item, index) => {
                            return (<td key={index} data-label={this.props.data.thead[index]}>{item}</td>)
                        })}
                    </tr>
                )
            })}
            </tbody>
        )
    }
})

const Table = React.createClass({
    statics: {
        getDefaultData(){
            return {
                thead: [
                    '网站名称',
                    '网址',
                    '创建时间'
                ],
                tbody: [
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']},
                    {tr: ['Amaze UI', 'http://amazeui.org', '2012-10-01']}
                ]
            }
        }
    },
    componentDidMount(){
        var node = React.findDOMNode(this.refs.table)
    },
    render(){

        var tableData = this.props.data || Table.getDefaultData()

        return (
            <table className="am-table am-table-striped am-table-hover">
                <TableThead data={tableData}/>
                <TableTbody data={tableData}/>
            </table>
        )
    }
})

export default Table