/*
 * Creator:     ML
 * CreatDate:   2019-08-20
 * descripts：  个人信息  修改密码
*/
import React from 'react';
import { Form, Row, Col, Input, Button, Icon, Table, message, Divider, Tooltip } from 'antd';
import { $http } from '../../../containers/config/https';
import { Aes } from '../../../tools/index';
import '../css/index.less';
const FormItem = Form.Item;
const ChangePassword = Form.create()(
    class ChangePassword extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                page: 1,//修改登录密码
                nowPage: 1,
                oldPassVisible: false,//原密码提示显隐
                oldPassMessage: "",//原密码文字提示
                newPassVisible: false,//新密码提示显隐
                newPassMessage: "",//新文字提示
                againPassVisible: false,//确认新密码提示显隐
                againPassMessage: "",//确认新文字提示
                oldPass: true,
                newPass: true,
                againPass: true,
            }
        }
        componentDidMount() {
        }
        handSave = () => {
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    let data = {}
                    data = {
                        params: [{
                            userID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                            updateUserID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                            power: "password",
                            userOriginPassword: Aes.Encrypt(this.props.form.getFieldValue('oldPass')) || '',
                            userPassword: Aes.Encrypt(this.props.form.getFieldValue('newPass')) || '',
                            userConfirmPassword: Aes.Encrypt(this.props.form.getFieldValue('againPass')) || '',
                        }],
                    };
                    $http.post('urlS', this, {
                        code: "01040090",
                        data: data,
                        success: function (res) {
                            if (+res.errorCode === 0) {
                                message.success(
                                    this.props.localeProvider && this.props.localeProvider.PersonalInformationSuccessfullyModified ? this.setMessage('PersonalInformationSuccessfullyModified', 'descripts') : "修改成功"
                                );
                                this.props.form.resetFields();
                            }
                        }
                    });
                }

            })
        }
        //验证 二次确认密码
        validFunction = (rule, value, callback) => {
            if (this.props.form.getFieldValue('newPass') != this.props.form.getFieldValue('againPass')) {
                callback("确认密码与新设置密码不一致");
                return;
            }
            callback();
        }
        //标题头切换
        modifyLoginPass = (num) => {
            if (this.state.nowPage != num) {
                this.props.form.resetFields();
            }
            this.setState({
                page: num,
                nowPage: num
            })
        }
        //原密码提示框
        oldPassTip = () => {
            this.props.form.validateFields(['oldPass'], (errors, values) => {
                if (errors == null) {
                    return
                }
                if (!errors) {
                    this.setState({
                        oldPassVisible: false
                    })
                } else {
                    this.setState({
                        oldPassVisible: true,
                        oldPassMessage: errors.oldPass.errors[0].message,
                    })
                    setTimeout(() => {
                        this.setState({
                            oldPassVisible: false
                        })
                    }, 1500)
                }
            });
        }
        //新密码提示框
        newPassTip = () => {
            this.props.form.validateFields(['newPass'], (errors, values) => {
                if (errors == null) {
                    return
                }
                if (!errors) {
                    this.setState({
                        newPassVisible: false
                    })
                } else {
                    this.setState({
                        newPassVisible: true,
                        newPassMessage: errors.newPass.errors[0].message,
                    })
                    setTimeout(() => {
                        this.setState({
                            newPassVisible: false
                        })
                    }, 1500)
                }
            });
        }
        //确认新密码提示框
        againPassTip = () => {
            this.props.form.validateFields(['againPass'], (errors, values) => {
                if (errors == null) {
                    return
                }
                if (!errors) {
                    this.setState({
                        againPassVisible: false
                    })
                } else {
                    this.setState({
                        againPassVisible: true,
                        againPassMessage: errors.againPass.errors[0].message,
                    })
                    setTimeout(() => {
                        this.setState({
                            againPassVisible: false
                        })
                    }, 1500)
                }
            });
        }
        handleSHPass = (id) => {
            let domPass = document.getElementById(id);
            if (domPass.type && domPass.type == "password") {
                domPass.type = "text"
                this.setState({
                    [id]: false
                })
            } else {
                this.setState({
                    [id]: true
                })
                domPass.type = "password"
            }
        }
        //国际化
        setMessage(name, message) {
            return this.props.localeProvider ? this.props.localeProvider[name][message] : ''
        }

        render() {
            const { page, oldPassMessage, oldPassVisible, newPassMessage, newPassVisible, againPassMessage, againPassVisible, oldPass, newPass, againPass } = this.state
            let localeData = this.props.localeProvider
            const {
                form: { validateFields },
            } = this.props;
            const { getFieldDecorator } = this.props.form;
            const mesIcon = <Icon type="exclamation-circle" />
            return (
                <div className="changePassWordDom">
                    <p style={{ fontWeight: "600", fontSize: "14px" }}><span onClick={() => this.modifyLoginPass(1)} style={{ color: (page == 1 ? "#1890ff" : "#756f6f"), cursor: "pointer" }}>{localeData && localeData.PersonalInformationModifyTheLoginPassword ? this.setMessage('PersonalInformationModifyTheLoginPassword', 'descripts') : "修改登录密码"}</span><Divider type="vertical" /><span style={{ color: (page == 2 ? "#1890ff" : "#756f6f"), cursor: "pointer" }} onClick={() => this.modifyLoginPass(2)}>{localeData && localeData.PersonalInformationModifyTheSignaturePassword ? this.setMessage('PersonalInformationModifyTheSignaturePassword', 'descripts') : "修改签名密码"}</span></p>
                    <Form className="changePassDom">
                        <Row gutter={8}>
                            <Col span={16} className="oldPassDom ">
                                <Tooltip getPopupContainer={() => document.querySelector('.oldPassDom')} overlayStyle={{ zIndex: 999, }} overlayClassName="toolDom numberPosition" title={<div className="titleIcon">{mesIcon}<span >{oldPassMessage}</span></div>} visible={oldPassVisible}>
                                    <FormItem label={localeData && localeData.PersonalInformationoldPassword ? this.setMessage('PersonalInformationoldPassword', 'descripts') : "原密码："} wrapperCol={{ span: 19 }} labelCol={{ span: 5 }}>
                                        {getFieldDecorator('oldPass', {
                                            validateTrigger: ["onPressEnter", "onBlur"],
                                            initialValue: undefined,
                                            rules: [{ required: localeData && localeData.PersonalInformationoldPassword && this.setMessage('PersonalInformationoldPassword', 'required') == "Y" ? true : false, message: localeData && localeData.PersonalInformationoldPassword ? this.setMessage('PersonalInformationoldPassword', 'message') : "请输入原密码：" }],
                                        })(
                                            <Input
                                                type="password"
                                                autoFocus
                                                maxLength={12}
                                                placeHolder={localeData && localeData.PersonalInformationoldPassword ? this.setMessage('PersonalInformationoldPassword', 'message') : "请输入原密码："}
                                                onPressEnter={this.oldPassTip}
                                                onBlur={this.oldPassTip}
                                                onChange={() => this.setState({ oldPassVisible: false })}
                                                onClick={() => this.setState({ oldPassVisible: false })}
                                            />
                                        )}
                                    </FormItem>
                                </Tooltip>
                            </Col >
                            <Icon className="eyeIcon" style={{ display: oldPass ? "inline-block" : "none" }} onClick={() => this.handleSHPass("oldPass")} type="eye-invisible" />
                            <Icon className="eyeIcon" style={{ display: !oldPass ? "inline-block" : "none" }} onClick={() => this.handleSHPass("oldPass")} type="eye" />
                        </Row>
                        <Row gutter={8}>
                            <Col span={16} className="newPassDom">
                                <Tooltip getPopupContainer={() => document.querySelector('.newPassDom')} overlayStyle={{ zIndex: 999, }} overlayClassName="toolDom numberPosition" title={<div className="titleIcon">{mesIcon}<span >{newPassMessage}</span></div>} visible={newPassVisible}>
                                    <FormItem label={localeData && localeData.PersonalInformationNewPassword ? this.setMessage('PersonalInformationNewPassword', 'descripts') : "新密码："} wrapperCol={{ span: 19 }} labelCol={{ span: 5 }}>
                                        {getFieldDecorator('newPass', {
                                            validateTrigger: ["onPressEnter", "onBlur"],
                                            initialValue: undefined,
                                            rules: [{
                                                required:
                                                    localeData && localeData.PersonalInformationNewPassword &&
                                                        this.setMessage('PersonalInformationNewPassword', 'required') == "Y" ? true : false,
                                                message: localeData && localeData.PersonalInformationNewPassword ?
                                                    this.setMessage('PersonalInformationNewPassword', 'message') : "请输入新密码"
                                            },
                                            {
                                                pattern: /^.{6,12}$/,
                                                message: "请输入新密码，6-12个字母，数字，下划线"
                                            },
                                           
                                            {
                                                pattern: /^(?:(?!(.+)\1{2,}).)+$/,
                                                message: "不能出现连续三个以上重复字符"
                                            },
                                           
                                            {
                                                pattern: /^(?=.*[0-9])(?=.*[a-zA-Z])(.{6,12})$/,
                                                message: "必须包含数字和英文"
                                            },
                                            // {
                                            //     pattern: /^(?:(?!(.+)\1{2,}).)(?=.*[a-zA-Z]+)(?=.*[0-9]+)[a-zA-Z0-9]+$/,
                                            //     message: "必须包含数字和英文 不能出现连续三个以上重复字符"
                                            // },
                                          
                                           
                                            ],
                                        })(
                                            <Input
                                                type="password"
                                                placeHolder={localeData && localeData.PersonalInformationNewPassword ? this.setMessage('PersonalInformationNewPassword', 'message') : "请输入新密码，6-12个字母，数字，下划线"}
                                                maxLength={12}
                                                onPressEnter={this.newPassTip}
                                                onBlur={this.newPassTip}
                                                onChange={() => this.setState({ newPassVisible: false })}
                                                onClick={() => this.setState({ newPassVisible: false })}
                                            />
                                        )}
                                    </FormItem>
                                </Tooltip>
                            </Col >
                            <Icon className="eyeIcon" style={{ display: newPass ? "inline-block" : "none" }} onClick={() => this.handleSHPass("newPass")} type="eye-invisible" />
                            <Icon className="eyeIcon" style={{ display: !newPass ? "inline-block" : "none" }} onClick={() => this.handleSHPass("newPass")} type="eye" />
                        </Row>
                        <Row gutter={8}>
                            <Col span={16} className="againPassDom">
                                <Tooltip getPopupContainer={() => document.querySelector('.againPassDom')} overlayStyle={{ zIndex: 999, }} overlayClassName="toolDom numberPosition" title={<div className="titleIcon">{mesIcon}<span >{againPassMessage}</span></div>} visible={againPassVisible}>
                                    <FormItem label={localeData && localeData.PersonalInformationConfirmPassword ? this.setMessage('PersonalInformationConfirmPassword', 'descripts') : "确认密码："} wrapperCol={{ span: 19 }} labelCol={{ span: 5 }}>
                                        {getFieldDecorator('againPass', {
                                            validateTrigger: ["onPressEnter", "onBlur"],
                                            initialValue: undefined,
                                            rules: [{ required: true, message: localeData && localeData.PersonalInformationConfirmPassword ? this.setMessage('PersonalInformationConfirmPassword', 'message') : "请再次输入新密码确认" },
                                            { validator: this.validFunction },
                                            ],
                                        })(
                                            <Input
                                                type="password"
                                                placeHolder={localeData && localeData.PersonalInformationConfirmPassword ? this.setMessage('PersonalInformationConfirmPassword', 'message') : "请再次输入新密码确认"}
                                                maxLength={12}
                                                onPressEnter={this.againPassTip}
                                                onBlur={this.againPassTip}
                                                onChange={() => this.setState({ againPassVisible: false })}
                                                onClick={() => this.setState({ againPassVisible: false })}
                                            />
                                        )}
                                    </FormItem>
                                </Tooltip>
                            </Col >
                            <Icon className="eyeIcon" style={{ display: againPass ? "inline-block" : "none" }} onClick={() => this.handleSHPass("againPass")} type="eye-invisible" />
                            <Icon className="eyeIcon" style={{ display: !againPass ? "inline-block" : "none" }} onClick={() => this.handleSHPass("againPass")} type="eye" />
                        </Row>
                        <Row gutter={8}>
                            <Col span={16} style={{ textAlign: "right" }}>
                                <Button key="submits" type="primary" onClick={this.handSave} >{localeData && localeData.PersonalInformationsave ? this.setMessage('PersonalInformationsave', 'descripts') : "保存："}</Button>
                            </Col >
                        </Row>
                    </Form>
                </div>
            )
        }
    })
export default ChangePassword    