import React from 'react';
import { Icon, message, Row, Col, Spin, Tag, Table } from 'antd';
import './detail.less';
import { getSearchUrl, getAchievementCategory, getDemandType } 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.state.theField = this.state.type == 0 ? (data.data.engagedField ? data.data.engagedField.split(',') : []) : (data.data.field ? data.data.field.split(',') : []);
                this.state.theImgsrc = this.state.type == 0 ? (data.data.lifePhotoUrl ? data.data.lifePhotoUrl.split(',') : []) : (data.data.publicityPictureUrl ? data.data.publicityPictureUrl.split(',') : []);
            }
            this.setState({
                data: this.state.data,
                theField: this.state.theField,
                theImgsrc: this.state.theImgsrc,
                loading: false
            });
        }.bind(this));
    },
    achievementLoadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/partner/achievementList",
            data: {
                ownerId: this.state.uid,
                pageNo: pageNo || 1,
                pageSize: this.state.achievementPagination.pageSize
            },
            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,
                            id: thisdata.id,
                            serialNumber: thisdata.serialNumber,
                            dataCategory: thisdata.dataCategory,
                            name: thisdata.name,
                            keyword: thisdata.keyword,
                            category: thisdata.category,
                            ownerType: thisdata.ownerType,
                            releaseDate: thisdata.releaseDate,
                            releaseDateFormattedDate: thisdata.releaseDateFormattedDate,
                        });
                    };
                }
                this.state.achievementPagination.current = data.data.pageNo;
                this.state.achievementPagination.total = data.data.totalCount;
                this.setState({
                    achievementDataSource: theArr,
                    achievementPagination: this.state.achievementPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    demandLoadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/user/partner/demandList",
            data: {
                employerId: this.state.uid,
                pageNo: pageNo || 1,
                pageSize: this.state.demandPagination.pageSize
            },
            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,
                            id: thisdata.id,
                            serialNumber: thisdata.serialNumber,
                            dataCategory: thisdata.dataCategory,
                            name: thisdata.name,
                            keyword: thisdata.keyword,
                            releaseDate: thisdata.releaseDate,
                            demandType: thisdata.demandType,
                            validityPeriod: thisdata.validityPeriod,
                            validityPeriodFormattedDate: thisdata.validityPeriodFormattedDate,
                            releaseDateFormattedDate: thisdata.releaseDateFormattedDate
                        });
                    };
                }
                this.state.demandPagination.current = data.data.pageNo;
                this.state.demandPagination.total = data.data.totalCount;
                this.setState({
                    demandDataSource: theArr,
                    demandPagination: this.state.demandPagination
                });
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    interestClick() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/user/interest/interestUser',
            data: {
                toUid: this.state.uid
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    this.loadData();
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));;
    },
    cancelInterestClick() {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "post",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + '/api/user/interest/cancelInterest',
            data: {
                id: this.state.data.interestId
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    this.loadData(this.props.data.id);
                };
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));;
    },
    getInitialState() {
        return {
            loading: false,
            theField: [],
            data: {},
            theImgsrc: [],
            achievementPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.achievementLoadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
            achievementColumns: [
                {
                    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: 'releaseDateFormattedDate',
                    key: 'releaseDateFormattedDate',
                }
            ],
            achievementDataSource: [],
            demandColumns: [
                {
                    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>;
                        }
                    }
                }, {
                    title: '类型',
                    dataIndex: 'demandType',
                    key: 'demandType',
                    render: text => { return getDemandType(text); }
                }, {
                    title: '发布时间',
                    dataIndex: 'releaseDateFormattedDate',
                    key: 'releaseDateFormattedDate',
                }
            ],
            demandDataSource: [],
            demandPagination: {
                defaultCurrent: 1,
                defaultPageSize: 10,
                showQuickJumper: true,
                pageSize: 10,
                onChange: function (page) {
                    this.demandLoadData(page);
                }.bind(this),
                showTotal: function (total) {
                    return '共' + total + '条数据';
                }
            },
        };
    },
    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();
                this.achievementLoadData();
                this.demandLoadData();
            };
        };
    },
    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>
                            <div className="interest">
                                {theData.interestId ? <a onClick={this.cancelInterestClick}><Icon type="heart" /> 不感兴趣</a>
                                    : <a onClick={this.interestClick}><Icon type="heart-o" /> 感兴趣</a>}
                            </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.theField[0], this.state.theField[1], this.state.theField[2])}</div>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <div className="column-title">能力标签</div>
                            <div className="column-text">
                                {theData.abilityLabel ? theData.abilityLabel.split(',').map((item) => {
                                    return <Tag key={item}>{item}</Tag>
                                }) : ''}
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <div className="column-title">用户介绍</div>
                            <div className="column-text">
                                {this.state.type == 0 ? theData.personalProfile : theData.companyIntroduction}
                            </div>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <div className="column-title">用户展示</div>
                            <div className="column-img">
                                {this.state.theImgsrc.map((item, i) => {
                                    return <img key={i} src={globalConfig.avatarHost + "/upload" + item} alt="" />
                                })}
                            </div>
                        </Col>
                    </Row>
                </div>
                <div className="detail-content detail-table">
                    <p>用户成果列表</p>
                    <Table columns={this.state.achievementColumns}
                        dataSource={this.state.achievementDataSource}
                        pagination={this.state.achievementPagination} />
                    <p>用户需求列表</p>
                    <Table columns={this.state.demandColumns}
                        dataSource={this.state.demandDataSource}
                        pagination={this.state.demandPagination} />
                </div>
            </Spin>
        )
    }
});

export default Content;