import React from 'react';
import { Icon, Button, Input, Select, Spin, message, Col, Row } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import './userList.less';

const CustomerSearch = React.createClass({
    loadData(pageNo) {
        this.setState({
            loading: true
        });
        $.ajax({
            method: "get",
            dataType: "json",
            crossDomain: false,
            url: globalConfig.context + "/api/admin/supervise/findUser",
            data: {
                "name": this.state.searchName || undefined,
                "mobile": this.state.searchMobile || undefined,
                "type": Number(this.state.searchType)
            },
            success: function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                }
                this.setState({
                    searchResult: data.data ? <span><Icon type="check-circle" style={{ color: '#58a3ff' }} /> 名称为[ {data.data} ]的 {Number(this.state.searchType) ? '[团体]' : '[个人]'} 用户存在</span>
                        : <span> <Icon type="close-circle" style={{ color: '#ea0862' }} /> 未查找到该用户!</span>
                })
            }.bind(this),
        }).always(function () {
            this.setState({
                loading: false
            });
        }.bind(this));
    },
    getInitialState() {
        return {
            loading: false,
            searchType: '0'
        };
    },
    search() {
        this.loadData();
    },
    render() {
        return (
            <div className="user-content" >
                <div className="content-title">
                    <span>客户查询</span>
                </div>
                <Row>
                    <Col span={2}>
                        <span>用户名称</span>
                    </Col>
                    <Col span={5}>
                        <Input placeholder="请输入用户全称"
                            value={this.state.searchName}
                            onChange={(e) => { this.setState({ searchName: e.target.value }) }} />
                    </Col>
                    <Col span={1}></Col>
                    <Col span={2}>
                        <span>用户登录名</span>
                    </Col>
                    <Col span={5}>
                        <Input placeholder="请输入手机号"
                            value={this.state.searchMobile}
                            onChange={(e) => { this.setState({ searchMobile: e.target.value }) }} />
                    </Col>
                    <Col span={1}></Col>
                    <Col span={2}>
                        <Select
                            value={this.state.searchType}
                            onChange={(e) => { this.setState({ searchType: e }) }} >
                            <Select.Option value="0">个人用户</Select.Option>
                            <Select.Option value="1">组织用户</Select.Option>
                        </Select>
                    </Col>
                    <Col span={2}>
                        <Button type="primary" onClick={this.search}>搜索</Button>
                    </Col>
                </Row>
                <Row>
                    <Col span={2}>
                        <span>查询结果</span>
                    </Col>
                    <Col>
                        {this.state.searchResult}
                    </Col>
                </Row>
            </div >
        );
    }
});

export default CustomerSearch;