// 注册账号
import React from 'react';
import {
    Form, Carousel, Input, Button, Row, Col, Steps, Select, DatePicker, ConfigProvider, Icon, message
} from 'antd';
import '../../assets/css/login.css'
import { $http } from '../../containers/config/https';
import { Aes, Keup } from '../../tools/index';
import moment from 'moment';
import logoDefImg from 'assets/images/pr-login-logo.png';
import zhCN from 'antd/es/locale/zh_CN'; //中文
// import enUS from 'antd/es/locale/en_US'; //英文
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const Option = Select.Option;
const Step = Steps.Step;

const formItemLayout = {    // label 和input宽度
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};

class Register extends React.Component {
    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            userData,
            current: 0,
            birthdateWidth: 0,   //日期额外弹框的宽度动态设置
            logintext: '基本资料',
            displayBtn: {
                display_prev: 'none',
                display_next: 'block',
                display_register: 'none',
            },
            //注册页面初始值
            sexData: [], // 性别集合
            credtypeData: [], // 证件类型集合
            languageData: [], // 语言集合
            hospitalData: [], // 医院集合
            groupData: [], // 岗位集合
            experiseData: [], // 专长集合
            titleData: [], // 职称集合
            DeptDrData: [{ id: 0, descripts: "" }], // 科室集合
            openSelect1: false,  //展开select
            openSelect2: false,  //展开select
            openSelect5: false,  //展开select
            openSelect6: false,  //展开select
            openSelect7: false,  //展开select
            openSelect8: false,  //展开select
            contentH: '',  //content高度
            languageCode: 'CN',// 国际化标识
            languageData2: {}, // 国际化语言包
            language: {},   // 国际化语言
            effectTime: '',  //验证码有效时间
            hospID: '',     //医院ID
            mobile: '',     //手机号码
            count: 60,
            liked: true,
            userInfoData: [],
            locale: zhCN
        }
    }

    componentDidMount() {
        Keup.UnTab(["title", "post", "passWord2"]);   //禁用组件tab脚本 UnTab([id1,id2,id3])

        this.contentHeight();   // 获取content的高度
        // this.getRouterData();

        let birthdateWidth = document.getElementById('birthdate').getBoundingClientRect().width
        this.setState({
            birthdateWidth: birthdateWidth
        })
        // 加载注册页面初始值
        let data = {
            "params": []
        };
        $http.post('urlDeault', this, {
            code: "1007",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        sexData: res.sex, // 性别集合
                        languageData: res.language, // 语言集合
                        hospitalData: res.hospital, // 医院集合
                        groupData: res.post, // 角色集合
                        experiseData: res.experise, // 专长集合
                        credtypeData: res.credtype, // 证件类型集合
                        titleData: res.title, // 职称集合
                    })
                }
            }
        });
        this.CNEN() // 国际化
        this.getLogo()
    }
    getLogo = () => {
        var data = {
            params: [{
                fileName: "logo.png"
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040214",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let imgUrl = ''
                    if (res.result) {
                        imgUrl = `${res.result}`
                    }
                    this.setState({
                        imgUrl: imgUrl && imgUrl || logoDefImg
                    })
                } else {
                    this.setState({
                        imgUrl: logoDefImg
                    })
                }
            }, error: function (res) {
                this.setState({
                    imgUrl: logoDefImg
                })
            }
        });
    }
    changeLocale = e => {
        if (e === "CN") {
            moment.locale('zh-cn');
        } else {
            moment.locale('en');

        }
    };

    //点击切换中英文
    handleLanguage = (languageCode) => {
        this.setState({
            languageCode: languageCode === "CN" ? "EN" : "CN",
        }, () => {
            this.LanCNEN(this.state.languageCode)
            this.changeLocale(this.state.languageCode)
        })
    }

    // 国际化
    CNEN = () => {
        var data = {
            params: [{
                "reactCode": ['Register'],
                "compontName": "Register",
                "type": "C"
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040073",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        languageData2: res.result.language || {},  // 国际化语言包
                    }, () => {
                        this.LanCNEN(this.state.languageCode)
                    })
                }
            }
        });
    }

    LanCNEN = (code) => {
        let { languageData2 } = this.state
        this.setState({
            language: languageData2[code]
        })
    }

    // 获取路由数据
    getRouterData() {
        let user = window.sessionStorage.userData ? JSON.parse(window.sessionStorage.userData) : {};
        let data = {
            params: [{
                // 角色ID：groupDr
                GroupDr: +user.groupID,
                // 菜单类型
                Type: user ? +user.defaultMenuType : 2,
                // 科室id
                LocDr: +user.locID
            }]
        }
        $http.post('urlDeault', this, {
            code: '3002',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({ RouterData: res.result });
                } else {
                    this.setState({ RouterData: [] });
                }
            }
        })
    }

    getBirthdayFromIdCard = (event) => {
        var birthday = "";
        var idCard = event.target.value;

        if (idCard != null && idCard != "") {
            if (idCard.length == 15) {
                birthday = "19" + idCard.substr(6, 6);
            } else if (idCard.length == 18) {
                birthday = idCard.substr(6, 8);
            }
            birthday = birthday.replace(/(.{4})(.{2})/, "$1-$2-");

            if (birthday !== '') {
                this.props.form.setFieldsValue({
                    'birthdate': moment(birthday, 'YYYY-MM-DD'),
                });
            }
        }
    }
    //获取用户工号信息
    GetUserCode = (e) => {
        let data = {
            params: [{
            }]
        }
        $http.post('urlDeault', this, {
            code: "01040223",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode == '0') {
                    this.setState({
                        userInfoData: res.result, // 用户集合
                    })
                    this.verifyUserCode();
                } else {

                }
            }
        });
    }
    //验证用户工号不重复
    verifyUserCode = () => {
        let userCode = this.props.form.getFieldValue('userCode')
        let flag = 1
        let userData = this.state.userInfoData
        if (userCode == "") {
            this.refs.setCarouselRef.next();
        } else {
            userData.map((item) => {
                if (item.code == userCode) {
                    flag = 2
                    message.error("用户工号重复");
                }
            })
            if (flag == 1) {
                this.refs.setCarouselRef.next();
            }

        }

    }
    //验证验证码
    verifyMobileCode = (e) => {
        let data = {
            "params": [{
                mobile: this.props.form.getFieldValue('mobile'),
                typeCode: "HisUser",
                verifyCode: this.props.form.getFieldValue('identifyCode')
            }]
        };
        $http.post('urlDeault', this, {
            code: "1014",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode == '0') {
                    // this.refs.setCarouselRef.next();  //下一页
                    this.handleSubmit(e);
                } else {

                }
            }
        });
    }
    //  上一步
    prevBtn = () => {
        this.refs.setCarouselRef.prev();
    }

    //  下一步
    nextBtn = () => {
        let num = this.state.current
        switch (num) {
            case 0:
                this.props.form.validateFields(['descripts', 'sex', 'credType', 'credNo', 'birthdate', 'title'], (err, values) => { //'descripts', 'sex', 'credType', 'credNo', 'birthdate', 'mobile', 'title','identifyCode'
                    if (!err) {
                        this.refs.setCarouselRef.next();  //下一页
                    } else {
                        return false;
                    }
                });
                break;
            case 1:
                this.props.form.validateFields(['hospDr', 'defaultDeptDr', 'post'], (err, values) => {   //'hospDr', 'defaultDeptDr', 'post'
                    if (!err) {
                        this.GetUserCode();

                    } else {
                        return false;
                    }
                });
                break;
            default:
                //验证验证码
                // this.verifyMobileCode();

                break;
        }
    }


    // 开始日期选择限制
    disabledStDate(current) {
        // 开始日期不能选择今天和之前的日期
        return current && current > moment().endOf('day');
    }

    //  切换
    onChange = (a) => {
        let { language } = this.state
        switch (a) {
            case 0:
                this.setState({
                    current: 0,
                    logintext: language.RegisterBasicData && language.RegisterBasicData.descripts,
                    displayBtn: {
                        display_prev: 'none',
                        display_next: 'block',
                        display_register: 'none',
                    },
                })
                break;
            case 1:
                this.setState({
                    current: 1,
                    logintext: language.RegisterHospitalpost && language.RegisterHospitalpost.descripts,
                    displayBtn: {
                        display_prev: 'block',
                        display_next: 'block',
                        display_register: 'none',
                    }
                })
                break;
            case 2:
                this.setState({
                    current: 2,
                    logintext: language.RegisterAccountPassword && language.RegisterAccountPassword.descripts,
                    displayBtn: {
                        display_prev: 'block',
                        display_next: 'none',
                        display_register: 'block',
                    }
                })
                break;
            default:
                break;
        }
    }
    // 密码二次验证
    handlePassword = (rule, val, callback) => {
        let { language } = this.state
        if (!val) {
            callback();
        }
        let validateResult = this.props.form.getFieldValue('passWord1') === this.props.form.getFieldValue('passWord2')  // 自定义规则
        if (!validateResult) {
            callback(language.RegisterThePasswords && language.RegisterThePasswords.descripts);
        }
        callback();
    }

    // 用户信息唯一性验证接口
    uniqueUserInformation = (type) => {

    }

    // 医院切换
    hospDrChange = (value) => {
        this.setState({
            hospID: value
        })
        let data = {
            "params": [{
                hospID: value,
                descripts: ""
            }]
        };
        $http.post('urlDeault', this, {
            code: "1008",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.setState({
                        DeptDrData: res.hbLoc, // 科室集合
                    })
                }
            }
        });
    }
    // 发送验证码
    sendMobileCode = () => {
        let data = {
            "params": [{
                mobile: this.props.form.getFieldValue('mobile'),
                typeCode: "HisUser",
                //hospCode: '44030001',
                hospID: this.props.form.getFieldValue('hospDr')
            }]
        };
        $http.post('urlDeault', this, {
            code: "1013",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    this.handleClick();
                    this.setState({
                        effectTime: res.result.effectTime
                    })
                    message.success(res.errorMessage);
                }
            }
        });
    }

    //数值下降
    countDown = () => {
        const { count } = this.state;
        if (count === 1) {
            this.setState({
                count: 60,
                liked: true,
            });
        } else {
            this.setState({
                count: count - 1,
                liked: false,
            });
            setTimeout(this.countDown.bind(this), 1000);
        }
    }
    //点击验证码按钮
    handleClick = () => {
        // const { sendMsg } = this.props;
        const { liked } = this.state;
        if (!liked) {
            return;
        }
        this.countDown();
    };


    // 获取content的高度
    contentHeight = (e) => {
        let contenth = parseInt(document.body.clientHeight) - 160;
        this.setState({
            contentH: contenth
        })
    }

    // 重置表单
    resetFields = () => {
        this.props.form.resetFields(); //清空所有
    }

    //  注册账号表单提交
    handleSubmit = (e) => {
        e.preventDefault();

        this.props.form.validateFields((err, values) => {
            if (!err) {
                let data = {
                    "params": [{
                        "userDesc": values.descripts,
                        "userSexID": values.sex,
                        "userMobile": values.mobile,
                        "identifyCode": values.identifyCode,
                        "userPassword": Aes.Encrypt(values.passWord2),
                        "userDOB": values.birthdate ? moment(values.birthdate).utcOffset(480).format('YYYY-MM-DD') : '',
                        "userTitleID": values.title,
                        "userLogonLocID": values.defaultDeptDr,
                        "userPostID": values.post,
                        "userLogonHospID": values.hospDr,
                        "userCredTypeID": values.credType,
                        "userCredNo": values.credNo,
                        'userCode': values.userCode,
                        'requestFlag': 'R',
                        'hospID': values.hospDr
                    }]
                };
                $http.post('urlDeault', this, {
                    code: "01040070",
                    data: data,
                    success: function (res) {
                        let errorCode = res.errorCode;
                        if (errorCode === '0') {
                            message.success(res.errorMessage)
                            this.props && this.props.handleSwitch && this.props.handleSwitch("login", values.mobile);
                            this.resetFields();
                            // let secondsToGo = 1;
                            // let thisParse = this;
                            // let { language } = this.state
                            // const modal = Modal.success({
                            //     title: `${language.Registerloginwas && language.Registerloginwas.descripts}!`,
                            //     content: ` ${secondsToGo} 秒后跳转到登录页面`,
                            //     okText: language.RegisterWeshall && language.RegisterWeshall.descripts,
                            //     onOk: () => {
                            //         thisParse.props && thisParse.props.handleSwitch && thisParse.props.handleSwitch("login", thisParse.props.form.getFieldValue('mobile'));
                            //         // thisParse.props.history.push({ pathname: "/Login", state: { userCode: thisParse.props.form.getFieldValue('mobile') } });
                            //     },
                            // });
                            // const timer = setInterval(() => {
                            //     secondsToGo -= 1;
                            //     modal.update({
                            //         content: ` ${secondsToGo} 秒后跳转到登录页面`,
                            //     });
                            // }, 1000);
                            // setTimeout(() => {
                            //     clearInterval(timer);
                            //     // this.props.history.push({ pathname: "/Login", state: { userCode: this.props.form.getFieldValue('mobile') } });
                            //     thisParse.props && thisParse.props.handleSwitch && thisParse.props.handleSwitch("login", thisParse.props.form.getFieldValue('mobile'));
                            //     modal.destroy();
                            // }, secondsToGo * 1000);
                        }
                    }
                });
            }
        });
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        let { language, current, imgUrl, locale } = this.state;
        const steps = [{
            title: language.RegisterBasic && language.RegisterBasic.descripts,
        }, {
            title: language.RegisterHospital && language.RegisterHospital.descripts,
        }, {
            title: language.RegisterAccount && language.RegisterAccount.descripts,
        }];

        return (
            <ConfigProvider locale={locale}>
                <div style={{ height: this.state.contentH, marginTop: "24px" }}>
                    <div style={{ width: "500px" }}>
                        <div className="mB30">
                            <Row>
                                <Col span={23} offset={1}>
                                    <Steps current={current} className="fontBlue" labelPlacement="vertical " >
                                        {steps.map((item, i) => <Step key={i} title={item.title} />)}
                                    </Steps>
                                </Col>
                            </Row>
                        </div>
                        <Form onSubmit={this.verifyMobileCode} className="login-form register-form">
                            <Carousel ref='setCarouselRef' afterChange={this.onChange} dots="false">
                                <div >
                                    <Row>
                                        <Col span={24} >
                                            <Form.Item label={language.RegisterName && language.RegisterName.descripts} {...formItemLayout}>
                                                {getFieldDecorator('descripts', {
                                                    rules: [{ required: true, message: language.RegisterName && language.RegisterName.message }, { pattern: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/, message: '请输入正确的姓名' }],
                                                })(
                                                    <Input allowClear={true} size="large" placeholder={language.RegisterName && language.RegisterName.message} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={24} >
                                            <Form.Item label={language.Registersex && language.Registersex.descripts}  {...formItemLayout}>
                                                {getFieldDecorator('sex', {
                                                    rules: [{ required: true, message: language.Registersex && language.Registersex.message }],
                                                })(
                                                    <Select allowClear placeholder={language.Registersex && language.Registersex.message} size="large" >
                                                        {this.state.sexData.map(item => <Option key={item.id}>{item.descripts}</Option>)}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={24} >
                                            <Form.Item label={language.RegisterDocument && language.RegisterDocument.descripts} {...formItemLayout}>
                                                {getFieldDecorator('credType', {
                                                    rules: [{ required: true, message: language.RegisterDocument && language.RegisterDocument.message }],
                                                })(
                                                    <Select allowClear placeholder={language.RegisterDocument && language.RegisterDocument.message} size="large">
                                                        {this.state.credtypeData.map(item => <Option key={item.id}>{item.descripts}</Option>)}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={24} >
                                            <Form.Item label={language.RegisterCertificate && language.RegisterCertificate.descripts} {...formItemLayout}>
                                                {getFieldDecorator('credNo', {
                                                    rules: [{ required: true, message: language.RegisterCertificate && language.RegisterCertificate.message }],
                                                })(
                                                    <Input allowClear={true} size="large" placeholder={language.RegisterCertificate && language.RegisterCertificate.message} onBlur={this.getBirthdayFromIdCard} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={24}>
                                            <Form.Item label={language.RegisterDate && language.RegisterDate.descripts} {...formItemLayout}>
                                                {getFieldDecorator('birthdate', {
                                                    rules: [{ required: true, message: language.RegisterDate && language.RegisterDate.message }],
                                                })(
                                                    <DatePicker disabledDate={this.disabledStDate} id="birthdate" size="large" placeholder={language.RegisterDate && language.RegisterDate.message} style={{ width: "100%" }} popupStyle={{ width: this.state.birthdateWidth }} dropdownClassName="birthdateWidth" format='YYYY-MM-DD' />
                                                )}
                                            </Form.Item>
                                        </Col>

                                        <Col span={24} >
                                            <Form.Item label={language.RegisterTitle && language.RegisterTitle.descripts} {...formItemLayout}>
                                                {getFieldDecorator('title', {
                                                    rules: [{ required: true, message: language.RegisterTitle && language.RegisterTitle.message }],
                                                })(
                                                    <Select allowClear placeholder={language.RegisterTitle && language.RegisterTitle.message} size="large" >
                                                        {this.state.titleData.map(item => <Option key={item.id}>{item.descripts}</Option>)}
                                                    </Select>

                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                                <div>
                                    <Row>
                                        <Col span={23} offset={1} >
                                            <Form.Item label={language.RegisterAffiliated && language.RegisterAffiliated.descripts} {...formItemLayout}>
                                                {getFieldDecorator('hospDr', {
                                                    // initialValue: '请选择所属医院',
                                                    rules: [{ required: true, message: language.RegisterAffiliated && language.RegisterAffiliated.message }],
                                                })(
                                                    <Select allowClear placeholder={language.RegisterAffiliated && language.RegisterAffiliated.message} size="large" onChange={(event) => { this.hospDrChange(event); }}  >
                                                        {this.state.hospitalData.map(item => <Option key={item.id}>{item.descripts}</Option>)}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={23} offset={1} onClick={this.focusSlect7}>
                                            <Form.Item label={language.Registerdepartments && language.Registerdepartments.descripts} {...formItemLayout}>
                                                {getFieldDecorator('defaultDeptDr', {
                                                    // initialValue: '请选择所属科室',
                                                    rules: [{ required: true, message: language.Registerdepartments && language.Registerdepartments.message }],
                                                })(
                                                    <Select allowClear showSearch placeholder={language.Registerdepartments && language.Registerdepartments.message} size="large" optionFilterProp="children" filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0} >
                                                        {this.state.DeptDrData.map(item => <Option key={item.id}>{item.descripts}</Option>)}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={23} offset={1} onClick={this.focusSlect8}>
                                            <Form.Item label={language.RegisterJob && language.RegisterJob.descripts} {...formItemLayout}>
                                                {getFieldDecorator('post', {
                                                    // initialValue: '请选择工作岗位',
                                                    rules: [{ required: true, message: language.RegisterJob && language.RegisterJob.message }],
                                                })(
                                                    <Select allowClear placeholder={language.RegisterJob && language.RegisterJob.message} size="large">
                                                        {this.state.groupData.map(item => <Option key={item.id}>{item.descripts}</Option>)}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={23} offset={1} >
                                            <Form.Item label={language.RegisterJobnumber && language.RegisterJobnumber.descripts} {...formItemLayout}>
                                                {getFieldDecorator('userCode', {
                                                    // initialValue: '请选择工作岗位',
                                                    rules: [],
                                                })(
                                                    <Input allowClear={true} type="text" size="large" placeholder={language.RegisterJobnumber && language.RegisterJobnumber.message} maxLength={10} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                                <div>
                                    <Row>
                                        <Col span={23} offset={1}>
                                            <Form.Item label={language.RegisterNewpassword && language.RegisterNewpassword.descripts} {...formItemLayout}>
                                                {getFieldDecorator('passWord1', {
                                                    rules: [{ required: true, message: language.RegisterNewpassword && language.RegisterNewpassword.message }, { pattern: /^.{6,12}$/, message: language.RegisterErr2 && language.RegisterErr2.descripts }, { pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,12})$/, message: language.RegisterLoginErr4 && language.RegisterLoginErr4.descripts }, { pattern: /^(?:(?!(.+)\1{2,}).)+$/, message: language.RegisterLoginErr8 && language.RegisterLoginErr8.descripts }],
                                                })(
                                                    <Input allowClear={true} maxLength={12} type="password" size="large" placeholder={language.RegisterNewpassword && language.RegisterNewpassword.message} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={23} offset={1}>
                                            <Form.Item label={language.RegisterConfirmpassword && language.RegisterConfirmpassword.descripts} {...formItemLayout}>
                                                {getFieldDecorator('passWord2', {
                                                    rules: [{ required: true, message: language.RegisterConfirmpassword && language.RegisterConfirmpassword.message }, {
                                                        validator: this.handlePassword
                                                    }, { pattern: /^.{6,12}$/, message: language.RegisterErr2 && language.RegisterErr2.descripts }, { pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,12})$/, message: language.RegisterLoginErr4 && language.RegisterLoginErr4.descripts }, { pattern: /^(?:(?!(.+)\1{2,}).)+$/, message: language.RegisterLoginErr8 && language.RegisterLoginErr8.descripts }],
                                                })(
                                                    <Input allowClear={true} maxLength={12} type="password" size="large" placeholder={language.RegisterConfirmpassword && language.RegisterConfirmpassword.message} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={23} offset={1}>
                                            <Form.Item label={language.Registerphone && language.Registerphone.descripts} {...formItemLayout}>
                                                {getFieldDecorator('mobile', {
                                                    rules: [{ required: true, message: language.Registerphone && language.Registerphone.message }, { pattern: /^1\d{10}$/, message: language.RegisterPleaseNumber && language.RegisterPleaseNumber.descripts }],
                                                })(
                                                    <Input allowClear={true} size="large" maxLength={12}
                                                        placeholder={language.Registerphone && language.Registerphone.message} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={23} offset={1}>
                                            <Form.Item label={language.RegisterCode && language.RegisterCode.descripts} {...formItemLayout}>
                                                {getFieldDecorator('identifyCode', {
                                                    rules: [{ required: true, message: language.RegisterCode && language.RegisterCode.message }],
                                                })(
                                                    <Input size="large" maxLength={12}

                                                        prefix={<Icon type="safety-certificate" />} placeholder={language.RegisterErr1 && language.RegisterErr1.descripts} addonAfter={
                                                            <div
                                                                className="codePhone"
                                                                disabled={!this.state.liked}
                                                                style={{ color: !this.state.liked ? '#BEBEBE' : '' }}
                                                                onClick={this.state.liked ? this.sendMobileCode : ''}
                                                            >
                                                                {this.state.liked ? '获取验证码' : `${this.state.count} 秒后重发`}
                                                            </div>} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </div>
                            </Carousel>
                            <Row>
                                <Col span={18} offset={6}>
                                    <Row >
                                        <Col span={6} offset={4}>
                                            <Form.Item style={{ display: this.state.displayBtn.display_prev }}>
                                                <Button size="large" type="default" className="login-form-button back" onClick={this.prevBtn} >{language.Registercall && language.Registercall.descripts}</Button>
                                            </Form.Item>
                                        </Col>
                                        <Col span={6} offset={4}>
                                            <Form.Item style={{ display: this.state.displayBtn.display_next }}>
                                                <Button size="large" type="primary" className="login-form-button" onClick={this.nextBtn}>{language.RegisterNextStep && language.RegisterNextStep.descripts}</Button>
                                            </Form.Item>
                                            <Form.Item style={{ display: this.state.displayBtn.display_register }}>
                                                <Button size="large" type="primary" htmlType="submit" className="login-form-button" >{language.Registerregister && language.Registerregister.descripts}</Button>
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                </Col>
                            </Row>
                        </Form>
                    </div>
                </div>
            </ConfigProvider>
        );
    }
}


const RegisterFrom = Form.create()(Register);


export default RegisterFrom