import React from 'react';
import { Spin, Button, Tabs, message, Modal } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

import '../content.less';
import './content.less';
import LeftTab from './leftTab.jsx';
import Collection from './collection';

import weixin from '../../../../image/weixin-w.png';
import qq from '../../../../image/qq-w.png';
import weibo from '../../../../image/weibo-w.png';

import defaultAvatar from '../../../../image/avatarImg.png'

import level1 from '../../../../image/level_1.png';
import level2 from '../../../../image/level_2.png';
import level3 from '../../../../image/level_3.png';
import level4 from '../../../../image/level_4.png';
import level5 from '../../../../image/level_5.png';


const Content = React.createClass({
    getInitialState () {
        return {
            loading: false,
            visible: false
        };
    },
    getData () {
        this.setState({
            loading: false
        });
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/homePage"
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                this.setState({
                    achievementNum: data.data.achievementNum,
                    copyrightNum: data.data.copyrightNum,
                    demandNum: data.data.demandNum,
                    gradeName: data.data.gradeName,
                    email: data.data.email,
                    intellectualPropertyNum: data.data.intellectualPropertyNum,
                    logoUrl: data.data.logoUrl,
                    level: data.data.lvl,
                    nickname: data.data.nickname,
                    number: data.data.number,
                    patentNum: data.data.patentNum,
                    personPortraitUrl: data.data.personPortraitUrl,
                    techProjectNum: data.data.techProjectNum,
                    type: data.data.type,
                    uid: data.data.uid,
                    visible: !data.data.lvl || data.data.lvl == 0 ? true : false
                })
            }
        }.bind(this)).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    componentWillMount () {
        this.getData();
    },
    tabChange (key) {

    },
    render () {
        const TabPane = Tabs.TabPane;
        return (
            <Spin spinning={this.state.loading} className='spin-box'>
                <div className="index-content">
                    <div className="index-userdata clearfix">
                        <p className="acc-title">
                            欢迎,
                            <span>{this.state.nickname || ('No.' + this.state.number)}</span>
                            {(() => {
                                if ( this.state.level ) {
                                    return <img src={globalConfig.avatarUploadHost + '/rank/level_' + this.state.level + '.png'} alt="" />
                                } else {
                                    return ''
                                }
                            })()}
                            {(() => {
                                if (this.state.level > 1 && this.state.level < 2) {
                                    return <span style={{ fontSize: '14px', color: '#333' }}>
                                        <a href={globalConfig.context + '/portal/membership.html'}>升级高级会员</a> ,获取更多会员权益
                                        </span>;
                                }
                            })()}
                        </p>
                        <div className="userdata-img">
                            {this.state.personPortraitUrl || this.state.logoUrl ?
                                <img src={globalConfig.avatarHost + "/upload" + (this.state.type == 0 ? this.state.personPortraitUrl : this.state.logoUrl)} alt="" />
                                : <img src={defaultAvatar} alt="" />}
                        </div>
                        <div className="userdata-content">
                            {(() => {
                                if (this.state.level > 0) {
                                    return <p className="userdata-lvl"><span>{this.state.gradeName}</span></p>;
                                } else {
                                    return <p className="userdata-lvl"><span>用户未认证</span><a style={{ marginLeft: '20px' }} href={userData.type == 1 ? globalConfig.context + "/user/groupCertify.html" : globalConfig.context + "/user/certify.html"}>进行实名认证</a></p>;
                                };
                            })()}
                            <p><a href={globalConfig.context + "/user/account/set.html"}>填写完整资料</a>，有助于提高您的资信</p>
                            <p className="userdata-relate" style={{ 'display': 'none' }}>
                                <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button>
                                <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button>
                                <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button>
                            </p>
                        </div>
                    </div>
                    <div className="index-record">
                        <p className="acc-title">我的轨迹</p>
                        {this.state.type ? <ul className="record-list clearfix">
                            <li>专利：<a href={globalConfig.context + "/user/account/services.html#patent"}>{this.state.patentNum || 0}</a> 项</li>
                            <li>软著：<a href={globalConfig.context + "/user/account/services.html#copyright"}>{this.state.copyrightNum || 0}</a> 项</li>
                            <li>知识产权：<a href={globalConfig.context + "/user/account/services.html#intellectual"}>{this.state.intellectualPropertyNum || 0}</a> 项</li>
                            <li>科技项目：<a href={globalConfig.context + "/user/account/services.html#technology"}>{this.state.techProjectNum || 0}</a> 项</li>
                            <li>技术成果：<a href={globalConfig.context + "/user/account/achievement.html#techAchievement"}>{this.state.achievementNum || 0}</a> 项</li>
                            <li>发布需求：<a href={globalConfig.context + "/user/account/demand.html#techDemand"}>{this.state.demandNum || 0}</a> 项</li>
                        </ul> : <ul className="record-list clearfix">
                                <li>技术成果：<a href={globalConfig.context + "/user/account/achievement.html#techAchievement"}>{this.state.achievementNum || 0}</a> 项</li>
                                <li>发布需求：<a href={globalConfig.context + "/user/account/demand.html#techDemand"}>{this.state.demandNum || 0}</a> 项</li>
                            </ul>}
                    </div>
                    <div className="index-activity">
                        <Collection />
                    </div>
                </div>
                <Modal maskClosable={false}
                    title="实名认证提示"
                    visible={this.state.visible}
                    onCancel={() => {
                        this.setState({
                            visible: false,
                        });
                    }}
                    width='400px'
                    footer={[]} >
                    <p style={{ textAlign: 'center' }}>
                        <span>您还未进行实名认证，请完成实名认证，为您提供更多服务</span>
                    </p>
                    <div style={{ marginTop: '20px', textAlign: 'center' }}>
                        <Button type="primary"
                            onClick={() => {
                                window.open(this.state.type == 1 ? globalConfig.context + "/user/groupCertify.html" : globalConfig.context + "/user/certify.html")
                            }}>马上去</Button>
                    </div>
                </Modal>
            </Spin>
        )
    }
});

export default Content;