import React, { useState } from 'react';
import { Dropdown, Menu, Avatar, Modal, Form, Button, Input, message } from 'antd';
import { EditFilled, PoweroffOutlined } from '@ant-design/icons';
import LoginFace from "@/assets/images/loginFace.png";
import styles from "./index.less";
import type { MenuProps } from 'antd';
import md5 from 'js-md5'
import { history, useModel } from "@umijs/max";
import Password from 'antd/es/input/Password';
import userAPI from "@/api/sys/User";


const HeaderRight: React.FC = () => {

    const [isEditPwd, setIsEditPwd] = useState<boolean>(false);
    const [form] = Form.useForm();
    const onClick: MenuProps['onClick'] = ({ key }) => {
        switch (key) {
            case 'logout':
                localStorage.clear();
                history.push('/user/login');
            case 'edit':
                setIsEditPwd(true);
                break;
        }
    };
    const onEditPwd = async (acc: Account.TBAccountPwdDTO) => {
        acc.tB_Employee_Id = JSON.parse(localStorage.getItem("USER_TOKEN")?.toString()).userId;
        const md5_str = md5(acc.newPwd)
        const md5_str2 = md5(acc.oldPwd)
        acc.newPwd = md5_str;
        acc.oldPwd=md5_str2;
        const response = await userAPI.EditPwd(acc);
        if (response.data === true) {
            message.success('修改成功!');
            localStorage.clear();
            history.push('/user/login');
        } else {
            message.error(response.msg || '修改失败');
        }
    }
    const { initialState } = useModel('@@initialState');

    return (
        <div>
            <Dropdown placement="bottom" overlay={() => {
                return <Menu
                    onClick={onClick}
                    items={[
                        {
                            key: 'edit',
                            danger: false,
                            icon: <EditFilled />,
                            label: '编辑密码'
                        },
                        {
                            key: 'logout',
                            danger: true,
                            icon: <PoweroffOutlined />,
                            label: '退出登录'
                        }
                    ]}
                />
            }}>
                <div className={styles.login_user_info}>
                    <Avatar size={32} src={LoginFace} />
                    <span className={styles.login_user_name}>
                        {initialState?.currentUser.userName || '游客'}
                    </span>
                </div>
            </Dropdown>
            <Modal footer={null} width={500} title='用户账户' open={isEditPwd} onOk={_ => setIsEditPwd(false)} onCancel={_ => setIsEditPwd(false)}>
                <Form
                    form={form}
                    name="basic"
                    onFinish={onEditPwd}
                >
                    <Form.Item
                        label="员工Id"
                        name="tB_Employee_Id"
                        hidden={true}
                    >
                        <Input />
                    </Form.Item>

                    <Form.Item
                        label="旧密码"
                        name="oldPwd"
                        rules={[{ required: true, message: '请输入旧密码！' }]}
                    >
                        <Password />
                    </Form.Item>

                    <Form.Item
                        label="新密码"
                        name="newPwd"
                        rules={[{ required: true, message: '请输入新密码！' }]}
                    >
                        <Password />
                    </Form.Item>

                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            确定
                        </Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}

export default HeaderRight;
