import React from 'react';
import { Input, Button, Select, Form, Radio, Upload, Icon, DatePicker, Spin } from 'antd';
import './base.less';

const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

const edulvlArr = ["高中", "大专", "本科", "硕士研究生", "博士研究生"];

import weixin from '../../../../image/weixin-w.png';
import qq from '../../../../image/qq-w.png';
import weibo from '../../../../image/weibo-w.png';
import card1 from '../../../../image/idcard1.jpg';
import card2 from '../../../../image/idcard2.jpg';


const BaseFrom = Form.create()(React.createClass({
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    },

    normFile(e) {
        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    },

    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;
    },
    render() {

        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 3 },
            wrapperCol: { span: 12 },
        };
        return (
            <Form horizontal onSubmit={this.handleSubmit} className="base-form">
                <FormItem
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 8 }}
                    label="学历"
                    >
                    {getFieldDecorator('edulvl', {
                        rules: [{
                            required: true, message: '请选择您的学历！',
                        }],
                    })(
                        <Select className="acc-edu-lvl">
                            {
                                edulvlArr.map(function (item, i) {
                                    return <Option key={i} value={item} >{item}</Option>
                                })
                            }
                        </Select>
                        )}
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="出生日期"
                    >
                    {getFieldDecorator('birth', {
                        rules: [{ type: 'object', required: true, message: '请选择日期!' }],
                    })(
                        <DatePicker />
                        )}
                </FormItem>

                <FormItem wrapperCol={{ span: 21, offset: 3 }}>
                    <p>请上传清晰的个人身份证正反面原件照片/扫描件 （不能截图、图片内容要求完整 ），</p>
                    <p>要求2M 以下的jpg、jpeg、gif、png格式的图片。该资料不会公开展示，仅作为审核材料使用。</p>
                </FormItem>
                <FormItem
                    {...formItemLayout}
                    label="身份证"
                    >
                    {getFieldDecorator('upload', {
                        rules: [{
                            required: true, message: '请上传身份证照片!',
                        }, {
                            validator: this.checkUpload,
                        }],
                        valuePropName: 'fileList',
                        normalize: this.normFile,
                    })(
                        <Upload name="idcard" action="/upload.do" listType="picture" onChange={this.handleUpload}>
                            <Button type="ghost">
                                <Icon type="upload" /> 点击选择文件
                            </Button>
                        </Upload>
                        )}
                </FormItem>
                <FormItem wrapperCol={{ span: 21, offset: 3 }}>
                    <p className="acc-title">示例：</p>
                    <div className="idcard-img clearfix">
                        <div>
                            <div className="idcard-imgbox">
                                <img src={card1} alt="" />
                            </div>
                        </div>
                        <div>
                            <div className="idcard-imgbox">
                                <img src={card2} alt="" />
                            </div>
                        </div>
                    </div>
                </FormItem>
                <FormItem wrapperCol={{ span: 12, offset: 3 }}>
                    <Button className="set-submit" type="primary" htmlType="submit">保存</Button>
                </FormItem>
            </Form >
        );
    },
}));

const Base = React.createClass({
    getInitialState() {
        return {
            loading: false,
            userid: '1234567',
            userphone: '13512345678'
        };
    },
    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>{this.state.userid}</span></p>
                        <p>登录手机号： <span>{this.state.userphone}</span></p>
                        <div>
                            <Button type="ghost">更换手机</Button>
                            <Button type="primary">修改密码</Button>
                        </div>
                    </div>
                    <div className="acc-bind">
                        <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">身份信息 <span>提供正确的身份信息，有助于进行身份验证，提升信用形象</span></p>
                        <BaseFrom />
                    </div>
                </div>
            </Spin>
        )
    }
});

export default Base;