import React from 'react';
import { 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 { 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.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
                        });
                    };
                };
                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: 1,
            fieldFirstOption: [],
            fieldSecondOption: [],
            fieldThirdOption: [],
            pagination: {
                pageNo: 1,
                pageSize: 12,
                total: 0
            },
            dataSource: []
        };
    },
    componentWillMount() {
        let theFieldArr = [], theProvinceArr = [];
        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>
            )
        });
        provinceList.map((item) => {
            theProvinceArr.push(
                <Select.Option key={item.id}>{item.name}</Select.Option>
            )
        });
        this.state.fieldFirstOption = theFieldArr;
        this.state.provinceOption = theProvinceArr;

        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();
    },
    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-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="user-detail" onClick={() => { _me.tableRowClick(item); }}>
                                    <div className="logo">
                                        <img src={item.logoUrl ?
                                            (globalConfig.avatarHost + "/upload" + item.logoUrl)
                                            : avatarImg} alt="头像" />
                                    </div>
                                    <div className="name">
                                        {item.unitName}
                                    </div>
                                    <div className="province">
                                        <span style={{ letterSpacing: '27px' }}>地</span>
                                        <span>区: </span>
                                        <span className="text-address"> {getProvince(item.province)}</span>
                                    </div>
                                    <div className="text">
                                        <span style={{ letterSpacing: '27px' }}>需</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;


                    // <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>