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({
    loadUserData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/star/list',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.userPagination.pageSize,
                number: this.state.searchUserNumber, //编号
                username: this.state.searchUserName, //名称
                engagedField: this.state.searchField ? this.state.searchField.join(',') : undefined,
                professionalTitle: this.state.searchPfs,
                workUnit: this.state.searchUnit
            },
            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.state.userPagination.current = data.data.pageNo;
                    this.state.userPagination.total = data.data.totalCount;
                };
                this.setState({
                    dataSource: theArr,
                    userPagination: this.state.userPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadLectureData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/lecture/list',
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.lecturePagination.pageSize,
                username: this.state.searchLectureUser, //用户名称
                name: this.state.searchLectureName, //讲座名称
                startLectureTime: this.state.startTime ? this.state.startTime.format("yyyy-MM-dd HH:MM:SS") : undefined,
                endLectureTime: this.state.endTime ? this.state.endTime.format("yyyy-MM-dd HH:MM:SS") : undefined,
            },
            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({
                            id: thisdata.id,
                            uid: thisdata.uid,
                            lectureTime: thisdata.lectureTime,
                            name: thisdata.name,
                            summary: thisdata.summary,
                            username: thisdata.username,
                            lectureUrl: thisdata.lectureUrl,
                            lectureTimeFormattedDate: thisdata.lectureTimeFormattedDate,
                        });
                    };
                    this.state.lecturePagination.current = data.data.pageNo;
                    this.state.lecturePagination.total = data.data.totalCount;
                };
                this.setState({
                    lectureTableData: theArr,
                    lecturePagination: this.state.lecturePagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadHotData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/star/hotList',
            success: function (data) {
                let theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.length; i++) {
                        let thisdata = data.data[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({
                    hotTableData: theArr
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadStarData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/admin/star/starList',
            success: function (data) {
                let theArr = [];
                if (!data.data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    };
                } else {
                    for (let i = 0; i < data.data.length; i++) {
                        let thisdata = data.data[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({
                    starTableData: theArr
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            addVisible: false,
            hotSelectedRowKeys: [],
            hotSelectedRows: [],
            starSelectedRowKeys: [],
            starSelectedRows: [],
            userPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadUserData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            lecturePagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadLectureData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            userColumns: [
                {
                    title: '编号',
                    dataIndex: 'number',
                    key: 'number',
                }, {
                    title: '姓名',
                    dataIndex: 'username',
                    key: 'username',
                }, {
                    title: '从事领域',
                    dataIndex: 'engagedField',
                    key: 'engagedField',
                }, {
                    title: '职称名字',
                    dataIndex: 'professionalTitle',
                    key: 'professionalTitle',
                }, {
                    title: '工作单位',
                    dataIndex: 'workUnit',
                    key: 'workUnit',
                }, {
                    title: '成果数量',
                    dataIndex: 'achievementNums',
                    key: 'achievementNums',
                }, {
                    title: '操作',
                    dataIndex: 'action',
                    key: 'action',
                    render: (text, record, index) => {
                        return <div>
                            <Button onClick={() => { this.addIndex(record) }} type="primary" style={{ marginRight: '10px' }}>添加到大咖说</Button>
                            <Button onClick={() => { this.addStar(record) }} type="primary">添加到明星页</Button>
                        </div>
                    }
                }
            ],
            lectureColumns: [
                {
                    title: '讲堂名称',
                    dataIndex: 'name',
                    key: 'name',
                }, {
                    title: '开讲人姓名',
                    dataIndex: 'username',
                    key: 'username',
                }, {
                    title: '描述',
                    dataIndex: 'summary',
                    key: 'summary',
                }, {
                    title: '展示图',
                    dataIndex: 'lectureUrl',
                    key: 'lectureUrl',
                    render: text => {
                        if (text) {
                            return '已上传'
                        } else {
                            return '未上传'
                        };
                    }
                }
            ],
            userTableData: [],
            lectureTableData: [],
            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, i) => {
            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();
        this.loadHotData();
        this.loadStarData();
    },
    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: {
                data: JSON.stringify(starArr),
                hot: hotArr
            },
            success: function (data) {
                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));
    },
    search() {
        this.loadData();
    },
    reset() {
        this.state.searchPfs = undefined;
        this.state.searchUnit = undefined;
        this.state.searchNumber = undefined;
        this.state.searchName = undefined;
        this.state.searchField = [];
        this.loadData();
    },
    userTableRowClick(record, index) {
        this.state.userData = record;
        this.setState({
            addVisible: true
        });
    },
    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">专家明星列表</div>
                    <div className="admin-content-search">
                        <Input placeholder="编号" style={{ width: 100 }}
                            value={this.state.searchUserNumber}
                            onChange={(e) => { this.setState({ searchUserNumber: e.target.value }); }} />
                        <Input placeholder="专家明星名称" style={{ width: 160 }}
                            value={this.state.searchUserName}
                            onChange={(e) => { this.setState({ searchUserName: e.target.value }); }} />
                        <Cascader placeholder="请选择一个行业" style={{ width: 300 }}
                            options={techFieldList}
                            value={this.state.searchField}
                            onChange={(e) => { this.setState({ searchField: e }) }} />
                        <Input placeholder="职称名字" style={{ width: 160 }}
                            value={this.state.searchPfs}
                            onChange={(e) => { this.setState({ searchPfs: e.target.value }); }} />
                        <Input placeholder="工作单位" style={{ width: 160 }}
                            value={this.state.searchUnit}
                            onChange={(e) => { this.setState({ searchUnit: e.target.value }); }} />
                        <Button type="primary" onClick={this.search}>搜索</Button>
                        <Button onClick={this.reset}>重置</Button>
                    </div>
                    <Spin spinning={this.state.loading}>
                        <Table columns={this.state.userColumns}
                            dataSource={this.state.userTableData}
                            pagination={this.state.userPagination}
                            onRowClick={this.userTableRowClick} />
                    </Spin>
                </div>
                <div className="clearfix">
                    <div className="admin-content-warp" style={{ width: '50%', float: 'left' }}>
                        <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.lectureColumns}
                                dataSource={this.state.lectureTableData}
                                rowSelection={hotRowSelection}
                                pagination={this.state.lecturePagination} />
                        </Spin>
                    </div>
                    <div className="admin-content-warp" style={{ width: '50%', float: 'left' }}>
                        <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.otherColumns}
                                dataSource={this.state.starTableData}
                                rowSelection={starRowSelection}
                                pagination={false} />
                        </Spin>
                    </div>
                </div>
                <Button onClick={this.submit} type="primary" style={{ marginTop: '20px' }}>保存</Button>
                <Modal
                    title="新建科技讲堂" width={600}
                    visible={this.state.addVisible}
                    footer={null}
                    onCancel={() => { this.setState({ addVisible: false }) }} >
                    <div className="modal-box">
                        <span className="modal-box-title">开讲人</span>
                        <div className="modal-box-detail">
                            {this.state.userData.name}
                        </div>
                    </div>
                    <div className="modal-box">
                        <span className="modal-box-title">讲堂标题</span>
                        <div className="modal-box-detail">
                            <Input value={this.state.addModal.title}
                                onChange={(e) => {
                                    this.state.addModal.title = e.target.value;
                                    this.setState({ addModal: this.state.addModal });
                                }} />
                        </div>
                    </div>
                    <div className="modal-box">
                        <span className="modal-box-title">开讲时间</span>
                        <div className="modal-box-detail">
                            {this.state.userData.name}
                        </div>
                    </div>
                </Modal>
            </div>
        );
    }
});

export default Star;