import React from 'react';
import { Icon, message, Row, Col, Radio, Input, Button, Table, Spin, Pagination } from 'antd';
import '../portal.less';

import logoImg from 'img/logo.png';
import searchImg from 'img/search.png';

import { techFieldList, getTechField } from '@/DicTechFieldList';
import { getProvince } from '@/NewDicProvinceList';
import { companySearch } from '@/tools';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';


import avatarImg from 'img/avatarImg.png';

const SubContent = React.createClass({
    loadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/portal/search/subscriberList",
            data: {
                "level": this.state.level, //认证状态 (0--未认证,1--认证)
                "type": this.state.type, //用户类型 (0--个人用户,1--组织用户)
                "field": this.state.firstField ? ((this.state.firstField || '') + (this.state.secondField ? (',' + this.state.secondField) : '') + (this.state.thirdField ? (',' + this.state.thirdField) : '')) : null,
                "province": this.state.province,
                "city": this.state.city,
                "area": this.state.area,
                "name": this.state.searchName,
                "pageNo": pageNo || 1,
                "pageSize": this.state.pagination.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,
                            uid: thisdata.uid, //用户ID
                            identityId: thisdata.identityId,  //认证ID (详情接口传入ID)
                            username: thisdata.username,// 用户名称
                            unitName: thisdata.unitName,
                            type: this.state.type,
                            personPortraitUrl: thisdata.personPortraitUrl,//用户头像URL
                            logoUrl: thisdata.logoUrl,
                            achievementNum: thisdata.achievementNum,	//科技成果数量
                            demandNum: thisdata.demandNum, //科技需求数量
                            province: thisdata.province,
                            engagedField: thisdata.engagedField ? thisdata.engagedField.split(',') : [],
                            workUnit: thisdata.workUnit,
                            position: thisdata.position
                        });
                    };
                };
                this.state.pagination.pageNo = data.data.pageNo;
                this.state.pagination.total = data.data.totalCount;
                this.setState({
                    dataSource: theArr,
                    pagination: this.state.pagination
                });
            }.bind(this),
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            };
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            type: 0,
            fieldFirstOption: [],
            fieldSecondOption: [],
            fieldThirdOption: [],
            pagination: {
                pageNo: 1,
                pageSize: 12,
                total: 0
            },
            dataSource: []
        };
    },
    componentWillMount() {
        let theFieldArr = [];
        theFieldArr.push(
            <Radio.Button key={999} value={999}>不限</Radio.Button>
        );
        techFieldList.map((item) => {
            theFieldArr.push(
                <Radio.Button value={item.value} key={item.value}>{item.label}</Radio.Button>
            )
        });
        this.state.fieldFirstOption = theFieldArr;

        if (window.location.search) {
            let theUrl = window.location.search
            this.state.searchName = theUrl.substring(1, theUrl.length);
            this.state.searchName = decodeURIComponent(this.state.searchName);
        };
        this.loadData();
    },
    fieldFirstChange(e) {
        let theArr = [];
        if (e.target.value !== 999) {
            theArr.push(
                <Radio.Button key={999} value={999}>不限</Radio.Button>
            );
            techFieldList.map((item) => {
                if (item.value == e.target.value) {
                    item.children.map((children) => {
                        theArr.push(
                            <Radio.Button value={children.value} key={children.value}>{children.label}</Radio.Button>
                        )
                    });
                }
            });
            this.state.firstField = e.target.value;
        } else {
            this.state.firstField = null;
        };
        this.state.secondField = null;
        this.state.thirdField = null;
        this.setState({
            fieldSecondOption: theArr,
            fieldThirdOption: []
        });
        this.loadData();
    },
    fieldSecondChange(e) {
        let theArr = [], _me = this;
        if (e.target.value !== 999) {
            theArr.push(
                <Radio.Button key={999} value={999}>不限</Radio.Button>
            );
            techFieldList.map((item) => {
                if (item.value == _me.state.firstField) {
                    item.children.map((children) => {
                        if (children.value == e.target.value) {
                            children.children.map((third) => {
                                theArr.push(
                                    <Radio.Button value={third.value} key={third.value}>{third.label}</Radio.Button>
                                )
                            })
                        }
                    });
                }
            });
            this.state.secondField = e.target.value;
        } else {
            this.state.secondField = null;
            this.state.thirdField = null;
        };
        this.setState({
            fieldThirdOption: theArr
        });
        this.loadData();
    },
    tableRowClick(record, index) {
        window.open(globalConfig.context + '/user/subscriberDetail.html?rid=' + record.uid + '&type=' + record.type);
    },
    render() {
        const { pageNo, pageSize, total } = this.state.pagination;
        const _me = this;
        return (
            <div className="portal-body">
                <div className="portal-content clearfix" >
                    <Row className="search-criteria">
                        <Col className="search-title" span={2}>
                            <span>行业分类</span>
                        </Col>
                        <Col className="search-select" span={22}>
                            <Radio.Group defaultValue={999} onChange={this.fieldFirstChange}>
                                {this.state.fieldFirstOption}
                            </Radio.Group>
                        </Col>
                    </Row>
                    {this.state.fieldSecondOption.length > 1 ? <Row className="search-criteria">
                        <Col className="search-title" span={2}>
                            <span>行业二级分类</span>
                        </Col>
                        <Col className="search-select" span={22}>
                            <Radio.Group defaultValue={999} onChange={this.fieldSecondChange}>
                                {this.state.fieldSecondOption}
                            </Radio.Group>
                        </Col>
                    </Row> : <div></div>}
                    {this.state.fieldThirdOption.length > 1 ? <Row className="search-criteria">
                        <Col className="search-title" span={2}>
                            <span>行业三级分类</span>
                        </Col>
                        <Col className="search-select" span={22}>
                            <Radio.Group defaultValue={999} onChange={(e) => {
                                if (e.target.value !== 999) {
                                    this.state.thirdField = e.target.value;
                                } else {
                                    this.state.thirdField = null;
                                }
                                this.loadData()
                            }}>
                                {this.state.fieldThirdOption}
                            </Radio.Group>
                        </Col>
                    </Row> : <div></div>}
                    <Row className="search-criteria">
                        <Col className="search-title" span={2}>
                            <span>行家名称</span>
                        </Col>
                        <Col span={6}>
                            <div className="nav-search" style={{ float: 'none', marginBottom: '10px' }}>
                                <Input value={this.state.searchName} onChange={(e) => { this.setState({ searchName: e.target.value }); }} />
                                <Button onClick={() => { this.loadData() }}>
                                    <img src={searchImg} alt="" />
                                </Button>
                            </div>
                        </Col>
                    </Row>
                    <Spin spinning={this.state.loading}>
                        <ul className="clearfix">
                            {this.state.dataSource.map((item, i) => {
                                return <li key={i} className="org-detail clearfix" onClick={() => { _me.tableRowClick(item); }}>
                                    <div className="logo">
                                        <img src={item.personPortraitUrl ?
                                            (globalConfig.avatarHost + "/upload" + (item.personPortraitUrl))
                                            : avatarImg} alt="头像" />
                                    </div>
                                    <div className="detail-right">
                                        <div className="name">
                                            {item.username || 'UserName'}
                                        </div>
                                        <div className="text" style={{ fontSize: '14px' }}>
                                            {item.workUnit || '单位'}
                                        </div>
                                        <div className="text" style={{ fontSize: '14px' }}>
                                            {item.position || '职位'}
                                        </div>
                                        <div className="text" style={{ fontSize: '12px' }}>
                                            {getTechField(item.engagedField[0], item.engagedField[1], item.engagedField[2])}
                                        </div>
                                        <div className="detail-text">
                                            <div className="text">
                                                <span style={{ letterSpacing: '32px' }}>需</span>
                                                <span>求: </span>
                                                <span className="text-Number"> {item.demandNum || 0} </span>
                                                <span className="text-unit"> 条</span>
                                            </div>
                                            <div className="text">
                                                <span>技术成果: </span>
                                                <span className="text-Number"> {item.achievementNum || 0} </span>
                                                <span className="text-unit"> 条</span>
                                            </div>
                                            <div className="text">
                                                <span style={{ letterSpacing: '32px' }}>粉</span>
                                                <span>丝: </span>
                                                <span className="text-Number"> {0}</span>
                                                <span className="text-unit"> 位</span>
                                            </div>
                                        </div>
                                    </div>
                                </li>
                            })}
                        </ul>
                        <Pagination style={{ float: 'right' }}
                            onChange={(e) => { this.loadData(e); }}
                            total={total}
                            showTotal={() => { return '共' + total + '条数据' }}
                            current={pageNo}
                            pageSize={pageSize} />
                    </Spin>
                </div>
            </div>
        )
    }
});

export default SubContent;