import React from 'react';
import ajax from 'jquery/src/ajax/xhr.js'
import $ from 'jquery/src/ajax';
import { Modal, Button, Icon, Input, message } from 'antd';
import '../account/set/changeModal.less';

const ChangePw = React.createClass({
    getInitialState() {
        return {
            forgetPw: false,
            setPw: false,
            getCodeButton: false,
            checkMobile: false,
            mCodeText: '获取验证码',
            vsCodeSrc: globalConfig.context + '/open/getVCode'
        };
    },
    showModal() {
        this.setState({
            forgetPw: true,
        });
    },
    forgetPwOk() {
        if (!this.state.checkMobile) {
            message.warning('请输入正确的手机号码！');
        } else if (this.state.checkMobile) {
            $.ajax({
                method: "POST",
                dataType: "json",
                crossDomain: false,
                url: globalConfig.context + "/open/checkMCode",
                data: {
                    "mobile": this.state.mobile,
                    "mobileCode": this.state.mcode
                }
            }).done(function (data) {
                if (data.error && data.error.length) {
                    message.warning(data.error[0].message);
                } else {
                    this.state.uuid = data.data;
                    this.setState({
                        forgetPw: false,
                        setPw: true,
                    });
                }
            }.bind(this));
        };
    },
    setPwOk() {
        if (this.state.newPw.length < 6 || this.state.newPw.length > 20) {
            message.warning('请使用长度为6-20位的密码！');
        } else if (this.state.confirmPw !== this.state.newPw) {
            message.warning('两次密码输入不相同！');
        } else if (this.state.confirmPw === this.state.newPw) {
            $.ajax({
                method: "POST",
                dataType: "json",
                crossDomain: false,
                url: globalConfig.context + "/open/resetPwd",
                data: {
                    "mobile": this.state.mobile,
                    "type": this.props.theType,
                    "newPwd": this.state.newPw,
                    "resetCode": this.state.uuid
                }
            }).done(function (data) {
                if (!data.error.length) {
                    message.success('修改成功！');
                    this.handleCancel();
                } else {
                    message.warning(data.error[0].message);
                }
            }.bind(this));
        };
    },
    handleCancel(e) {
        this.setState({
            forgetPw: false,
            setPw: false,
        });
    },
    newMobileChange(e) {
        this.state.mobile = e.target.value;
        if (/^1[34578]\d{9}$/.test(this.state.mobile)) {
            this.state.checkMobile = true
        }
    },
    mcodeChange(e) {
        this.state.mcode = e.target.value;
    },
    newPwChange(e) {
        this.state.newPw = e.target.value;
    },
    confirmPwChange(e) {
        this.state.confirmPw = e.target.value;
    },
    getMCode() {
        let _me = this;
        if (!this.state.checkMobile) {
            message.warning('请输入正确的手机号码！');
        } else if (this.state.checkMobile) {
            $.ajax({
                method: "get",
                dataType: "json",
                url: globalConfig.context + "/open/getMCode",
                data: {
                    "mobile": this.state.mobile,
                    "verificationCode": this.state.Vcode,
                    "type": this.props.theType,
                    "sign": true
                },
                success: function (data) {
                    if (data.error && data.error.length) {
                        message.warning(data.error[0].message);
                    } else {
                        message.success('验证码发送成功!');
                        this.setState({
                            getCodeButton: true
                        });
                        let interval = setInterval(function () {
                            _me.setState({
                                getCodeButton: false
                            });
                            clearInterval(interval);
                        }, 60000);
                        let i = 59;
                        let countDown = setInterval(function () {
                            _me.setState({
                                mCodeText: '剩余' + i + '秒'
                            });
                            i--;
                            if (i == 0) {
                                clearInterval(countDown);
                                _me.setState({
                                    mCodeText: '获取验证码'
                                });
                            };
                        }, 1000);
                    }
                }.bind(this),
            });
        }
    },
    reloadVCode() {
        this.setState({
            vsCodeSrc: globalConfig.context + '/open/getVCode?t=' + Math.random()
        });
    },
    render() {
        return (
            <div style={{ 'float': 'right', 'marginTop': '0' }}>
                <a className="login-form-forgot" onClick={this.showModal}>忘记密码</a>
                <Modal maskClosable={false} key='1' className="change-modal" title="忘记密码" visible={this.state.forgetPw}
                    onOk={this.forgetPwOk} onCancel={this.handleCancel}
                    width={360}
                    footer={[
                        <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.forgetPwOk}>确认</Button>,
                        <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
                    ]}
                >
                    <div><span>手机号码：</span><Input onChange={this.newMobileChange} /></div>
                    <div>
                        <span>图形验证码：</span>
                        <Input className="mixwidth" onChange={(e) => { this.state.Vcode = e.target.value; }} />
                        <span className="getVcode">
                            <img id="VCode" src={this.state.vsCodeSrc} alt="点击刷新验证码" onClick={this.reloadVCode} />
                        </span>
                    </div>
                    <div>
                        <span>验证码：</span>
                        <Input className="mixwidth" onChange={this.mcodeChange} />
                        <Button style={{ width: 92 }} key="getCodeBtn" onClick={this.getMCode} disabled={this.state.getCodeButton}>{this.state.mCodeText}</Button>
                    </div>
                </Modal>
                <Modal maskClosable={false} key='2' className="change-modal" title="设置新密码" visible={this.state.setPw}
                    onOk={this.setPwOk} onCancel={this.handleCancel}
                    width={360}
                    footer={[
                        <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.setPwOk}>确认</Button>,
                        <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
                    ]}
                >
                    <p className="modal-intro"><Icon type="info-circle" />密码长度为6-20个字符，区分大小写</p>
                    <p><span>新密码：</span><Input type="password" onChange={this.newPwChange} /></p>
                    <p><span>确认密码：</span><Input type="password" onChange={this.confirmPwChange} /></p>
                </Modal>
            </div>
        );
    },
});

export default ChangePw;