import React, { useState, SetStateAction } from 'react';
import Modal from 'antd/lib/modal/Modal';
import { Input } from 'antd';
import Form, { FormInstance } from 'antd/lib/form/Form';
import FormItem from 'antd/lib/form/FormItem';
import { trailwayAddUser, trailwayChangePwd } from '../../service';

type ChangePwdState = {
    isShow: boolean;
    userId: Number;
};

type ChangePwdProps = {
    showChangePwd?: () => void;
};

class ChangePwd extends React.Component<ChangePwdProps, ChangePwdState> {
    private formRef = React.createRef<FormInstance>();

    constructor(props: ChangePwdProps) {
        super(props);
        this.state = {
            isShow: false,
            userId: 0,
        };
    }

    handleOk = () => {
        this.formRef.current?.submit();
    };

    handleCancel = () => {
        this.switchShow(0);
    };

    switchShow = (id: Number) => {
        this.setState((state) => ({
            isShow: !state.isShow,
            userId: id,
        }));
    };

    handleFinish = (id: Number, values: any) => {
        trailwayChangePwd(id, values).then((resp: any) => {
            if (resp.code == 200) {
                this.switchShow(0);
            }
        });
    };

    render() {
        return (
            <Modal
                title="修改密码"
                visible={this.state.isShow}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                closable={false}
            >
                <Form
                    ref={this.formRef}
                    onFinish={(values: any) => this.handleFinish(this.state.userId, values)}
                >
                    <FormItem name="password">
                        <Input placeholder="密码" />
                    </FormItem>
                </Form>
            </Modal>
        );
    }
}

export default ChangePwd;
