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

import logoImg from '../../../../image/logo.png';
import searchImg from '../../../../image/search.png';
import slideImg from '../../../../image/slide_img_1.png';

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 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.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
                        });
                    };
                };
                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.state.firstField = e;
        this.state.secondField = undefined;
        this.state.thirdField = undefined;
        this.setState({
            fieldSecondOption: theArr,
            firstField: e,
            secondField: undefined,
            thirdField: undefined
        });
        this.loadData();
    },
    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.state.secondField = e;
        this.state.thirdField = undefined;
        this.setState({
            fieldThirdOption: theArr,
            secondField: e,
            thirdField: undefined
        });
        this.loadData();
    },
    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.state.province = e;
        this.state.city = undefined;
        this.state.area = undefined;
        this.setState({
            cityOption: theArr,
            province: e,
            city: undefined,
            area: undefined
        });
        this.loadData();
    },
    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.state.city = e;
        this.state.area = undefined;
        this.setState({
            areaOption: theArr,
            city: e,
            area: undefined
        });
        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-nav clearfix">
                    <div className="nav-logoBox">
                        <img src={logoImg} alt="" />
                    </div>
                    <ul className="nav-list clearfix">
                        <li className={this.props.searchType == 'achievement' ? 'active' : ''}><a href={"/portal/search/achievement.html"}>科技成果</a></li>
                        <li className={this.props.searchType == 'demand' ? 'active' : ''}><a href={"/portal/search/demand.html"}>科技需求</a></li>
                        <li className={this.props.searchType == 'subscriber' ? 'active' : ''}><a href={"/portal/search/subscriber.html"}>伙伴/行家</a></li>
                    </ul>
                    <div className="nav-search">
                        <Input onChange={(e) => { this.state.searchName = e.target.value; }} />
                        <Button onClick={() => { this.loadData() }}>
                            <img src={searchImg} alt="" />
                        </Button>
                    </div>
                </div>
                <Carousel autoplay className="portal-carousel">
                    <div className="slide-box"><img src={slideImg} alt="" /></div>
                    <div className="slide-box"><img src={slideImg} alt="" /></div>
                    <div className="slide-box"><img src={slideImg} alt="" /></div>
                    <div className="slide-box"><img src={slideImg} alt="" /></div>
                </Carousel>
                <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.state.thirdField = e;
                                    this.setState({ thirdField: e });
                                    this.loadData();
                                }}>
                                {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.state.area = e;
                                    this.setState({ area: e });
                                    this.loadData();
                                }}>
                                {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>
                    <Spin spinning={this.state.loading}>
                        <ul className="clearfix">
                            {this.state.dataSource.map((item, i) => {
                                return <li key={i} className="user-detail" onClick={() => { _me.tableRowClick(item); }}>
                                    <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">
                                        {_me.state.type == 0 ? item.username : item.unitName}
                                    </div>
                                    <div className="province">
                                        <span style={{ letterSpacing: '32px' }}>地</span>
                                        <span>区: </span>
                                        <span className="address"> {getProvince(item.province)}</span>
                                    </div>
                                    <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>
                                </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;