import React from 'react';
import { Icon, message, Row, Col, Spin, Tag } from 'antd';
import './detail.less';
import { getSearchUrl } from '../tools';
import { getProvince } from '../NewDicProvinceList';
import { getTechField } from '../DicTechFieldList';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';

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

const Content = React.createClass({
    loadData() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/partner/detail",
            data: {
                uid: this.state.uid,
                type: this.state.type
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            } else {
                this.state.data = data.data || {};
            }
            this.setState({
                data: this.state.data,
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            data: {},
            pagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.loadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            columns: [
                {
                    title: '编号',
                    dataIndex: 'serialNumber',
                    key: 'serialNumber',
                }, {
                    title: '名称',
                    dataIndex: 'name',
                    key: 'name',
                }, {
                    title: '关键字',
                    dataIndex: 'keyword',
                    key: 'keyword',
                }, {
                    title: '成果类型',
                    dataIndex: 'dataCategory',
                    key: 'dataCategory',
                    render: text => {
                        switch (text) {
                            case "0":
                                return <span>成果</span>;
                            case "1":
                                return <span>技术</span>;
                            case "2":
                                return <span>项目</span>;
                        }
                    }
                }, {
                    title: '类型',
                    dataIndex: 'category',
                    key: 'category',
                    render: text => { return getAchievementCategory(text); }
                }, {
                    title: '行业分类',
                    dataIndex: 'field',
                    key: 'field',
                    render: text => { return getIndustryCategory(text[0], text[1]) }
                }, {
                    title: '所有人名称',
                    dataIndex: 'ownerName',
                    key: 'ownerName',
                }, {
                    title: '所有人类型',
                    dataIndex: 'ownerType',
                    key: 'ownerType',
                    render: text => {
                        switch (text) {
                            case "0":
                                return <span>个人</span>;
                            case "1":
                                return <span>组织</span>
                        }
                    }
                }, {
                    title: '发布时间',
                    dataIndex: 'releaseDateFormattedDate',
                    key: 'releaseDateFormattedDate',
                }
            ],
            dataSource: []
        };
    },
    componentWillMount() {
        if (window.location.search) {
            let theObj = getSearchUrl(window.location.search);
            if (theObj.rid && theObj.rid != 'null') {
                this.state.uid = theObj.rid;
                this.state.type = theObj.type;
                this.loadData();
            };
        };
    },
    render() {
        const theData = this.state.data;
        return (
            <Spin spinning={this.state.loading}>
                <div className="detail-content">
                    <Row>
                        <Col span={6}>
                            <div className="avatar-box">
                                <img src={(theData.personPortraitUrl || theData.logoUrl) ?
                                    (globalConfig.avatarHost + "/upload" + (this.state.type == 0 ? theData.personPortraitUrl : theData.logoUrl))
                                    : avatarImg} alt="头像" />
                            </div>
                        </Col>
                        <Col span={18} className="avatar-right">
                            <div>
                                <div className="column-title">用户名称</div>
                                <div className="column-text">{this.state.type == 0 ? theData.username : theData.unitName}</div>
                            </div>
                            <div>
                                <div className="column-title">用户类型</div>
                                <div className="column-text">{this.state.type == 0 ? '个人' : '组织'}</div>
                            </div>
                            <div>
                                <div className="column-title">用户等级</div>
                                <div className="column-text">Lv.{theData.level}</div>
                            </div>
                            <div>
                                <div className="column-title">所在地</div>
                                <div className="column-text">{getProvince(theData.province, theData.city, theData.area)}</div>
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <div className="column-title">专业领域</div>
                            <div className="column-text">{getTechField(this.state.type == 0 ? theData.engagedField.split(',') : theData.field.split(','))}</div>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <div className="column-title">能力标签</div>
                            <div className="column-text">
                                {theData.abilityLabel ? theData.abilityLabel.join(',').map((item) => {
                                    return <Tag key={item}>{item}</Tag>
                                }) : ''}
                            </div>
                        </Col>
                    </Row>
                </div >
            </Spin>
        )
    }
});

export default Content;