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 './changeModal.less';

const ChangePw = React.createClass({
    getInitialState() {
        return { visible: false };
    },
    showModal() {
        this.setState({
            visible: true,
        });
    },
    logOut() {
        $.ajax({
            method: "get",
            dataType: "json",
            url: globalConfig.context + "/login",
        }).done(function (data) {
            window.location.href = globalConfig.context + "/user/login.html"
        });
    },
    handleOk() {
        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 + "/api/user/pwd",
                data: {
                    "password": this.state.oldPw,
                    "newPassword": this.state.newPw
                }
            }).done(function (data) {
                if (!data.error.length) {
                    message.success('修改成功！');
                    this.setState({
                        visible: false,
                    });
                    this.logOut();
                } else {
                    message.warning(data.error[0].message);
                }
            }.bind(this));
        };
    },
    handleCancel(e) {
        this.setState({
            visible: false,
        });
    },
    oldPwChange(e) {
        this.state.oldPw = e.target.value;
    },
    newPwChange(e) {
        this.state.newPw = e.target.value;
    },
    confirmPwChange(e) {
        this.state.confirmPw = e.target.value;
    },
    render() {
        return (
            <div style={{ 'float': 'left', 'marginTop': '0' }}>
                <Button type="primary" onClick={this.showModal}>修改密码</Button>
                <Modal maskClosable={false} className="change-modal" title="设置新密码" visible={this.state.visible}
                    onOk={this.handleOk} onCancel={this.handleCancel}
                    width={360}
                    footer={[
                        <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确认</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.oldPwChange} /></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;