import React from 'react';
import { Row, Col, Icon, Modal, Button, Spin, Select, Input, message, Badge, Table, Tabs, Tag } from 'antd';
import { getProvince } from '../NewDicProvinceList.js';
import { companySearch } from '../tools.js';
import './topTab.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';


import logo from '../../../image/acc-logo.png';

const MessageModal = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false,
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadReaded(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            UnreadPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadUnread(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            columns: [
                {
                    title: '编号',
                    dataIndex: 'key',
                    key: 'key'
                }, {
                    title: '类型',
                    dataIndex: 'noticeType',
                    key: 'noticeType',
                    render: (text, record) => {
                        switch (text) {
                            case 1:
                                return <a href={globalConfig.context + "/admin/servicesManage/patent.html?rid=" + record.rid + "&uid=" + record.uid + "#comprehensive"}> {record.noticeTypeName} </a>;
                            case 3:
                                return <a href={globalConfig.context + "/admin/servicesManage/copyright.html?rid=" + record.rid + "&uid=" + record.uid + "#copyright"}> {record.noticeTypeName} </a>;
                            case 2:
                                return <a href={globalConfig.context + "/admin/servicesManage/highTech.html?rid=" + record.rid + "&uid=" + record.uid + "&year=" + record.year + "#highTechApply"}> {record.noticeTypeName} </a>;
                            case 4:
                                return <a href={globalConfig.context + "/admin/servicesManage/technology.html?rid=" + record.rid + "&uid=" + record.uid + "#applyManage"}> {record.noticeTypeName} </a>;
                            case 5:
                                return <a href={globalConfig.context + "/admin/userManage.html?id=" + record.uid + "&type=0" + (window.showUserList ? "#userList" : "#customerList")}> {record.noticeTypeName} </a>;
                            case 6:
                                return <a href={globalConfig.context + "/admin/userManage.html?id=" + record.uid + "&type=1" + (window.showOrgList ? "#orgList" : "#customerList")}> {record.noticeTypeName} </a >;
                            case 7:
                                return <a href={globalConfig.context + "/admin/servicesManage/contract.html?rid=" + record.rid + "&uid=" + record.uid + "#contract"}> {record.noticeTypeName} </a >;
                            case 8:
                                return <a href={globalConfig.context + "/admin/demand.html?rid=" + record.rid + "#techDemandUser"}> {record.noticeTypeName} </a >;
                            case 9:
                                return <a href={globalConfig.context + "/admin/demand.html?rid=" + record.rid + "&uid=" + record.uid + "#techDemandOrg"}> {record.noticeTypeName} </a >;
                            case 10:
                                return <a href={globalConfig.context + "/admin/achievement.html?rid=" + record.rid + "#orgTechAchievement"}> {record.noticeTypeName} </a >;
                            case 11:
                                return <a href={globalConfig.context + "/admin/achievement.html?rid=" + record.rid + "#userTechAchievement"}> {record.noticeTypeName} </a >;                           
                        }
                    }
                }, {
                    title: '时间',
                    dataIndex: 'createTimeFormattedDate',
                    key: 'createTimeFormattedDate'
                }, {
                    title: '内容',
                    dataIndex: 'content',
                    key: 'content',
                }, {
                    title: '公司',
                    dataIndex: 'unitName',
                    key: 'unitName',
                }, {
                    title: '业务员',
                    dataIndex: 'principle',
                    key: 'principle',
                }
            ],
            data: []
        };
    },
    loadReaded(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/notice/readed",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.pagination.pageSize,
            }
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            this.state.data = [];
            for (let i = 0; i < data.data.list.length; i++) {
                let thisdata = data.data.list[i];
                this.state.data.push({
                    key: i + 1,
                    id: thisdata.id,
                    rid: thisdata.rid,
                    uid: thisdata.uid,
                    aid: thisdata.aid,
                    noticeType: thisdata.noticeType,
                    year: thisdata.year,
                    noticeTypeName: thisdata.noticeTypeName,
                    content: thisdata.content,
                    createTime: thisdata.createTime,
                    createTimeFormattedDate: thisdata.createTimeFormattedDate,
                    principle: thisdata.principle,
                    unitName: thisdata.unitName
                });
            };
            this.state.pagination.current = data.data.pageNo;
            this.state.pagination.total = data.data.totalCount;
            this.setState({
                dataSource: this.state.data,
                pagination: this.state.pagination
            });
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadUnread(pageNo) {
        this.state.data = [];
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/notice/unread",
            data: {
                pageNo: pageNo || 1,
                pageSize: this.state.UnreadPagination.pageSize,
            }
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            this.state.data = [];
            for (let i = 0; i < data.data.list.length; i++) {
                let thisdata = data.data.list[i];
                this.state.data.push({
                    key: i + 1,
                    id: thisdata.id,
                    rid: thisdata.rid,
                    uid: thisdata.uid,
                    aid: thisdata.aid,
                    noticeType: thisdata.noticeType,
                    year: thisdata.year,
                    noticeTypeName: thisdata.noticeTypeName,
                    content: thisdata.content,
                    createTime: thisdata.createTime,
                    createTimeFormattedDate: thisdata.createTimeFormattedDate,
                    principle: thisdata.principle,
                    unitName: thisdata.unitName
                });
            };
            this.state.UnreadPagination.current = data.data.pageNo;
            this.state.UnreadPagination.total = data.data.totalCount;
            this.setState({
                unreadData: this.state.data,
                UnreadPagination: this.state.UnreadPagination
            });
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    componentWillReceiveProps(nextProps) {
        if (!this.state.visible && nextProps.showDesc) {
            this.loadReaded();
            this.loadUnread();
        };
        this.state.visible = nextProps.showDesc
    },
    handleOk() {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false, true);
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false, true);
    },
    render() {
        return (
            <div className="topTab-modal">
                <Spin spinning={this.state.loading} className='spin-box'>
                    <Modal maskClosable={false} title="信息中心" visible={this.state.visible}
                        onOk={this.handleOk} onCancel={this.handleCancel}
                        width='800px' footer=''
                    >
                        <Tabs defaultActiveKey="1">
                            <Tabs.TabPane tab="新信息" key="1">
                                <Table columns={this.state.columns}
                                    dataSource={this.state.unreadData}
                                    pagination={this.state.UnreadPagination} />
                            </Tabs.TabPane>
                            <Tabs.TabPane tab="已读信息" key="2">
                                <Table columns={this.state.columns}
                                    dataSource={this.state.dataSource}
                                    pagination={this.state.pagination} />
                            </Tabs.TabPane>
                        </Tabs>
                    </Modal>
                </Spin>
            </div>
        );
    }
});

const UserModal = React.createClass({
    getInitialState() {
        return {
            visible: false,
            loading: false,
            locations: []
        };
    },
    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/adminInfo",
            success: function (data) {
                if (!data.data) {
                    if (data.error[0] && data.error[0]) {
                        message.warning(data.error[0].message);
                    };
                    return;
                };
                this.setState({
                    id: data.data.id,
                    mobile: data.data.mobile,
                    name: data.data.name,
                    position: data.data.position,
                    email: data.data.email,
                    createTime: data.data.createTime,
                    number: data.data.number,
                    createTimeFormattedDate: data.data.createTimeFormattedDate
                });
                this.loadLocations(data.data.id);
            }.bind(this),
        }).always(function (data) {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    loadLocations(id) {
        this.setState({
            loading: true
        });
        $.ajax({
            url: globalConfig.context + '/api/admin/supervise/adminDetailLocation',
            cache: false,
            data: {
                "id": id
            }
        }).done((data) => {
            if (!data.data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                    return;
                };
            };
            data.data.map((item) => {
                if (item.city) {
                    item.city = item.city.split(',');
                }
            });
            this.setState({
                locations: data.data,
                loading: false
            });
        })
    },
    componentWillReceiveProps(nextProps) {
        if (!this.state.visible && nextProps.showDesc) {
            this.loadData();
        };
        this.state.visible = nextProps.showDesc
    },
    handleOk() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/updateAdminInfo",
            data: {
                id: this.state.id,
                mobile: this.state.mobile,
                name: this.state.name,
                email: this.state.email,
                province: this.state.province,
                password: this.state.password,
                pwd: this.state.pwd
            }
        }).always(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
                this.setState({
                    loading: false
                });
            } else {
                message.success('保存成功！');
                this.props.closeDesc(false, true);
            };
        }.bind(this));
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
        this.props.closeDesc(false);
    },
    render() {
        return (
            <div className="topTab-modal">
                <Spin spinning={this.state.loading} className='spin-box'>
                    <Modal maskClosable={false} title="用户设置" visible={this.state.visible}
                        onOk={this.handleOk} onCancel={this.handleCancel}
                        width='380px' >
                        <ul className="modal-content">
                            <li>
                                <span className='modal-text'>名字</span>
                                <Input value={this.state.name} onChange={(e) => { this.state.name = e.target.value; this.setState({ name: this.state.name }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>职位</span>
                                <span>{this.state.position}</span>
                            </li>
                            <li>
                                <span className='modal-text'>登录账号</span>
                                <Input value={this.state.mobile} onChange={(e) => { this.state.mobile = e.target.value; this.setState({ mobile: this.state.mobile }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>省份</span>
                                <div style={{ display: "inline-block", width: '78%' }}>
                                    {this.state.locations.map((item, i) => {
                                        return <Tag key={i}>{getProvince(item.province) + ' ' + (item.city ? item.city.map((c) => {
                                            return getProvince(c) + ' '
                                        }) : '')}</Tag>
                                    })}
                                </div>
                            </li>
                            <li>
                                <span className='modal-text'>邮箱</span>
                                <Input value={this.state.email} onChange={(e) => { this.state.email = e.target.value; this.setState({ email: this.state.email }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>密码</span>
                                <Input value={this.state.password} onChange={(e) => { this.state.password = e.target.value; this.setState({ password: this.state.password }); }} />
                            </li>
                            <li>
                                <span className='modal-text'>原密码</span>
                                <Input value={this.state.pwd} onChange={(e) => { this.state.pwd = e.target.value; this.setState({ pwd: this.state.pwd }); }} />
                            </li>
                        </ul>
                    </Modal>
                </Spin>
            </div>
        );
    }
});

const TopTab = React.createClass({
    getInitialState() {
        return {
            username: '请登录!',
        };
    },
    logOut() {
        let theActive = this.props.active;
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/login",
        }).done(function (data) {
            window.location.href = globalConfig.context + "/admin/login.html"
        });
    },
    componentWillMount() {
        if (this.props.active) {
            this.loadData();
        };
    },
    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/notice/unreadCount",
            success: function (data) {
                if (!data.data) {
                    if (data.error[0] && data.error[0]) {
                        message.warning(data.error[0].message);
                        return;
                    };
                };
                this.setState({
                    badge: data.data,
                });
            }.bind(this),
        }).always(function (data) {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    closeUserModal(e, s) {
        this.state.userModalShow = e;
        if (s) {
            this.loadData();
        };
    },
    closeMessageModal(e, s) {
        this.state.messageModalShow = e;
        if (s) {
            this.loadData();
        };
    },
    render() {
        return (
            <div className="account-top" >
                <div className="acc-top-user">
                    <span className="acc-top-user-name">欢迎您 , {adminData.name || adminData.mobile ? <a onClick={() => {
                        if (window.showPermissionList && window.showRoleList) {
                            return
                        };
                        this.setState({ userModalShow: true });
                    }}> {adminData.name || adminData.mobile} </a> : <a onClick={this.logOut}>{this.state.username}</a>} <a onClick={this.logOut}>[ 退出 ]</a></span>
                    <span className="acc-top-user-toindex"><a href={globalConfig.context + "/portal/index.html"}>返回首页</a></span>
                    {this.props.active ? <a onClick={() => { this.setState({ messageModalShow: true }); }} className="user-badge">
                        <Icon type="mail" />
                        {(() => {
                            if (!window.showSystem && this.state.badge) {
                                return <Badge status="processing" />
                            }
                        })()}
                    </a> : <div></div>}
                </div>
                <div className="acc-index">
                    <div className="acc-index-imgbox">
                        <img src={logo} alt="" />
                    </div>
                    <span><a href={globalConfig.context + "/admin/index.html"}>管理中心首页</a></span>
                </div>
                <div className="acc-top-tab">
                    <Row>
                        {/*<Col style={{ display: window.showUserManage ? 'block' : 'none' }} className={this.props.active === 'userManage' ? 'active' : ''} span={2}><a href={globalConfig.context + "/admin/userManage.html"}>用户管理</a></Col>*/}
                        <Col style={{ display: window.showCustomer ? 'block' : 'none' }} className={this.props.active === 'myClient' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/customer.html" }>客户管理</a></Col>
                        <Col style={{ display: window.showServices ? 'block' : 'none' }} className={this.props.active === 'services' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/servicesManage/contract.html"}>科技服务管理</a></Col>
                        <Col style={{ display: window.showAchievement ? 'block' : 'none' }} className={this.props.active === 'achievement' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/achievement.html"}>科技成果管理</a></Col>                       
                        <Col style={{ display: window.showDemand ? 'block' : 'none' }} className={this.props.active === 'demand' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/demand.html"}>科技需求管理</a></Col>
                        <Col style={{ display: window.showIdea ? 'block' : 'none' }} className={this.props.active === 'idea' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/idea.html"}>科技思想管理</a></Col>
                        <Col style={{ display: window.showUserOrderList ? 'block' : 'none' }} className={this.props.active === 'userOrder' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/userOrder.html"}>用户订单管理</a></Col>
                        <Col style={{ display: window.showSystem ? 'block' : 'none' }} className={this.props.active === 'system' ? 'active' : ''} span={3}><a href={globalConfig.context + "/admin/set.html"}>系统设置</a></Col>
                    </Row>
                </div>
                <UserModal showDesc={this.state.userModalShow} closeDesc={this.closeUserModal} />
                <MessageModal showDesc={this.state.messageModalShow} closeDesc={this.closeMessageModal} />
            </div >
        )
    }
});

export default TopTab;