import React from 'react';
import { Input, Button, Form, Icon, Spin, message } from 'antd';
import './base.less';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import ChangePw from './changePassword.jsx';

const FormItem = Form.Item;

import weixin from '../../../../image/weixin-w.png';
import qq from '../../../../image/qq-w.png';
import weibo from '../../../../image/weibo-w.png';


const BaseFrom = Form.create()(React.createClass({
    getData() {
        this.props.spinState(true);
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/api/user/base",
            success: function (data) {
                if (data.data) {
                    this.setState({
                        id:data.data.id,
                        fixedTel: data.data.fixedTel,
                        firstContacts: data.data.firstContacts,
                        firstMobile: data.data.firstMobile,
                        secondContacts: data.data.secondContacts,
                        secondMobile: data.data.secondMobile,
                        thirdContacts: data.data.thirdContacts,
                        thirdMobile: data.data.thirdMobile,
                        qq: data.data.qq,
                        address: data.data.postalAddress,
                        postcode: data.data.postcode,
                        legalPerson: data.data.legalPerson,
                        email: data.data.email,
                    });
                };
            }.bind(this),
        }).done(function (data) {
            if (data.error.length) {
                message.warning(data.error[0].message);
            }
        }.bind(this)).always(function () {
            this.props.spinState(false);
        }.bind(this));
    },
    getInitialState() {
        return {
        };
    },
    componentWillMount() {
        this.getData();
    },
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                this.props.spinState(true);
                $.ajax({
                    method: "POST",
                    dataType: "json",
                    crossDomain: false,
                    url: globalConfig.context + "/api/user/orgIdentity",
                    data: {
                        "id":this.state.id,
                        "firstContacts": values.firstContacts,
                        "firstMobile": values.firstMobile,
                        "secondContacts": values.secondContacts,
                        "secondMobile": values.secondMobile,
                        "thirdContacts": values.thirdContacts,
                        "thirdMobile": values.thirdMobile,
                        "email": values.email,
                        "fixedTel": values.telephone,
                        "qq": values.qq,
                        "postalAddress": values.address,
                        "postcode": values.postcode,
                        "moblie": values.moblie,
                        "legalPerson": values.legalPerson
                    }
                }).done(function (data) {
                    if (!data.error.length) {
                        message.success('保存成功！');
                        this.getData();
                    } else {
                        message.warning(data.error[0].message);
                    }
                }.bind(this)).always(function () {
                    this.props.spinState(false);
                }.bind(this));
            }
        });
    },
    checkidNum(rule, value, callback) {
        const form = this.props.form;
        if (value && value !== form.getFieldValue('password')) {
            callback('Two passwords that you enter is inconsistent!');
        } else {
            callback();
        }
    },
    checkUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        if (!isJPG) {
            callback('You can only upload JPG file!');
        }
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
            callback('Image must smaller than 2MB!');
        }
        return isJPG && isLt2M;
    },
    checkPhone(rule, value, callback) {
        const form = this.props.form;
        if (value && value.length !== 0 && !(/^1[34578]\d{9}$/.test(value))) {
            callback('请输入正确的手机号码！');
        } else {
            callback();
        }
    },
    render() {

        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 12 },
        };
        return (
            <Form horizontal onSubmit={this.handleSubmit} className="base-form">
                <FormItem
                    {...formItemLayout}
                    label='第一联系人'
                >
                    {getFieldDecorator('firstContacts', {
                        initialValue: this.state.firstContacts,
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="手机号码"
                >
                    {getFieldDecorator('firstMobile', {
                        initialValue: this.state.firstMobile,
                        rules: [
                            {
                                validator: this.checkPhone
                            }],
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label='第二联系人'
                >
                    {getFieldDecorator('secondContacts', {
                        initialValue: this.state.secondContacts,
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="手机号码"
                >
                    {getFieldDecorator('secondMobile', {
                        initialValue: this.state.secondMobile,
                        rules: [
                            {
                                validator: this.checkPhone
                            }],
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label='第三联系人'
                >
                    {getFieldDecorator('thirdContacts', {
                        initialValue: this.state.thirdContacts,
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="手机号码"
                >
                    {getFieldDecorator('thirdMobile', {
                        initialValue: this.state.thirdMobile,
                        rules: [
                            {
                                validator: this.checkPhone
                            }],
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="电子邮箱"
                >
                    {getFieldDecorator('email', {
                        initialValue: this.state.email,
                        rules: [{
                            type: 'email', message: '请输入正确的邮箱地址!',
                        }],
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="固定电话"
                >
                    {getFieldDecorator('telephone', {
                        initialValue: this.state.fixedTel
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="QQ"
                >
                    {getFieldDecorator('qq', {
                        initialValue: this.state.qq
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="通讯地址"
                >
                    {getFieldDecorator('address', {
                        initialValue: this.state.address
                    })(
                        <Input />
                        )}
                </FormItem>
                <FormItem wrapperCol={{ span: 12, offset: 4 }}>
                    <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                </FormItem>
            </Form >
        );
    },
}));

// <FormItem
//     {...formItemLayout}
//     label="法人"
// >
//     {getFieldDecorator('legalPerson', {
//         initialValue: this.state.legalPerson
//     })(
//         <Input />
//         )}
// </FormItem>

const Base = React.createClass({
    getInitialState() {
        return {
            loading: false,
        };
    },
    spinChange(e) {
        this.setState({
            loading: e
        });
    },
    render() {
        return (
            <Spin spinning={this.state.loading} className='spin-box'>
                <div className="set-base">
                    <div className="acc-detail">
                        <p className="acc-title">您登录的账号</p>
                        <p>阿凡提号： <span>{userData.number}</span></p>
                        <p>认证状态： <span>{userData.lvl == '1' ? <span>已认证</span> : <span>未认证 <a href={globalConfig.context + '/user/groupCertify'}> 马上认证</a></span>}</span></p>
                        <div className="clearfix">
                            <ChangePw />
                        </div>
                    </div>
                    <div className="acc-bind" style={{ 'display': 'none' }}>
                        <p className="acc-title">绑定账号 <span>绑定后，可使用第三方账号直接登录阿凡提网</span></p>
                        <p>
                            <Button className="relateqq"><img src={qq} alt="" /> QQ账号登录</Button>
                            <Button className="relateweibo"><img src={weibo} alt="" />微博账号登录</Button>
                            <Button className="relateweixin"><img src={weixin} alt="" />微信账号登录</Button>
                        </p>
                    </div>
                    <div className="acc-info">
                        <p className="acc-title">请确认您的联系信息</p>
                        <BaseFrom spinState={this.spinChange} />
                    </div>
                </div>
            </Spin>
        )
    }
});

export default Base;