import React from 'react';
import { Icon, message, Row, Col, Select, Radio, Checkbox, Input, InputNumber, Button, Table, Spin, Pagination } from 'antd';
import '../portal.less';
import { techFieldList, getTechField } from '../../DicTechFieldList';
import { provinceList, getProvince } from '../../NewDicProvinceList';
import { companySearch } from '../../tools';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';


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

const Content = 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.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,
                            personPortraitUrl: thisdata.personPortraitUrl,//用户头像URL
                            logoUrl: thisdata.logoUrl,
                            achievementNum: thisdata.achievementNum,	//科技成果数量
                            demandNum: thisdata.demandNum, //科技需求数量
                            province: thisdata.province
                        });
                    };
                };
                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,
            pagination: {
                pageNo: 1,
                pageSize: 15,
                total: 0
            },
            dataSource: []
        };
    },
    componentWillMount() {
        let theFieldArr = [], theProvinceArr = [];
        techFieldList.map((item) => {
            theFieldArr.push(
                <Select.Option key={item.value}>{item.label}</Select.Option>
            )
        });
        provinceList.map((item) => {
            theProvinceArr.push(
                <Select.Option key={item.id}>{item.name}</Select.Option>
            )
        });
        this.state.fieldFirstOption = theFieldArr;
        this.state.provinceOption = theProvinceArr;
        this.loadData();
    },
    fieldFirstChange(e) {
        let theArr = [];
        techFieldList.map((item) => {
            if (item.value == e) {
                item.children.map((children) => {
                    theArr.push(
                        <Select.Option key={children.value}>{children.label}</Select.Option>
                    )
                });
            }
        });
        this.setState({
            fieldSecondOption: theArr,
            firstField: e,
            secondField: undefined,
            thirdField: undefined
        })
    },
    fieldSecondChange(e) {
        let theArr = [], _me = this;
        techFieldList.map((item) => {
            if (item.value == _me.state.firstField) {
                item.children.map((children) => {
                    if (children.value == e) {
                        children.children.map((third) => {
                            theArr.push(
                                <Select.Option key={third.value}>{third.label}</Select.Option>
                            )
                        })
                    }
                });
            }
        });
        this.setState({
            fieldThirdOption: theArr,
            secondField: e,
            thirdField: undefined
        })
    },
    provinceChange(e) {
        let theArr = [];
        provinceList.map((item) => {
            if (item.id == e) {
                item.cityList.map((city) => {
                    theArr.push(
                        <Select.Option key={city.id}>{city.name}</Select.Option>
                    )
                });
            }
        });
        this.setState({
            cityOption: theArr,
            province: e,
            city: undefined,
            area: undefined
        })
    },
    cityChange(e) {
        let theArr = [], _me = this;
        provinceList.map((item) => {
            if (item.id == _me.state.province) {
                item.cityList.map((city) => {
                    if (city.id == e) {
                        city.areaList.map((area) => {
                            theArr.push(
                                <Select.Option key={area.id}>{area.name}</Select.Option>
                            )
                        });
                    };
                });
            };
        });
        this.setState({
            areaOption: theArr,
            city: e,
            area: undefined
        })
    },
    tableRowClick(record, index) {
        this.state.RowData = record;
    },
    interest(e) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "POST",
            dataType: "json",
            url: globalConfig.context + "/api/user/interest/interestUser",
            data: {
                toUid: e
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            };
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    cancelInterest(e) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "POST",
            dataType: "json",
            url: globalConfig.context + "/api/user/interest/cancelInterest",
            data: {
                interestId: e
            }
        }).done(function (data) {
            if (data.error && data.error.length) {
                message.warning(data.error[0].message);
            };
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    render() {
        const { pageNo, pageSize, total } = this.state.pagination;
        const _me = this;
        return (
            <div className="portal-content clearfix" >
                <Row className="search-criteria">
                    <Col className="search-title" span={2}>
                        <span>行业分类</span>
                    </Col>
                    <Col className="search-select" span={22}>
                        <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
                            value={this.state.firstField}
                            placeholder="请选择行业一级分类"
                            notFoundContent="未获取到行业分类"
                            showSearch
                            filterOption={companySearch}
                            onChange={this.fieldFirstChange}>
                            {this.state.fieldFirstOption}
                        </Select>
                        <Select style={{ width: 200, marginRight: '10px', marginBottom: '10px' }}
                            value={this.state.secondField}
                            placeholder="请选择行业二级分类"
                            notFoundContent="未获取到行业分类"
                            showSearch
                            filterOption={companySearch}
                            onChange={this.fieldSecondChange}>
                            {this.state.fieldSecondOption}
                        </Select>
                        <Select style={{ width: 240, marginRight: '10px', marginBottom: '10px' }}
                            value={this.state.thirdField}
                            placeholder="请选择行业三级分类"
                            notFoundContent="未获取到行业分类"
                            showSearch
                            filterOption={companySearch}
                            onChange={(e) => { this.setState({ thirdField: e }) }}>
                            {this.state.fieldThirdOption}
                        </Select>
                        <Button type="ghost" style={{ marginLeft: '20px' }}
                            onClick={() => {
                                this.setState({
                                    firstField: undefined,
                                    secondField: undefined,
                                    thirdField: undefined
                                });
                                this.state.firstField = undefined;
                                this.state.secondField = undefined;
                                this.state.thirdField = undefined;
                                this.loadData();
                            }}>不限</Button>
                    </Col>
                </Row>
                <Row className="search-criteria">
                    <Col className="search-title" span={2}>
                        <span>地区</span>
                    </Col>
                    <Col className="search-select" span={22}>
                        <Select style={{ width: 100, marginRight: '10px', marginBottom: '10px' }}
                            value={this.state.province}
                            placeholder="请选择省份"
                            notFoundContent="未获取到省份列表"
                            showSearch
                            filterOption={companySearch}
                            onChange={this.provinceChange}>
                            {this.state.provinceOption}
                        </Select>
                        <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
                            value={this.state.city}
                            placeholder="请选择行业城市"
                            notFoundContent="未获取到城市列表"
                            showSearch
                            filterOption={companySearch}
                            onChange={this.cityChange}>
                            {this.state.cityOption}
                        </Select>
                        <Select style={{ width: 160, marginRight: '10px', marginBottom: '10px' }}
                            value={this.state.area}
                            placeholder="请选择行政区"
                            notFoundContent="未获取到行政区列表"
                            showSearch
                            filterOption={companySearch}
                            onChange={(e) => { this.setState({ area: e }) }}>
                            {this.state.areaOption}
                        </Select>
                        <Button type="ghost" style={{ marginLeft: '20px' }}
                            onClick={() => {
                                this.setState({
                                    province: undefined,
                                    city: undefined,
                                    area: undefined
                                });
                                this.state.province = undefined;
                                this.state.city = undefined;
                                this.state.area = undefined;
                                this.loadData();
                            }}>不限</Button>
                    </Col>
                </Row>
                <Row className="search-criteria">
                    <Col className="search-title" span={2}>
                        <span>用户类型</span>
                    </Col>
                    <Col className="search-select" span={6}>
                        <Radio.Group defaultValue={0} onChange={(e) => {
                            this.setState({
                                type: e.target.value
                            });
                            this.state.type = e.target.value;
                            this.loadData();
                        }}>
                            <Radio.Button value={0}>个人</Radio.Button>
                            <Radio.Button value={1}>组织</Radio.Button>
                        </Radio.Group>
                    </Col>
                </Row>
                <Row className="search-criteria">
                    <Col className="search-title" span={2}>
                        <span>用户名</span>
                    </Col>
                    <Col className="search-select" span={6}>
                        <Input style={{ width: 200, marginBottom: '10px' }} value={this.state.searchName} onChange={(e) => { this.setState({ searchName: e.target.value }) }} />
                        <Button type="primary" style={{ marginLeft: '20px' }}
                            onClick={() => { this.loadData(); }}>搜索</Button>
                    </Col>
                </Row>
                <Spin spinning={this.state.loading}>
                    <ul className="clearfix">
                        {this.state.dataSource.map((item) => {
                            return <li className="user-detail">
                                <div className="logo">
                                    <img src={(item.personPortraitUrl || item.logoUrl) ?
                                        (globalConfig.avatarHost + "/upload" + (_me.state.type == 0 ? item.personPortraitUrl : item.logoUrl))
                                        : avatarImg } alt="头像" />
                                </div>
                                <div className="name" style={{display:'none'}}>
                                    {_me.state.type == 0 ? item.username : item.unitName}
                                    <a onClick={_me.interest.bind(_me, item.uid)} className="follow"><Icon type="heart-o" />感兴趣</a>
                                </div>
                                <div className="province">{getProvince(item.province)}</div>
                                <div className="text">{'需求：' + item.demandNum + '条'}</div>
                                <div className="text">{'技术成果：' + item.achievementNum + '条'}</div>
                            </li>
                        })}
                    </ul>
                    <Pagination style={{ float: 'right' }}
                        onChange={(e) => { this.loadData(e); }}
                        total={total}
                        showTotal={() => { return '共' + total + '条数据' }}
                        current={pageNo}
                        pageSize={pageSize} />
                </Spin>
            </div >
        )
    }
});

export default Content;