import * as React from 'react';
import { Table, Icon, Button, Input, Select } from 'antd';
export class SceneListPanel extends React.Component<any, any>{

    onButtonClick(): void{
        
    }    

    render() {
        const Option = Select.Option;
        const columns = [
            {
                title: '场景ID',
                dataIndex: 'sceneId',//列数据在数据项中对应的 key，支持 a.b.c 的嵌套写法
                key: 'sceneId',//react 需要的key
                render: text => <a href="#">{text}</a>,
            }, {
                title: '场景名称',
                dataIndex: 'sceneName',
                key: 'sceneName',
            }, {
                title: '场景地址',
                dataIndex: 'sceneUrl',
                key: 'sceneUrl',
            }, {
                title: 'Action',
                key: 'action',
                render: (text, record) => (
                    <span>
                        <a href="#">Action 一 {record.name}</a>
                        <span className="ant-divider" />
                        <a href="#">Delete</a>
                        <span className="ant-divider" />
                        <a href="#" className="ant-dropdown-link">
                            More actions <Icon type="down" />
                        </a>
                    </span>
                ),
            }, {
                title: 'x',
                dataIndex: 'x',
                key: 'x',
                render: (text, record) => (
                    <Input placeholder={record.name} />
                )
            }, {
                title: 'y',
                dataIndex: 'y',
                key: 'y',
            }, {
                title: '可见',
                dataIndex: 'visible',
                key: 'visible',
                render: (text, record) => (
                    <Select defaultValue="lucy" style={{ width: 120 }} onChange={this.onButtonClick}>
                        <Option value="jack">Jack</Option>
                        <Option value="lucy">Lucy</Option>
                        <Option value="disabled" disabled>Disabled</Option>
                        <Option value="Yiminghe">yiminghe</Option>
                    </Select>
                )
            }
        ];
        const data = [];
        for (let i = 0; i < 1000; i++) {
            data.push({
                key: i,
                name: `Edward King ${i}`,
                age: 32,
                address: `London, Park Lane no. ${i}`,
                x: i,
                y: i,
                visible: "false"
            });
        }
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
                console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
            onSelect: (record, selected, selectedRows) => {
                console.log(record, selected, selectedRows);
            },
            onSelectAll: (selected, selectedRows, changeRows) => {
                console.log(selected, selectedRows, changeRows);
            },
            getCheckboxProps: record => ({
                disabled: record.name === 'Disabled User',    // Column configuration not to be checked
            }),
        };
        return (
            <div style={{ padding: 10 }}>
                <Button type="ghost" style={{ width: 70, margin: 10 }} onClick={this.onButtonClick}>添加场景</Button>
                <Button type="ghost" style={{ width: 70, margin: 10 }} onClick={this.onButtonClick}>编辑场景</Button>
                <Button type="ghost" style={{ width: 70, margin: 10 }} onClick={this.onButtonClick}>删除场景</Button>
                <Button type="ghost" style={{ width: 70, margin: 10 }} onClick={this.onButtonClick}>刷新</Button>
                <Table columns={columns} dataSource={data} bordered rowSelection={rowSelection}/>
            </div>
        );
    }
}