import React from 'react';
import { Icon, Button, Spin, message, Table, Cascader, Input } from 'antd';
import { techFieldList } from '../../../DicTechFieldList';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';

const Star = React.createClass({
    loadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/star/list',
            data: {
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.list.length; i++) {
                        let thisdata = data.data.list[i];
                        theArr.push({
                            key: i,
                            uid: thisdata.uid,
                            engagedField: thisdata.engagedField,
                            username: thisdata.username,
                            professionalTitle: thisdata.professionalTitle,
                            workUnit: thisdata.workUnit,
                            number: thisdata.number,
                            achievementNums: thisdata.achievementNums,
                        });
                    };
                };
                this.setState({
                    dataSource: theArr
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            hotSelectedRowKeys: [],
            hotSelectedRows: [],
            starSelectedRowKeys: [],
            starSelectedRows: [],
            columns: [{
                title: '活动标题',
                dataIndex: 'title',
                key: 'title',
                render: (text, record, index) => {
                    return <Input value={record.title} onChange={(e) => { record.title = e.target.value; this.setState({ data: this.state.data }); }} />
                }
            }, {
                title: '活动简介',
                dataIndex: 'dis',
                key: 'dis',
                render: (text, record, index) => {
                    return <Input type="area" span={4} value={record.url} onChange={(e) => { record.url = e.target.value; this.setState({ data: this.state.data }); }} />
                }
            }],
            dataSource: [],
            hotTableData: [],
            starTableData: []
        };
    },
    addIndex(record) {
        let theBool = true;
        this.state.hotTableData.map((item, i) => {
            if (item.uid == record.uid) {
                message.warning('该条记录已经存在于大咖列表中！');
                theBool = false;
                return;
            };
            if (i == 4) {
                message.warning('大咖列表最多只能显示4条记录！');
                theBool = false;
                return;
            };
        });
        if (theBool) {
            this.state.hotTableData.push(record);
            this.setState({ hotTableData: this.state.hotTableData });
        };
    },
    addStar(record) {
        let theBool = true;
        this.state.starTableData.map(item => {
            if (item.uid == record.uid) {
                message.warning('该条记录已经存在于明星列表中！');
                theBool = false;
                return;
            };
            if (i == 6) {
                message.warning('明星列表最多只能显示6条记录！');
                theBool = false;
                return;
            };
        });
        if (theBool) {
            this.state.starTableData.push(record);
            this.setState({ starTableData: this.state.starTableData });
        };
    },
    hotDelectRow() {
        let deletedArr = this.state.hotTableData.concat();
        for (let idx = 0; idx < this.state.hotSelectedRows.length; idx++) {
            let deleteIndex = this.state.hotSelectedRows[idx];
            if (deleteIndex.uid) {
                for (let n = 0; n < deletedArr.length; n++) {
                    if (deleteIndex.uid == deletedArr[n].uid) {
                        deletedArr.splice(n, 1);
                    };
                };
            };
        };
        this.setState({
            hotTableData: deletedArr,
            hotSelectedRowKeys: []
        });
    },
    starDelectRow() {
        let deletedArr = this.state.starTableData.concat();
        for (let idx = 0; idx < this.state.starSelectedRows.length; idx++) {
            let deleteIndex = this.state.starSelectedRows[idx];
            if (deleteIndex.uid) {
                for (let n = 0; n < deletedArr.length; n++) {
                    if (deleteIndex.uid == deletedArr[n].uid) {
                        deletedArr.splice(n, 1);
                    };
                };
            };
        };
        this.setState({
            starTableData: deletedArr,
            starSelectedRowKeys: []
        });
    },
    componentWillMount() {
        this.loadData();
    },
    submit() {
        let hotArr = [], starArr = [];
        for (let i = 0; i < this.state.hotTableData.length; i++) {
            let hotUid = this.state.hotTableData[i].uid;
            if (hotUid) {
                hotArr.push(hotUid);
            };
        };
        for (let n = 0; n < this.state.starTableData.length; n++) {
            let starUid = this.state.starTableData[n].uid;
            if (starUid) {
                starArr.push({
                    uid: starUid,
                    star: 1
                });
            };
        };
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/star/save',
            data: {
                star: starArr,
                hot: hotArr
            },
            success: function (data) {
                let theArr = [];
                if (!data.data || !data.data.list) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    message.success('保存成功!')
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    render() {
        const hotRowSelection = {
            selectedRowKeys: this.state.hotSelectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    hotSelectedRows: selectedRows,
                    hotSelectedRowKeys: selectedRowKeys
                });
            }
        };
        const starRowSelection = {
            selectedRowKeys: this.state.starSelectedRowKeys,
            onChange: (selectedRowKeys, selectedRows) => {
                this.setState({
                    starSelectedRows: selectedRows,
                    starSelectedRowKeys: selectedRowKeys
                });
            }
        };
        const hotHasSelected = this.state.hotSelectedRowKeys.length > 0;
        const starHasSelected = this.state.starSelectedRowKeys.length > 0;
        return (
            <div className="admin-content" >
                <div className="admin-content-title">科技讲堂管理</div>
                <div className="admin-content-warp">
                    <div className="admin-content-header">
                        <span>大咖显示列表</span>
                        <Button type='danger' disabled={!hotHasSelected} onClick={this.hotDelectRow}>
                            删除<Icon type="minus" />
                        </Button>
                    </div>
                    <Spin spinning={this.state.loading}>
                        <Table columns={this.state.columns}
                            dataSource={this.state.hotTableData}
                            rowSelection={hotRowSelection}
                            pagination={false} />
                    </Spin>
                </div>
                <div className="admin-content-warp">
                    <div className="admin-content-header">
                        <span>明星显示列表</span>
                        <Button type='danger' disabled={!starHasSelected} onClick={this.starDelectRow}>
                            删除<Icon type="minus" />
                        </Button>
                    </div>
                    <Spin spinning={this.state.loading}>
                        <Table columns={this.state.columns}
                            dataSource={this.state.starTableData}
                            rowSelection={starRowSelection}
                            pagination={false} />
                    </Spin>
                </div>
                <Button onClick={this.submit} type="primary" style={{ marginTop: '20px' }}>保存</Button>
            </div >
        );
    }
});

export default Star;