import React from 'react';
import Helmet from 'react-helmet';
import { Table, Modal, Tooltip, Input, message, Button, Tabs, Upload, Popconfirm } from 'antd';

import Header from '../../core/components/breadHead';
import xian from '../../core/lib/xian.js';

import { Pagination, UploadImage, SearchForm, ShowForm } from '../../xianModules/';
import { util } from '../../../utility/';
const log = [];
const headers = [{
            title: '员工号',
            key: 'staffNo',
            dataIndex: 'staffNo',
            render: (text, record) => xian.formatMoney(text),
        }, {
            title:'昵称',
            key: 'name',
            dataIndex: 'department',
        }, { 
            title:'姓名',
            key: 'realName',
            dataIndex: 'department',
            render: (text, record) => {
                return(<div><p>{text}</p><p>{record.role}</p></div>);
            },
        }, {
            title:'部门',
            key: 'department',
            dataIndex: 'department',
        }];
const obj = [{
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'zDWSxWYFXybQrbn93',
    staffNo : '18',
    name : 'kim',
    realName : 'kim',
    department : '运营部',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}, {
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'axCpbEN99jsmCpZER',
    staffNo : '22',
    name : 'leo',
    realName : 'leo',
    department : '运营部',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}, {
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'jfQpADo3PaMkjLfB8',
    staffNo : '02',
    name : '袁益琴',
    realName : '袁益琴',
    department : '采购部',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}, {
    _id: 'Xvxej5HZj72k3P6uM',
    userId : 'roiMQ8PHPQ8t3ERCr',
    staffNo : '53',
    name : 'kim',
    realName : '何庆',
    department : '鲜库',
    role : '工作人员',
    remark : '暂无',
    createdAt : '2016-11-28T03:17:59.300Z',
    isRemoved : true
}];
let preSearchData = [];
export default class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: obj,
        }
    }
    componentWillMount() {
        // 加载component时执行
        const self = this;
        const { hasUser } = self.props;
        const { router } = self.context;

        if (!hasUser) {
            router.push('/login');
        }
        this.logSetState();
    }

    componentDidMount() {
        document.onkeydown = ((e) => {
            if (e.altKey && e.keyCode === 90) {
                this.replay();
            }
        });
    }
    replay() {
        if (log.length === 0) {
            console.warn('No State to replay');
            return;
        }
        let idx = -1;
        const interval = setInterval( function() {
            idx ++;
            if (idx === log.length - 1) {
                clearInterval(interval);
            }
            this.setState(log[idx]);
        }.bind(this), 2000);
    }
    logSetState (newState) {
        if (log.length < 20 ) {
            log.push( log.length === 0 ? this.state : newState );
        } else {
            log.splice(1, 1);
            log.push(newState);
        }
        // this.setState(newState);
    }
    handleTableChange(pagination, filters, sorter) {
        const { current, pageSize } = pagination;
        const { condition } = this.state;

        this.fetch({
            current,
            pageSize,
            condition,
        });
    }

    render() {
        const { data = obj, sortby, edit } = this.state;
       
        return (
            <div className="formatManage">
                <Helmet title="版式管理" />
                <Header option={[{
                    name: '商品',
                    path: '/reshelfManage',
                }, {
                    name: '版式管理',
                }]}/>
                <div className="content">
                    <button className="ant-btn ant-btn-primary" onClick={this.toogleSearch.bind(this)}>🔍搜索</button>
            
                    <table>
                        <thead onClick={this.sort.bind(this)}>
                            <tr>
                            {
                                headers.map((colum, index) => {
                                    return (<th key={index}>{colum.title}{ sortby === colum.key ? this.state.descending ? '\u2191' : '\u2193' : ''}</th>);
                                })
                            }
                            </tr>
                        </thead>
                        <tbody onDoubleClick={this.shorEditor.bind(this)}>
                            <tr onChange={this.search.bind(this)}>
                            {
                                headers.map((colum, index) => {
                                    return (<td key={index}><input key={colum.key} data-idx={index} type="text" /></td>);
                                })
                            }
                            </tr>

                            {
                                data.map((item, index) => {
                                    return (
                                        <tr key={index}>
                                        {
                                            headers.map((colum, idx) => {
                                                const value = item[colum.key];
                                                
                                                return (                 
                                                    <td key={idx} data-row={index}>
                                                       { colum.render ? colum.render(value, item) : value }
                                                    </td>        
                                                );
                                            })
                                        }
                                        </tr>
                                    );
                                })
                            }
                        </tbody>                       
                    </table>
                </div>
            </div>
        );
    }
    sort(e) {
        const column = headers[e.target.cellIndex].key;
        const datas = this.state.data.slice();
        const descending = this.state.sortby === column && !this.state.descending;
        datas.sort((a, b) => { 
            return descending ? a[column] > b[column] : a[column] < b[column];
        });
        this.setState({
            data: datas,
            sortby: column,
            descending: descending,
        });
        this.logSetState(this.state);
    }
    shorEditor(e) {
        this.setState({
            edit: {
                row: parseInt(e.target.dataset.row, 10),
                cell: e.target.cellIndex,
            },
        });
        this.logSetState(this.state);
    }
    handleChange(e) {
        // console.log(e.target.value);
        const data = this.state.data.slice();
        data[this.state.edit.row][headers[this.state.edit.cell].key] = e.target.value;
        this.setState({
            edit: null,
            data: data,
        });
    }
    toogleSearch(e) {
        if (this.state.search) {
            this.setState({
                data: preSearchData,
                search: false,
            });
            preSearchData = [];
        } else {
            preSearchData = this.state.data;
            this.setState({
                search: true,
            });
        }
        this.logSetState(this.state);
    }
    search(e) {
        if (this.state.search) {
            const needle = e.target.value.toLowerCase();
            if (!needle) {
                this.setState({
                    data: preSearchData,
                });
                return;
            }
            const idx = e.target.dataset.idx;
            // console.log(row[idx]);
            const searchdata = preSearchData.filter((row) => {
                // console.log(row[headers[idx].key]);
                return row[headers[idx].key].toString().toLowerCase().indexOf(needle) > -1;
            });
            this.setState({ data: searchdata });
            this.logSetState(this.state);
        }   
    }
}

Page.contextTypes = {
    router: React.PropTypes.object,
};