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';
import { createCrudService } from '../../components/crud/_';

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) => {
    const path = `${apiurl.systemM.userM.updatePassword}?oldPassword=${val.oldPassword}&newPassword=${val.newPassword}`;
    createCrudService(path).userEdit().then((result) => {
      if (result?.code === 200) {
        message.success('修改成功，即将重新登录')
        setOpen(false)
        setTimeout(() => {
          logout()
        }, 1500);
      }
    })

    // 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}
        destroyOnClose
      >
        <Form
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 18 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          autoComplete="off"
        >
          <Form.Item
            label="原密码"
            name="oldPassword"
            rules={[{ required: true }]}>
            <Input.Password />
          </Form.Item>
          <Form.Item
            label="新密码"
            name="newPassword"
            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