import { RollbackOutlined, LogoutOutlined } from '@ant-design/icons';
import { Avatar, Menu, Typography, Modal, Form, Input, Button, message } from 'antd';
import {useDispatch, useSelector} from "react-redux";
import { useNavigate } from "react-router";
import { LoginUser, removeLoginInfo } from "../../models/auth/_";
import { RootState } from "../../models/store";
import React, { useState } from "react";
import {divIcon} from "leaflet";
import { httppost2 } from '../../utils/request';
import apiurl from '../../service/apiurl';
import CryptoJS from 'crypto-js';

const { SubMenu } = Menu;

const HeaderUser: React.FC<{
  user: LoginUser | null
}> = ({ user }) => {

  const navigate = useNavigate();

  const dispatch = useDispatch();
  const [open,setOpen] = useState(false)

  const logout = () => {
    removeLoginInfo();
    navigate('/login');

    dispatch.runtime.setHasAlertBox(false);
    dispatch.runtime.setAlarmActive(false);

    window.location.reload();
  };

    //AES加密
    const encryptData = (data:any) => {
      const encryptedData = CryptoJS.MD5(data).toString();
      return encryptedData;
    }
  

  const onFinish = async(val:any)=>{
    if(val.newSecretKey!==val.secondSecretKey){
      message.error('确认密码错误')
      return
    }
    const params = {
      oldSecretKey:encryptData(val.oldSecretKey),
      newSecretKey:encryptData(val.newSecretKey),
      secondSecretKey:encryptData(val.secondSecretKey),
      userId: localStorage.getItem('userId')
    }
    const res = await httppost2(apiurl.setPassword,params)
    if(res.code===200){
      message.success('修改成功')
      setTimeout(() => {
        logout()
      }, 1500);
    }else{
      message.error(res.description)
    }
  }
  

  return (
    <div className="clearFloat">
        <div className="lf">
            <Menu
                mode="horizontal"
                theme="dark"
                style={{width:"130px", color:"#fff"}}
            >
                {/*icon={<Avatar><UserOutlined /></Avatar>}*/}
                <SubMenu key="pm" icon={<div className="user topMenuIcon1"></div>} title={
                  <span style={{fontSize:"12px"}}>
                    {localStorage.getItem('userName')??'-'}
                    {/* 咸丰测试 */}
                    </span>} >
                    <Menu.Item key="logout2" onClick={()=>setOpen(true)} className="userBox">修改密码</Menu.Item>
                    <Menu.Item icon={<LogoutOutlined />} key="logout" onClick={logout} className="userBox2">登出</Menu.Item>
                </SubMenu>
            </Menu>
        </div>

      {
        localStorage.getItem('getInfoAdcd') === "420000000000000"?
          <div className="lf" style={{width:"30px", height:"30px", lineHeight:"32px", background:"#fff", borderRadius:"50%", textAlign:"center", marginTop:"17px"}}>
            <a href="http://223.75.53.141:8000/home" target="_self" style={{color:"#4677FF"}}>
              <RollbackOutlined style={{fontSize:"18px"}}/>
            </a>
          </div>:null
      }

      <Modal title="修改密码" open={open} onOk={()=>setOpen(false)} onCancel={()=>setOpen(false)} footer={null}>
        <Form
          name="basic"
          labelCol={{span: 5}}
          wrapperCol={{span: 18}}
          initialValues={{remember: true}}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="原密码"
            name="oldSecretKey"
            rules={[{required: true}]}>
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="新密码"
            name="newSecretKey"
            rules={[{required: true}]}>
            <Input.Password />
          </Form.Item>

          <Form.Item
            label="确认密码"
            name="secondSecretKey"
            rules={[{required: true}]}>
            <Input.Password />
          </Form.Item>

          <Form.Item
            wrapperCol={{
              offset: 20,
              span: 4,
            }}
          >
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Modal>

    </div>
  );
};

export default HeaderUser