import React, { Component } from 'react'
import { Form, Input, message as Message, Modal } from 'antd'
import { api } from 'common/api'
import { RSA_PUBLIC_KEY } from 'util/global'
import { cloneDeep } from 'lodash'
import { Button } from 'antd/lib/radio'
import { encryptByRSA } from 'util/rsa'

const initData = {
    exist: false,
    pattern: '',
    descriptions: '',
    visible: false,
}

export default class form extends Component {
    state = cloneDeep(initData)
    // 表单实例
    form = React.createRef()

    // 初始化数据
    record = {}

    open = () => {
        this.setState({ visible: true })
        api.getPwdRule({}).then(({ success, data, message }) => {
            if (success) {
                const { pattern, descriptions } = data
                this.setState({
                    pattern,
                    descriptions,
                })
            } else {
                Message.Error(message)
            }
        })
    }

    /**
     * mount后回调
     */
    componentDidMount() {
        this.props.created && this.props.created(this)
    }

    updatePwd(values) {
        let { password, newPassword } = values.current.getFieldsValue()
        password = encryptByRSA(password, RSA_PUBLIC_KEY)
        newPassword = encryptByRSA(newPassword, RSA_PUBLIC_KEY)
        const confirm = newPassword
        api.sysUserUpdatePwd({ password, newPassword, confirm }).then(
            ({ success, data, message }) => {
                if (success) {
                    Message.success('密码修改完成')
                    this.close()
                } else {
                    Message.warn(message)
                }
            }
        )
    }

    close() {
        this.setState(cloneDeep(initData))
    }
    /**
     * 填充数据
     * 可以在设置this.record之后对其作出数据结构调整
     * [异步,必要]
     * @param {*} params
     */
    async fillData() {}

    /**
     * 获取数据
     * 可以对postData进行数据结构调整
     * [异步,必要]
     * @returns
     */
    async getData() {
        const form = this.form.current

        const valid = await form.validateFields()
        if (valid) {
            const postData = form.getFieldsValue()
            //#region 从前段转换后端所需格式
            //#endregion
            return postData
        }
    }

    render() {
        const { pattern, descriptions, visible } = this.state
        return (
            <Modal
                destroyOnClose
                onCancel={() => this.close()}
                onOk={() => this.updatePwd(this.form)}
                visible={visible}
                className="yo-modal-form"
                title="更新密码"
            >
                <Form className="yo-form" ref={this.form}>
                    <div className="yo-form-group">
                        <Form.Item
                            label="旧密码"
                            rules={[{ required: true, message: '请输入旧密码' }]}
                            name="password"
                        >
                            <Input.Password autoComplete="off" placeholder="请输入旧密码" />
                        </Form.Item>
                        <Form.Item
                            label="新密码"
                            rules={[
                                { required: true, message: '请输入新密码' },
                                { pattern, message: '密码格式错误' },
                            ]}
                            name="newPassword"
                            tooltip={descriptions}
                        >
                            <Input.Password autoComplete="off" placeholder="请输入新密码" />
                        </Form.Item>
                        <Form.Item
                            label="确认新密码"
                            rules={[
                                { required: true, message: '请确认新密码' },
                                ({ getFieldValue }) => ({
                                    validator(_, value) {
                                        if (!value || getFieldValue('newPassword') === value) {
                                            return Promise.resolve()
                                        }
                                        return Promise.reject(new Error('确认新密码不匹配'))
                                    },
                                }),
                            ]}
                            name="confirm"
                        >
                            <Input.Password autoComplete="off" placeholder="请确认新密码" />
                        </Form.Item>
                    </div>
                </Form>
            </Modal>
        )
    }
}
